Sociable Widget in WordPress

I use the Sociable plugin on a couple of the blogs I look after and was surprised to see that there is no sidebar widget. That means that if you want to add social icons to your home page and that features a few different posts, essentially you can’t.

After looking at this a few different ways I managed to pick out the code from the plugin and adapt it to be used in a text Widget. The code is as follows with the things to change shown in blue: –


<div class=’sociable’ style=’float:none’>
<ul class=’clearfix’>
<li id=”Facebook_Counter”>
<iframe src=”
&action=like&colorscheme=light&font” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden;height:32px;width:100px” allowTransparency=”true”></iframe>
<li id=”Twitter_Counter”>
<a href=”” data-text=”Your Site/Page –” data-url=”” class=”twitter-share-button” data-count=”horizontal”>Tweet</a><script type=”text/javascript” src=”//”></script></li>
<li id=”LinkedIn_Counter”><script src=”” type=”text/javascript”></script><script type=”IN/Share” data-url=”” data-counter=”right”></script></li>
<li id=”Google_p”><g:plusone annotation=”bubble” href=”” size=”medium”></g:plusone></li>
</div><!– End Sociable –>


The green highlight was because the row of icons can’t display across the sidebar so tends to go all over. You can modify this by closing one unordered list (ul) and opening another.If you include a lot of icons just repeat this.

I should add at this point that this is for the big 4! Facebook, Google, LinkedIn and Google+. If you include more you will need to view the code of a page with the Social plugin on it, search for sociable then copy the code and change the page details.

Once you have your code sorted out, just go to your WordPress Widgets area, add a text widget and paste your code in. With any luck it should all flow in and include the correct number of likes etc for the page.