Integrating Social Sharing via AddThis - ΩJr. Publizjr Creates Web Pages19 Mar. 2012
A.E.Veltstra
The web today offers many ways for people to find sites and content. One of them is by social sharing and bookmarking, via websites like Twitter, Hyves, Facebook, Digg, Reddit, etc. Adding social sharing to your web page means allowing your visitors to publish a link to your site easily, driving more visitors to your site.
One service that offers both social sharing functionality and the analytics to see how often your pages got shared, is AddThis. Their initial plan is free. OmegaJunior Consultancy uses their free services as well (and no, we aren't affiliated).
Here's how to add AddThis social sharing to your Publizjr Generator templates. Any capable PHP programmer should be able to follow these instructions, though a bit of Javascript knowledge does come in handy.
Obligatory Privacy Talk
Since May 2011, European Law requires a web site to request explicit consent from their visitors before they set most cookies, the exception being cookies needed for services requested explicitly by that visitor. Chances are your visitors did not ask to be tracked by AddThis (or any other kind of social sharing service that does tracking). You need to tell your visitors, explicitly ask for their consent, and react accordingly.
Resuming Instructions
AddThis offers a variety of scripts and modules, catered to a number of CMS-es and Blogging systems. For Publizjr, the version suitable for regular website integration suffices. Your client will need to provide their AddThis account identification.
Where to find this code
Our Required Parts downloadable contains a "translations" folder with a text file named "socialsharing". We provide 3 copies (1 per language + 1 generic), which are all the same. See the Publizjr Installation Instructions to find out what to do with that download.
Since the OmegaJunior Consultancy uses a copy of this file, you can see our live version of socialsharing via this hyperlink.
Adding it to the Template
We are going to assume you want to place only 1 set of social sharing buttons. AddThis themselves suggest to add a small set above the article text, and a second, big set, beneath it. Though this will increase sharing opportunity, it also provides a distraction. Whether the increase is worth the distraction is a good question and may differ per web page. A/B Testing should help you decide.
Let's say you wish to place the social sharing buttons between the article title and its introduction (like we did ourselves). In that case, you look through your template code, and locate where it prints the introduction text.
Above it, you add:
The AddThis script will add quite a bit of extra material to each of your pages. For a homepage, you might find that too much (as did we). So to prevent the buttons from showing up on the homepage (which Publizjr calls "index"), change the above code into this:
Save the template under a different name, upload it, and continue reading, because some configuration is required.
Contents of the socialsharing translation
In order to configure the functionality, you need to study the code:
This code results in a bar of social sharing buttons like you see above. Which buttons a visitor sees is determined mostly by AddThis, based on the visitor's previous behaviour, geolocation, and the website's geolocation (if available). We chose to prepend the Google Plus sharing button.
The script provide by AddThis is neither asynchronous nor deferred, meaning loading it will impede on your webpage speed. To overcome this, we have created an asynchronous version, quite like the one used by Disqus and Google Analytics. Our tests show that this works just fine.
Customizing the Code
The first thing to change is the pubid. Where the above code says "xa-123455789", you need to substitute your client's AddThis account identification. Otherwise your statistics will end up in cyberspace, or the buttons may not show up at all. You did open an AddThis account, didn't you?
Next, you may wish to choose which social sharing services to offer. We like to let AddThis decide this, as they know hundreds of services and have statistics to help their decision. We chose to add the Google+ sharing button. Read the AddThis Button Documentation.
Finally, you may want to change the interface configuration (the bit in the addthis_config block). We chose the configuration we deemed most generic and recommended. Check out the AddThis Client-Side API Documentation. We think it's well-written and straightforward.
If you need help with the customizations, let us know.
Upload the translation, fire up your site, request the test template, and test. Once you're happy, move your changes to your live templates.
Since May 2011, European Law requires a web site to request explicit consent from their visitors before they set most cookies, the exception being cookies needed for services requested explicitly by that visitor. Chances are your visitors did not ask to be tracked by AddThis (or any other kind of social sharing service that does tracking). You need to tell your visitors, explicitly ask for their consent, and react accordingly.
Resuming Instructions
AddThis offers a variety of scripts and modules, catered to a number of CMS-es and Blogging systems. For Publizjr, the version suitable for regular website integration suffices. Your client will need to provide their AddThis account identification.
Where to find this code
Our Required Parts downloadable contains a "translations" folder with a text file named "socialsharing". We provide 3 copies (1 per language + 1 generic), which are all the same. See the Publizjr Installation Instructions to find out what to do with that download.
Since the OmegaJunior Consultancy uses a copy of this file, you can see our live version of socialsharing via this hyperlink.
Adding it to the Template
We are going to assume you want to place only 1 set of social sharing buttons. AddThis themselves suggest to add a small set above the article text, and a second, big set, beneath it. Though this will increase sharing opportunity, it also provides a distraction. Whether the increase is worth the distraction is a good question and may differ per web page. A/B Testing should help you decide.
Let's say you wish to place the social sharing buttons between the article title and its introduction (like we did ourselves). In that case, you look through your template code, and locate where it prints the introduction text.
Above it, you add:
$strFilePath = "../../translations/socialsharing";
print( ReadPart( $strFilePath, false, '' ) );The AddThis script will add quite a bit of extra material to each of your pages. For a homepage, you might find that too much (as did we). So to prevent the buttons from showing up on the homepage (which Publizjr calls "index"), change the above code into this:
if ( $strFileID !== "index" ) {
$strFilePath = "../../translations/socialsharing";
print( ReadPart( $strFilePath, false, '' ) );
}Save the template under a different name, upload it, and continue reading, because some configuration is required.
Contents of the socialsharing translation
In order to configure the functionality, you need to study the code:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_google_plusone"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script>var addthis_config = {
pubid: "xa-123455789",
ui_508_compliant: true,
data_track_clickback: true
};
(function() {
var myAddThis = document.createElement( "script" );
myAddThis.type = "text/javascript";
myAddThis.async = true;
myAddThis.src = "http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-123455789";
( document.getElementsByTagName( 'head' )[ 0 ] || document.getElementsByTagName( 'body' )[ 0 ] ).appendChild( myAddThis );
})();
</script>
<!-- AddThis Button END -->This code results in a bar of social sharing buttons like you see above. Which buttons a visitor sees is determined mostly by AddThis, based on the visitor's previous behaviour, geolocation, and the website's geolocation (if available). We chose to prepend the Google Plus sharing button.
The script provide by AddThis is neither asynchronous nor deferred, meaning loading it will impede on your webpage speed. To overcome this, we have created an asynchronous version, quite like the one used by Disqus and Google Analytics. Our tests show that this works just fine.
Customizing the Code
The first thing to change is the pubid. Where the above code says "xa-123455789", you need to substitute your client's AddThis account identification. Otherwise your statistics will end up in cyberspace, or the buttons may not show up at all. You did open an AddThis account, didn't you?
Next, you may wish to choose which social sharing services to offer. We like to let AddThis decide this, as they know hundreds of services and have statistics to help their decision. We chose to add the Google+ sharing button. Read the AddThis Button Documentation.
Finally, you may want to change the interface configuration (the bit in the addthis_config block). We chose the configuration we deemed most generic and recommended. Check out the AddThis Client-Side API Documentation. We think it's well-written and straightforward.
If you need help with the customizations, let us know.
Upload the translation, fire up your site, request the test template, and test. Once you're happy, move your changes to your live templates.
Interested?
Let's meet for coffee or over lunch. Talk to me using this form.