Monday, February 9, 2009

Add a Social Bookmarking Button to Blogger

In this tutorial you will learn how to add an Add This free Social Bookmarking button to your Blogger blog (Blogspot) blog. By adding this feature to your blog you will enable visitors to your blog to create links to popular social bookmarking sites such as Google, Technorati, Facebook, MySpace, Digg, Stumble Upon, Reddit, Delicious, Furl, Yahoo etc. Adding personal social bookmarks enables visitors to share these links with others thereby helping you attract more traffic to your site. For more information on the benefits of social bookmarking please refer to my article - Benefits of Social Bookmarking for Blogger bloggers.

Add This Share ButtonThis tutorial shows you how to place a social bookmarking button on your site by accessing a free social bookmark and feed button builder service called Add This. Add This will supply you with a simple piece of code which when placed in a widget will insert a social bookmarking button either at the end of each post or in the sidebar. If you wish you can add the social bookmarking button to both as I have done on this site. For those new to blogging don't worry if this sounds complicated as this article gives you step by step instructions suitable for any Blogger user including beginners.

How does an Add This Social Bookmarking Button Work?
The code from Add This places a button on your site which when clicked on by a visitor to your site opens a menu of the most popular social bookmarking services. When a selection is made by a visitor eg Delicious, Yahoo, Google, Facebook, MySpace, Stumble Upon they are given the option to submit your blog to their online bookmarks. Once a visitor submits your blog to a social bookmarking service Add This can provide you with useful analytics about bookmarks, feeds and emails depending on which buttons you enable on your site. This kind of statistical information from Add This will help you gain greater understanding of your site traffic and your most popular posts.

Add This Social Bookmarking Options


Steps for Adding a Social Bookmarking Button from Add This to Your Blogger Blog

1. Register for a free account with Add This

Add This Sign Up for a Free Account Page

2. Once you supply a username, email address, password and your website address sign up is pretty much instanteous.

3. After sign up is confirmed click on Get Your Button. This will take you to the Create Your Button Page

Add This Create a Button Page

4. On the Create Your Button page you will be asked to make some selections about your social bookmarking button.

What kind of Button? Select Sharing/bookmarking button

What Look? Choose any of the six button choices. For this example I am going to select the share button

Select Add This Share Button

Where? Select on a blog

Blogger Platform? Select Blogger

At this point the information your have entered should look like the picture below:

Add This Create a Button Page

Once you have confirmed that you have entered the correct information click on the Get Your Code button and you will be taken to the Get Your Code page.

5. From the Get Your Code page you will be given the option to Preview your button. Do so if you wish or move on to Step 6.


Having generated the code for your Add This Social Bookmarking button you now need to decide where to position it on your blog. You may either place your new Social Bookmarking Button beneath each post (see below) or in a sidebar.


Instructions for Placing a Social Bookmarking Button Beneath Each Post of Your Blogger Blog

Click on Blog Post Button option.

Highlight the Javascript code supplied by Add This

Copy the code to the Clipboard of your computer using Ctrl + C command

In a new window open your Blogger Blog and sign in

Navigate to Layout > Edit HTML

As a precaution Backup your template in case you inadvertently overwrite some code.

Once you have backed up place a tick in the Expand Widget Templates checkbox

Use the Ctrl + F command to open the toolbar which will appear at the bottom of your page while using Blogger. You can close this at any time using the Ctrl + F command or by clicking on the blue cross in the lefthand corner.

Now highlight the following line of code and using the Ctrl + C command copy and paste the code into the Search Box on the toolbar at the bottom of Blogger. This action will quickly locate the code for you in your Blogger template. You will be placing the code immediately before this tag.

<div class='post-footer'>


Return to Add This and highlight the Javascript button code supplied. Copy the code to your clipboard using the Ctrl + C command.

Reopen the Blogger window and place the cursor right before the tag that you located earlier.

Paste the Javascript code from Add This into the template using the Ctrl + V command.

Your code placement should look like that pictured below

Code Placement for Free Social Bookmarking Button from Add This
Click on Save Template

Now click on View Blog from the top menu and navigate to the end of your first post. If all instructions have been followed you will now have a social bookmarking button at the bottom of each post.


Instructions for Placing a Social Bookmarking Button in a Sidebar of Your Blogger Blog

Follow the Add This automated process by clicking on Add the Menu to My Blog button. This will place an Add This social bookmarking button in a widget in your sidebar as you see on this site.

Blog Know How Sidebar Showing Add This Bookmark Button

This Blogger tutorial has covered the steps involved in adding a free Add This Social Bookmarking Button to your Blogger blog (Blogspot blog). Grow your Blogger (Blogspot) blog today by adding a free Add This social bookmarking button which will enable visitors to bookmark your site and share your posts with others. Add This will provide statistical tracking of social bookmarking activity on your site and help you determine your most popular posts.

Related Articles
List of Blog Know How Blogger Tutorials
10 Tips to Build Site Traffic for a Blogspot Blog
Add Social Bookmark Buttons to a Blogger Blogspot Blog
Free Social Bookmarking Buttons for Blogger



Subscribe to Blog Know How by Email

38 comments:

Anonymous said...

Easy peasy. Got my button and it looks great. This really works!

Best Blogger Tutorials said...

I have included this in article in a bunch of articles about Social Bookmarking and Blogger.

Social Bookmark Buttons For Blogger

Mohamed Thoufeeq said...

Nice and very informative.
Keep visiting my blog for new posts and updates.
Thanks..

The Wizz said...

Thanks Mohamed. Hopefully you will become a regular visitor!

bdlinters said...

good and cool post tips.thnx.

bdlinters said...

nice thnx

The Wizz said...

Your welcome. Love this gadget it is easy to install but very powerful!

Chris said...

Thanks for the tutorial, have the buttons up and running now!

The Wizz said...

Great Chris. I wish you every success with your blog

Anonymous said...

Really a informative post !!!
www.freesoftwareloot.blogspot.com

Tushar said...

Thankx... For all Your posts...

The Wizz said...

Happy to help Tushar

Bookmark said...

Hi there! Check out the latest Social Bookmarking link generator out there: http://www.bookmarkcraze.com/

The Wizz said...

Thanks for the tip Bookmark

Anonymous said...

tnx for the tip :) pls. check my site http://www.dabawnars.tk

ichiziro said...

I'm so very glad there are people like u giving great in-depth tips for blogspot.
from now on i'm your regular reader.
thank you

The Wizz said...

Glad to have you aboard ichiziro

lirik said...

thanks for the tips..nice post

Mywealth said...

I've been following your blog for sometime now and been using some of the tips given. I'm glad it works. Thanx, good job on your side n love the tips and tricks.

sweetbayag said...

nice. i got it on my blog

http://aykantot.com

Terri Peters said...

THANK YOU. Do you know how late I stayed up last night looking for how to do this? I'd be drinking a lot less coffee this morning had I found this at 8 PM last night when I started the hunt. Bless you.

Anonymous said...

Nice!

techdraginfo said...

i add this button at the top of the post can u give me suggestions to put these in right place
http://techdraginfo.blogspot.com/

The Wizz said...

Techdraginfo placement of an Add This or Share button in Blogger can be helpful in many locations. Are you wanting to put in your Blogger header?

Michael said...

Great tutorial! Just used it

http://businesskata.blogspot.com/

SEO Basics Tutorial said...

Great tutorial to build right blog

Melanie Bremner said...

I followed this along and added the button but there is also another button much like this included in the html of the template I am using and I don't know how to remove it so there is only this one.

The Wizz said...

Hi Melanie. Not sure what template you are using so it is difficult to say. If you are using a default Blogger template you can turn off the share buttons by going to Design > Page Elements. Turn off by editing Blog Posts widget.

Tina said...

thank you, great tutorial!

kim said...

oh it really works super amazing, I do felt like a pro LOL. Thanks a lot for this master ^^. well checking your other tutorials ^_~

Chittorgarh said...

Thanks for such a nice tutorial, I have added AddThis to my blog :)

yagnesh_shenoy said...

this is so cool thanks for this tutorial i really appreciate it
http://bharatbuysell.com

Anita khanna said...

This was a very good plugin button for blogger thanks :D

Most Popular Articles - Free Article Directory said...

Thanks..

Wicked Innovation said...

Bookmarkings on blog are so good. It's one of the strategy to have a great traffic to your site and also to bookmark your blog without any visiting sites

Wow Mysterious said...

wow! really cool tip admin, thanks!!

The Abacus said...

If I could I would just put you on a pedestal and worship you. Your blog has really helped me a lot. It reduced stress and made my blog look better. Thanks.

SHAS said...

Thanks,these are nice info.
www.health4people.blogspot.com

Post a Comment