Introduction

At the time of writing, I am looking after the ARM Connected Community. Not only as Enterprise Community Manager but also system administrator of our Jive community. So, when our members and community owners (the people who own an area in the community) asked for features, I want to see what I could do. If don’t intend to do anything with user feedback, what’s the point in asking for it?

Why do Custom Theme in Jive

Out of the box, you cannot find any social sharing capability. Most likely because Jive software was primarily used for internal communities. Social media is an important way to promote content. Part of the project delivery included adding social sharing capability, so I didn’t start from scratch. However, shortly after launch we discovered that our requirements were quite sub-optimal (not to say wrong). The major flaw was that the social sharing buttons (icons) were only visible to members who logged in, and not to simple visitors. Also, community owners indicated that they were more likely to share content they have read… so having the social sharing buttons at the bottom of the content was also judicious.

Therefore I reverse-engineered the solution to understand how the theme was working in Jive and how to personalise ShareThis to my members’ needs. The primary goal was to add the social sharing icons at the bottom of content, like the picture below shows: between the view counter and the categories/tags.Social shring icons at the bottom of a discussion

Structure of Jive Templates

You have a series of soy files importing ftl ones. The format is called FreeMarker and list of the files with their role is described in Jive 6.0 Community Administrator help. If you wish to edit the templates, you will need to create a new theme. Themes menu is located at: Admin Console, System, Settings, Themes. Its direct URL is https://yourinstance/admin/settings-themes.jsp. NOTE: before doing any modification to your theme, make a backup. Note also that when you upload a theme, it take a significant amount of time to decompress and apply the zip you uploaded. Make sure the page is loaded before moving away after you clicked upload.

Locating the Template for Each Content Type

We decided to add the social sharing icons at the bottom of the discussions, blogs, documents, and polls.

  • Dicussions: your-theme/template/forums/include/forum-macros.ftl
  • Blogs: your-theme/template/blogs/view-blog-post.ftl
  • Documents: your-theme/template/docs/presenter/presenter-default.ftl
  • Polls: your-theme/template/polls/poll.ftl

Finally, you will need to edit the footer where you place your script(s): your-theme/template/decorator/default/footer-javascript.ftl

ShareThis Code and Parameters

For the social sharing buttons, we have been using ShareThis. Here is a simplified version of the code we used:

Adding ShareThis Code in Your Header or Footer

I would advise you put the following code in the footer rather than header, unlike ShareThis recommends. Putting it in the footer won’t delay the page display if the ShareThis script takes a bit longer to load.

<script type="text/javascript">var switchTo5x=true;</script>  
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>  
<script type="text/javascript">stLight.options({publisher: "YOUR_PUBLISHER_ID_GOES_HERE", doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>

Adding JavaScript in your page

In the following code, you build the different buttons into a reusable block of code. The javascript then adds the block of code in each elements using the class socialSharingIcons.

<script type="text/javascript">
 function createSocialSharingTray() {
     var fb="<span class='st_facebook' title='Facebook' displayText=''></span>";
     var tw="<span class='st_twitter' st_via='AlbanRampon' title='Twitter' displayText=''></span>";
     var li="<span class='st_linkedin' title='Linkedin' displayText=''></span>";
     var gp="<span class='st_googleplus' title='Google+' displayText=''></span>";
     var si="<span class='st_sina' title='分享至微博' displayText=''></span>"; 
     var localeId = '${locale}';
     /*IF CHINESE*/
     if(localeId.charAt(0)=="z"){
         return si+fb+tw+li+gp;
     }
     return fb+tw+li+gp+si;
 }
 $j('.socialSharingIcons').append( createSocialSharingTray() );
</script>

If you wish more details and additional items on the code we use, please have a look at my dedicated post:  ShareThis Code, Parameters and Customisation.

Adding the Social Sharing Icons to the Templates

We will look for each content type where to insert the code so the icons show between the view counter and categories/tags.

Adding the Social Sharing Icons to Documents

Locate the following code in your-theme/template/docs/presenter/presenter-default.ftl and insert the line in red.

<footer class="jive-content-footer clearfix font-color-meta">
<@jive.displayViewCount viewCount=document.viewCount containerClass='jive-content-footer-item'/>
<!-- Social Sharing Icons --> 
<span class="socialSharingIcons"> </span>
<#include "/template/docs/presenter/presenter-tags.ftl" />

Adding the Social Sharing Icons to Blogs

Locate the following code in your-theme/template/blogs/view-blog-post.ftl and insert the line in red.

<!-- BEGIN content details -->
<footer class="jive-content-footer clearfix font-color-meta">
<@jive.displayViewCount viewCount=post.viewCount containerClass='jive-content-footer-item'/>
<!-- Social Sharing Icons --> 
<span class="socialSharingIcons"> </span>
<!-- Start TagSets/Categories -->

Adding the Social Sharing Icons to Discussions

Locate the following code in your-theme/template/forums/include/forum-macros.ftl and insert the line in red.

<#-- View Count -->
<li class="j-footer-left font-color-meta">
    <@jive.displayViewCount viewCount=thread.viewCount containerClass='jive-content-footer-item'/>
</li>
<!-- Social Sharing Icons --> 
<li class="j-footer-left font-color-meta">
     <span class="socialSharingIcons"> </span>
</li>
<#-- Categories -->

Adding the Social Sharing Icons to Polls

Locate the following code and insert the line in red.

<@jive.displayViewCount viewCount=viewCount containerClass='jive-content-footer-item'/>
<!-- Social Sharing Icons --> 
<span class="socialSharingIcons"> </span>
<@viewAndEditTags tags=poll.tagDelegator.tags entityDescriptor=poll container=container user=user canEditTags=action.isUserAuthor(user,poll) && JiveGlobals.getJiveBooleanProperty("jive.tags.editable", true)/>

Conclusion

If you are a Jive hosted customer, using custom themes not only to re-brand your community but also to improve it is not too difficult. You should of course always try development on your UAT instance first.

Today, the Jive community upgraded to 7 which has AddThis social sharing service out of the box… To me, this proves there was a real need for external communities. This blog stays relevant though as it allows you to use the service you want, and to add the icons where people would look for them after having read the article or discussion.

References