Add Pinterest And Other Bookmarking Buttons To Images In Your Blogger Posts

Posted : Sunday, July 08, 2012 | Post Author : Paul Crowe | 13 comments

Dear Reader, if you like SUYB’s content, feel free to comment on our blog posts.

On Spice Up Your Blog I have tutorials for lots of Social Bookmarking gadgets.We have posts showing how to add Social Bookmarking gadgets at the top of your posts, below your posts, scrolling beside your posts and in fixed positions.These are of course for readers to bookmark the content in your posts.But with so many Blogs having a focus on Images how about having the bookmarking icons appear on the actual images you have on your blog ?

People love to share images and the success of Pinterest has served to confirm this point.So in this post I have a tutorial to add social bookmarking icons from AddThis to your images, the icons will only appear when readers hover over the image and they appear with an overlay.

The buttons we are adding to the images are for Twitter, Facebook, Print, Pinterest, Google + and the Add This button which will cover all other services.

Check out the demo below then follow the tutorial.

View Demo Button

Add Bookmarking Buttons To Images

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

  • </head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<script src='' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {

Add Class To Images You Want Bookmarking Buttons On

Now we need to add a tag to images we want the buttons on.

OK if your uploading your images directly onto Blogger we have an easy way to add the class.The code below is how the html for an image looks when uploaded to Blogger.

Important – This is when you upload the image in compose mode.

<div class="separator" style="clear: both; text-align: center;">
<a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="" /></a></div>

You can see highlighted div class=”separator” we change this to div class=”addthis_shareable” like below :

<div class="addthis_shareable" style="clear: both; text-align: center;">
<a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="" /></a></div>

That’s it the bookmark buttons will be on images you add this code to.

If you are adding images in html mode or adding externally hosted images your image code will be like this :

<a href=""><img src="" /></a>

We add the class as shown below :

<a href=""><img class="addthis_shareable" src="" /></a>

That’s the tutorial you now have your blog images ready to bookmark.

Other service can be added to the buttons that show and in the same vein some of the current buttons can be removed.If you have a request to add or remove buttons add it to the comments.

Drop Your Comments And Questions Below.


  1. Hi, I’ve used your very helpful tutorial to add the pin it and twitter button to all my posts, but I would like to add a line above them saying: if you like this post, share it, or something to that effect… How do I do that? Thanks so much





  2. When you are adding the code for the buttons you add the text directly above it.

    So you would add this before the button code in your template (The < br / > is important :

    If your like this post pllease share it !<br/>



  4. this is obviously over my head because i didn’t understand this one at all. i could not find either div class or the externally hosted images info.





  5. When you upload an Image to your blog you need to go to html mode to see the code.

    Some more people have been having trouble with this so I may make a video to go with the post.

    Keep an eye out for that.



  7. This is very nice .I get what i am searching in these days in internet thanks for this and i want the another tutorial i wish to display mine photo on search engine reasult on web search as like this your website can you provide the idea???





  8. To get your images to show in search engines it is important you add and alt tag and a title tag.

    Check out the video here by Matt Cutts from Google :



  10. just wanted to let you know that you have a typo in part of the code. The section where you add the class to an externally hosted image.
    You have it as “class=”addthis_shareable”
    When it should be class=”addthis_shareable”

    This works good once I took the first ” out of it.
    Thanks for the post Paul





  11. Great shout FatChris thanks for the heads up I have fixed it.



  13. HI PAUL, As always another fantastic post from you. I have everything working with the exception of the facebook and twitter icons are not active as are the other icons that show up as I hover the pic I am testing, those active icons are print, pin and g+. I tested pin and it worked.
    Any additional guidance would be very helpful.
    Thamk you for all you do!!!


  14. thank you paul it works! you made my day!


  15. I use sharethis buttons. Can the same be done with the code by changing addthis to sharethis?


  16. Paul, one more thing i want to ask. Can you make a code in such a way that these buttons come to side ways in place of above the image. I want these buttons like site. You can have a glance. Plz reply soon. thanx.


    in my blog not shown gplus button on any to solve this problem