Wednesday, August 5, 2009

Add Social Bookmark Buttons to Blogger

In today's Blogger tutorial (Blogspot tutorial) you will learn how to place social bookmark buttons in the sidebar, footer and below each post in a Blogger Blogspot blog. This is a social bookmarking script for individual buttons or icons rather than the Add This all-in-one solution that I have previously written about. These free social bookmark buttons will encourage social bookmarking SEO by having your visitors save their favorite content and hopefully share it on social media sites such as Digg, Technorati and Stumble Upon thereby helping to grow your blog traffic.

I personally prefer to use an Add This social bookmark button because individual buttons can create a cluttered busy look. However, I also realize that the Add This social bookmarking button is not necessarily that recognizable to visitors who may have otherwise bookmarked your pages had the button been more recognizable to them.

YahooTwitterTechnoratiStumble UponRedditGoogleFacebookDiggDel.icio.us

Diggdel.icio.usMySpaceYahooTwitterTechnoratiStumble UponReddit



How to Add Social Bookmark Buttons to Blogger Sidebar or Footer

1. Login to Blogger if not already logged in

2. Navigate to Page Layout > Page Elements

3. Click on Add Gadget in Sidebar or Footer

4. Select HTML/Javascript gadget from the list of available gadgets

5. Copy and paste the social bookmarking button code into the content box that is available for free download below. Note you will only be able to add the small social bookmarking buttons to the sidebar unless you only want a few of them.

Download Code for Large Buttons (48x48)
Download Code for Small Buttons (24x24)

6. Add a title such as Bookmark and Share if you wish

7. Click on the Save button

8. Use the drag and drop feature in the sidebar to reposition the new widget if necessary and save again

9. Click on View Blog to admire new social bookmarking buttons


How to Add Social Bookmark Buttons Below Every Post in Blogger

1. Login to Blogger if not already logged in

2. Navigate to Page Layout > Edit HTML

3. Back up your template as a precaution by downloading it to your computer

4. Check the Expand Widget Templates box

5. Find the following line of code using CTRL + F

<p><data:post.body/></p>

or

<data:post.body/>

6. Paste the button code below directly below this line

Download Code for Large Buttons (48x48)
Download Code for Small Buttons (24x24)

7. Click on the Save Template button to save

8. Click on View Blog to admire your new social bookmarking button set at the bottom of your blog


Tips and Troubleshooting
  • To center the social bookmarking buttons
    <p><data:post.body/></p>
    <div align='center'>
    Your social bookmarking button code goes here
    <br/>
    </div>

  • To have your social bookmarking buttons only appear on post pages you will need to enclose the code in an if statement

    <p><data:post.body/></p>
    <b:if cond='data:blog.pageType == "item"'>
    Your social bookmarking button code goes here
    <br/>
    </b:if>

  • To center the social bookmarking buttons and have them appear only on post pages
    <p><data:post.body/></p>
    <b:if cond='data:blog.pageType == "item"'>
    <div align='center'>
    Your social bookmarking button code goes here
    <br/>
    </div></b:if>

  • To center the social bookmarking buttons and have them appear only on post pages
    <p><data:post.body/></p>
    <b:if cond='data:blog.pageType == "item"'>
    <div align='center'>
    Your social bookmarking button code goes here
    <br/>
    </div></b:if>

  • To add extra social bookmarking buttons to this set download the Aqauticus Icon Set

  • To change the social bookmarking buttons for another set simply do the following:

    1. To find other social bookmarking buttons please do check out my article Best Free Social Bookmark Button Sets for Blogger first as very likely you will find something suitable in that collection. Download your preferred icon set. These will be in a zip file so you will need to unzip them and take a look at what sizes are on offer. Most icon sets come in at least several sizes.

    2. Upload your button images to Blogger or to an image storage site like Photobucket or Flickr. One easy way to upload to Blogger is to create a post called images that you never publish. Then upload the images you want individually (that's the drawback). Copy the URL address of the button image and paste it into the social bookmarking button code replacing existing URLs

    3. Change the URL address of each button in the button code I have supplied. That's the code beginning with scr='


In today's tutorial you have learned how to add social bookmark buttons using a social bookmarking script to the sidebar, footer and below each post in a Blogger blog (Blogspot blog). I have supplied you with the code for a small and large social bookmarking button set to get you started. I suggest you download the codes first and install them on your blog. Then it is just a simple matter of changing the URL address of the social bookmarking buttons if you wish to substitute these for a new set of social bookmarking buttons. Also in this tutorial I offered you some tips and troubleshooting suggestions for adding your social bookmarking buttons to Blogger. If there are other issues that crop up for you as always please ask. I am interested in hearing from anyone about how they got on installing these social bookmark buttons.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add a Social Bookmarking Button to Blogger
Best Free Social Bookmark Icon Sets for Blogger



Subscribe to Blog Know How by Email

42 comments:

Harshajyoti Das said...

Great post. This shall help me to open my own social bookmarking blog in blogger.

www.seopune.in

The Wizz said...

You are welcome Harshajyoti Das! Glad you enjoyed these social bookmarking icons

TheMoneyEarner said...

Hi Wizz, Please tell me about your Daily No. of Visitors,
also the tips for getting the Visitors.
I want to know from you coz you are on blogger since Feb. 2009 (6 Months) and you've a lots of Visitors.

Please e-mail me at tushar.1206@gmail.com
Thanks

The Wizz said...

Tushar I have left you a longer answer to your question under adding an Amazon widget. Now that you have asked me this it has made me think that perhaps it would be a good idea to talk about the growth of my blog in a post so that all can benefit. Let me say this though that getting visitors is only half of it because your blog has to be worth visiting. Make it unique. It is too easy to follow everyone else but making your content stand out from the rest will keep visitors coming back. Keep posting and having fun!

Pamela M. Kramer said...

Just wanted to say thank you! I'm not using those buttons but I'm using a new template and couldn't find the code. Your post helped me find what I was looking for! Thank you again, it's been two days of madness.

The Wizz said...

Well done Pamela for finding your way to Blog Know How. Hope to see you here again. All the best with your new blog!

Sanjay said...

Thanks for putting your time in helping us to solve this problem. Keep it going. Also, you have nicely kept your SB button at your blog post footer.

The Wizz said...

Sanjay. Glad you liked this tutorial on adding social bookmarking buttons to Blogger. Enjoy!

Bored Stupid said...

I copied and pasted the footer html as you indicated, and it displays the icons very nicely, however when you can not actually click on them. they are not click able, they do not take you to the bookmarking websites??

The Wizz said...

Bored Stupid - sorry I forgot to change the links on the files. Follow the footer + sidebar button links for large and small to get the new code for each.

Lady Mama said...

Thanks for the code. The Twitter link for "below every post" part didn't work, then I tried using the code from the "Sidebar or Footer" part - it just connects to Twitter but there's no link back to the original post.

The Wizz said...

Hi Lady Mama. I have tested the footer/sidebar code for Twitter and it is definitely working. When you click on the button it asks you to log in to Twitter. Then you are taken to the page which asks "what are you doing?" You should see the blog name and link in this box. If the link is too long you will see a red minus sign above the box (top right). The update button will only be active once the character length is at zero or above. Click on the update button and you will see the Blogger post will be added to the list. The link is in Twitter short form not the long URL address you might be expecting. If you follow the link it will take you to the blog post in question. Hope this helps. Not sure why the below post buttons aren't working for you.

CupcakesOMG! said...

omg thank you!!! this is the ONLY code that's actually worked on my blog!!!!!! I've tried a gazillion of them today, so thank you SO SO MUCH!!! :)

The Wizz said...

Fantastic Cupcakes OMG! Glad to hear these social bookmarking buttons are working for you. Hope to see you here again

Chris said...

This looks amazing and works really well. When I put it in my blog post footer, though, the icons are displaying in a vertical line rather than a horizontal one. Any suggestions?

The Wizz said...

Hi Chris. I visited your blog and saw the icons working. They are displaying in a horizontal line so I guess whatever the problem was you have now fixed it. Good one! Thanks for using my code. Hope you will call back again sometime.

Earth Mother said...

I have downloaded your Large Icon collection and centered it on individual post pages. It looks lovely & you can view it here.

The problem I have encountered is that when I click on an icon, for example Twitter, and am taken to my Twitter Home page, there is no link for the post I was just on. In other words, there's nothing there to "tweet."

Or, if I click on the Delicious icon, I am taken to Delicious but the post does not appear for me to tag and save.

In both examples I've given, I have been logged in to my accounts.

Sooooo, kinda defeats the purpose of having social bookmarking icons if you are not able to bookmark and/or share the information you desired. No?

The Wizz said...

Oh dear this does not sound good. I will spend some time going through the code this weekend to see if I can fix this issue. Thanks Earth Mother for drawing it to my attention :)

Earth Mother said...

Hi! Just wanted to update you...

I have since downloaded the SMALL icon set and installed them on my site and they appear to be working just fine.

Not sure what the glitch was with the LARGE icon set that prevented them from linking back to my site/posts. But, I'm happy with the smaller icons so I shall leave them as is.

Thank you!

The Wizz said...

Thanks for the clarification Earth Mother. This helps me a lot to pinpoint what the problem might be. Great that the buttons are working for you. I will investigate the issue you had with the large buttons.

Anonymous said...

Looks great.... BUT what about shortening URL's.... makes it no good for Twitter!

The Wizz said...

Anonymous Twitter shortens the URL when you tweet. The button and code just provides the link to Twitter for the tweet. Still looking into the issue with the large buttons.

AhsanShankar said...

Nice article and thanks for sharing here

The Wizz said...

Thanks for visiting my blog AhsanShankar. Look forward to your next visit

@aditya said...

i cant replace it with my own social icon pics.. please help.. i followed the steps u ask me to.. but it just shows the alternative text instead of the image i want to place

The Wizz said...

@aditya leave your email or join my email subscribers and I will be in touch

@aditya said...

hey dont bother about it.. figured it out. thanks!

Brian said...

I have been trying to figure out how to do this for a while. Thanks!

ian said...

hi. great site, and very detailed posts.

now i a already have a set of bookmarking buttons, and i use a table to spread them out and look neat. What i was trying to accomplish, was your write up about the icons only showing up in posts. i tried 3 times to add the code the way you instructed, and when i click preview, the icons are gone, but every one of my posts is posted twice.

i either did something wrong, or maybe there is something different i need to do. could u please help? i would really appreciate it. i have a contact link on my blog.

- ian

The Wizz said...

Hey Brian glad to hear you got your buttons working :)

The Wizz said...

Ian I have emailed you

-Chie- said...

This is just great! I've been looking for sharing and bookmark buttons like this. Used it on my blog now. :)

Oh and I sort of blogged about it as well. I gave credits to you of course :) thanks again <3

HB said...

thank you very much.... ive searched for this in many places..this is the only place where it worked for me :)

Darla said...

Thanks for this!

Steel Structure Detailing, Steel detailing, Steel Structure Design said...

this is most useful script for Best blogging.

Maria Callas said...

You, sir, are the soul of light! Giving us so much help for free is a real act of kindness from a stranger.

Thank you!!

Sonja Dupor said...

Thanks for the tip. Worked like a charm.

DEEPAK OBERAI said...

Hi, I Saw Your Link in Bing.com I Love Your Blogs Kindly See my Link Here a New Alternative Money Making Network  best alternatives to adsense here

Tammy W said...

FINALLY! Thank you!!! I wish I had found your site before the other 6 sites I tried for 2 hours that all failed. Thank you very much!

sara angel said...

Nice article and thanks for sharing here
superb articles.

MRsCHADT said...

Great instructions. Was simple and easy to follow!

Lisa said...

Great informative blog. Really i am help from this blog..I am your fan..Thank you..

Post a Comment