We have a technical community and the company is present on a few social networks. That is what determined the choice of social sharing buttons: Twitter, Linkedin, Facebook and Sina Weibo (for our Chinese audience). You can learn more about my employer social media presence in ARM Social Media.

Social Sharing Icon Tray

Example of Social Sharing Icons Implemented

Once you create your publisher account, and selected your social networks you get two things to insert in your page:

  1. The javascript code which dictates the behaviour,
  2. The buttons themselves to add where you want them in your page.

NOTE: call the JavaScript in your page footer instead of the recommended <head>, this way if the script takes longer to load, your full page is not frozen empty… That’s happened to me and a few others

ShareThis Script for Standard Site

If you don’t run in https, you can use the following after your personalised using your publisher ID.

<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>

The additional parameters are described in the ShareThis Customize Functionality guide.

ShareThis Script with SSL

You need to use the SSL version if your site is using SSL browsing otherwise the content will not load. You might see a mixed-mode warning to let you know that the non-secure elements were not loaded… But that’s not a good user experience at all!

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://ws.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>

ShareThis Twitter Additional Parameter: via @YourTwitter

By default, when people will click on the Twitter icon, it will share the browser page title, a shortened URL and “via @ShareThis”.

ShareThis Twitter Share

Sharing via @ARMCommunity

You can personalise pretty much everything by adding the parameters in the button <span>

  • st_via to show “via @MyTwitter”. That would give you an @mention so maybe good for you to track use. There is an example below.
  • displayText if you want to give an improved tweet.
  • st_url if you want to specify your own link. To use this, you need to add shorten:false in the stLight.options parameter list we mentioned above.

ShareThis doesn’t support alternative URL shortening services like bit.ly. If you want to another service, you can code the third party URL shortening call.

ShareThis Icons Code

With the social networks I selected, I get the following code:

<span class='st_facebook' title='Facebook' displayText=''></span>  
<span class='st_twitter' st_via='AlbanRampon' title='Twitter' displayText=''></span>  
<span class='st_linkedin' title='Linkedin' displayText=''></span>  
<span class='st_googleplus' title='Google+' displayText=''></span>  
<span class='st_sina' title='分享至微博' displayText=''></span>

This code would in theory be added at each location where you want to display the social sharing buttons.

Making the Buttons Generic

You may want to add the same buttons at several places, for instance if you use different templates/themes for your site. But, for simplicity, you don’t want to have to edit every location each time you will tweak

The Code you Insert Where you Want to add the Social Sharing Icons

I would advise you add a comment so you know what your added code is for. Also, you could use a <div> instead of a <span>, but I prefer the <span> as I don’t have to deal with margin and padding in the style

<!-- Social Sharing Icons --> 
<span class="socialSharingIcons"> </span>

The Code to add in Your Page Footer

<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>";
 return fb+tw+li+gp+si;
 }
 $j('.socialSharingIcons').append( createSocialSharingTray() );
</script>

That the script will add the code to the elements with the class socialSharingIcons.

A Step Too Far?!

That one is not from me, but from John. Now, let’s say I want to be user friendly to your Chinese readers, you will put Sina Weibo first for them!

<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>

Conclusion

Now, if ShareThis changes their code or if we need to add/remove one social network, I only have to edit one location instead of 6 files. Less changes reduces the risk of me making an error… even if my error will be all the more visible!!

References