Placing Share Buttons On Images With AddThis

Now we can think for a different way in sharing our posts. We added share buttons on the footer of the post, header of the post and even on the side of the post as a floating one. But do you want to add sharing buttons like facebook, twitter and email button on images on its hover view ? Yes, the world's largest social sharing platform AddThis made that for us. I was waiting for such a widget. Aren't you ?

Live Demo

[[ To Veiw This Click The "Gadged Demo" Button Given above ]]

How To Install The Widget On Blogger ? 

You can install this widget by some simple steps. What you have to do is just do these steps without any mistake. 

• Log in to blogger.
• Go to the templates tab.
• Find this code [ press Ctrl+F on keyboard ] :

</head>

• Before the code given above, paste this code : 

<script src="http://s7.addthis.com/js/250/addthis_widget.js" type="text/javascript">
<style>
var addthis_config = {
services_overlay:'facebook,twitter,email,print,more'
}
</style>
</script>

• Save the template.
• Done. 

Now you had installed the widget on blogger. Now you have to add the AddThis share code to the images that you want the widget to appear.

Placing Code On Images For Appearing Buttons

You can see the share buttons only if you add code to individual images for seeing the share buttons. So please follow these steps : 

Whenever you add an image on blogger it probably look like this if you had uploaded the image through blogger. 

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-oy00gQc-YGY/T6IpnIA8y_I/AAAAAAAAAEY/zUQHumN3eW8/s1600/header+2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="49" src="http://2.bp.blogspot.com/-oy00gQc-YGY/T6IpnIA8y_I/AAAAAAAAAEY/zUQHumN3eW8/s320/header+2.jpg" width="320" /></a></div>

The AddThis code used for giving share button to images is :

 class="addthis_shareable"

<div class="separator" - change this code with <div class="addthis_shareable".

If you had uploaded the image through a url from other website, it probably looks like this : 

<a href="IMAGE URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger" border="0"  height="315" src="IMAGE URL" title="Blogger Logo " width="320" /></a></div>

Add the Addthis code before this code : 

 height="315" src="IMAGE URL" title

By adding the addthis code, it looks like this :

class="addthis_shareable" height="315" src="

Now you have learnt how to add the AddThis code for placing share buttons on images.

What Are The Main Advantages Of The Widget ? 

The main reason is that people generally dislike to share the posts through the buttons below post title and below post. But they likes to share the post via an image. The main example for that is pinterest. Its share button generally includes Facebook, twitter, email, print and more button. The AddThis more button allows the users to see all types sharing and bookmarking services. So in my opinion, this widget could give you more shares for your post and everyone must add this on your blog.

For adding more services to the widget, visit this link : http://www.addthis.com/services/list . This link contains complete AddThis share codes.


TIP : The widget will be active the complete loading of the webpage.