First of all let’s download the SocialCount package on GitHub. The files that are needed for this tutorial are:
- socialcount-icons.css (or .scss) and the icon directories: this file gives a neat styling with social media icons. It can easily be overriden.
- the "service" directory: this directory is optional but recommended: it will show the number of shares of the current page under the icons (like on this blog).
Adding the markup for the social buttons
Now let’s add the markup needed by the plugin for displaying the social buttons. This markup has to be added in your WordPress template. In my case I only want to show the buttons under the blog articles so I edited the content-single.php file of my template (can be another filename depending of your template!).
1 2 3 4 5 <ul data-url="YOUR_CUSTOM_URL" data-counts="true" data-share-text="SHARE_TEXT_HERE"> <li><a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_CUSTOM_URL" title="Share on Facebook"><span></span><span>Like</span></a></li> <li><a href="https://twitter.com/intent/tweet?text=YOUR_CUSTOM_URL" title="Share on Twitter"><span></span><span>Tweet</span></a></li> <li><a href="https://plus.google.com/share?url=YOUR_CUSTOM_URL" title="Share on Google Plus"><span></span><span>+1</span></a></li> </ul>
data-counts attribute is set to true if you want to show the number of shares (therefore the “service” directory of the SocialCount plugin is needed). Be sure, if you set
data-counts to true that the service directory is correctly located. If it does not work you can always change the “serviceURL” setting in the socialcount.js file to meet your needs.
As you can see, the
data-url property of the
<ul>-tag has to be updated to the current URL, in this case to the URL of the current blogpost. Update the tag with this to do so:
1 data-url="<?php urlencode(the_permalink()); ?>"
the_permalink() displays the URL to the current post. Just what we needed.
data-share-text attribute is similar:
1 data-share-text="<?php urlencode(the_title()); ?> - <?php urlencode(the_permalink()); ?>"
NOTE: Be aware that it isn't the best solution to add this markup directly in the template file. A better solution would be to make a WordPress plugin for it. However this tutorial should give you a quick overview of how to use this plugin in combination with WordPress.