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




| 13 comments

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='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
services_overlay:&#39;facebook,twitter,print,pinterest,google_plusone_share,more&#39;
}
</script>

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="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" /></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="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" /></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="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png"><img src="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" /></a>

We add the class as shown below :

<a href="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png"><img class="addthis_shareable" src="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" /></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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

13 comments:

  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

    ReplyDelete
    Replies
    1. 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/>

      Delete
  2. 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.

    ReplyDelete
    Replies
    1. 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.

      Delete
  3. 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???

    ReplyDelete
    Replies
    1. 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 :

      http://googlewebmastercentral.blogspot.ie/2007/12/using-alt-attributes-smartly.html

      Delete
  4. 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

    ReplyDelete
    Replies
    1. Great shout FatChris thanks for the heads up I have fixed it.

      Delete
  5. 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!!!

    ReplyDelete
  6. thank you paul it works! you made my day! http://missrobil.blogspot.com

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

    ReplyDelete
  8. 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 mashable.com site. You can have a glance. Plz reply soon. thanx.

    ReplyDelete
  9. in my blog not shown gplus button on any picture.how to solve this problem

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us