How to add Social Networking Buttons Below Every Post

How to add Social Networking Buttons Below Every Post
By adding social networking icons to your blog you will definitely boost your blog’s traffic, if done properly. So be careful while placing them. They should be attractive, correctly placed, aligned and also they should be visible separately from the post. Although buttons like AddThis and AddToAny are quite useful, but now they look quite outdated.

So have a look on these buttons: Download buttons from here
Or from here [Free Icons Download]
Or From here [Glossy Buttons]

To show these icons below all your posts and to dynamically synchronize the post’s address with each of these buttons, follow these steps:

Go to “Layout” section, then click on “Edit HTML” link.
Then click on “Expand Widget Templates“. Now find (CTRL+F) this code:

<data:post.body/>

Then immediately after that code, add these lines:

<!–SOCIAL-BOOKMARKING-ICONS-STARTS–>
<b:if cond=’data:blog.pageType == “item”‘>
<!–DIGG–>
<a expr:href=’&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’><img alt=’Digg It!’ src=’ ‘ /></a>
<!–Stumble–>
<a expr:href=’&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’><img alt=’Stumble’ src=’ ‘/></a>
<!–Delicious–>
<a expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’><img alt=’Delicious’ src=’ ‘/></a>
<!–Technorati–>
<a expr:href=’&quot;http://technorati.com/faves?add=&quot; + data:post.url’ rel=’external nofollow’ target=’_blank’><img alt=’Technorati’ src=’ ‘/></a>
<!–Twitter–>
<a expr:href=’&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url’ target=’_blank’><img alt=’Tweet It!’ src=’ ‘ width=’122’/></a>
<!–Facebook–>
<a expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’><img alt=’Facebook’ src=’ ‘/></a></b:if>
<!–SOCIAL-BOOKMARKING-ICONS-STOPS-4-Help-http://bloggerstop.net–>

In the highlighted code (in red color), paste the DIRECT LINKS to the various social networking icons.
The black bolded code hides these icons in your Home-Page and only shows them below your posts.

Leave a Reply

200 Comments on "How to add Social Networking Buttons Below Every Post"

Notify of
avatar
Sort by:   newest | oldest | most voted
Erin Alberty
Guest

This is probably dense, but how do I get urls for the buttons once I’ve downloaded them?

View Comment
Divya Sai
Guest

Hi Erin
If you think, that this is dense, then you should not use them all [select only those buttons, which you want to display on your blog]

And if you want to display all of them, then use SMALL ICONS !
_____________________________

Now, to get the links [direct links] of the images, you can either upload them at
pages.google.com

or here:
hotlinkfiles.com

View Comment
Erin Alberty
Guest

By “dense” I meant I was dense – like, it was probably dumb of me not to know how to get the URL for the button images. 🙂

Thanks for your help!

View Comment
aLiN
Guest

Hey mate have a little atention about navigation bar.Your icons are reversed 😀

View Comment
Admin
Guest

Hi Alin

thanks for telling that, but if u are talking about the red buttons(prev and next posts arrows), then actually all the blogger blogs by default have that placement only !

View Comment
ready.2.spark
Guest

Hi there,

I’ve followed your step by step instructions, but I’m getting an error in blogger that states XML error: URL must be closed with ;
Any suggestions?

View Comment
Divya Sai
Guest

Thanks for commenting..

The problem is with Digg code(first one) – u can use the other codes right now,

I will fix it in a few minutes and reply here !

Regards
Sai

View Comment
Divya Sai
Guest

I have corrected the code, you can use it now. The digg button has been added thru a javascript, so it has a default image, and therefore u should change the position of buttons acc. to your choice.

View Comment
ready2spark
Guest

Thank you for fixing. I was able to get it working on my page. However, I’ve tried testing all of the different icons and i can’t seem to get twit this to work. I keep getting the following error:

The XML page cannot be displayed
Cannot view XML input using style sheet. Please correct the error and then click the Refresh button, or try again later.

——————————————————————————–

The server did not understand the request, or the request was invalid. Error processing resource ‘http://www.w3.org/TR/xhtm…

View Comment
Divya Sai
Guest

Welcome again
When I checked your blog, everything was working fine, including twitter….so i guess you have got it well, but if still you have any problem….u are free to ask me

Regards
Sai

View Comment
Pushkar
Guest

Great Work. Some cool resources. Keep up your good work. Only grunt is site takes quite some time to load. Please make it faster.

View Comment
Divya Sai
Guest

Thanks Pushkar for the compliments and your valuable advice, actually I keep on trying new features on this blog, which can be shared with my readers like you, but that usually requires me to add javascript files to this blog, and that makes this blog slow……sorry for the inconvenience….i’ll try to optimize it!

View Comment
abra-ka-dabra
Guest

Hi,
i tried adding with the method u told the cellar style template taken from ur site.
But it is not showing up.I used 48*48 icons.is there any limit on the size or something.
If i put the same piece of code anywhere it shows up bt doesn not work when i put it below data:post.body

View Comment
Divya Sai
Guest

Give the link to your blog !

View Comment
guru
Guest

i tried this one….
its working properly but all buttons also showing at the homepage also below every post… I am using notepad template.. why it is so..

View Comment
Blogger Templates
Guest

By the following method, you can show/hide widgets or anything in any of the pages of your blog..
presently you can use it hide the hack from your homepage:
read on…
http://bloggerstop.net/2008/12/show-widgets-in-only-specific-pages-or.html

View Comment
abra-ka-dabra
Guest

Hi Divya,
Sorry for not following up.I actually changed the template from cellar to arthemia.I am experimenting with different templates and looking for something minimalstic for my finance blog at gettingmoneywise.blogspot.com

Right now, i am playing with the templates at cash-generators-online.blogspot.com

Not that i am trying to spam with my blog urls but i really would appreciate any ideas on the template

Frankly,i stumbled upon on ur site and have it bookmarked for some 15 posts:-)

View Comment
Divya Sai
Guest

Well, templates do affect a lot, it has to be both Search engine and visitor friendly.
Try to have maximum area in white color, and minimum black color.

And best way to judge your template is by studying the bounce rate for your blog, with different templates….template with minimum bounce rate is the best suited for your readers !

View Comment
Mohammad Mustafa Ahmedzai
Guest

Man you are great!

Could you please publish a post on how to add image icons for “Older Posts “, “Newer Posts” and “Home”
Just the way you did it for yours. I succeeded with the home image but failed with Newer and older posts link..doesn’t seem to work!

Hey man! why can’t I copy my message from your Message box.

Plz help me with a post. Your blog is Great!!!

Regards,
MOHD___

View Comment
Blogger Templates
Guest

Hi Mohammad,
Here’s the post requested by you:
Change Newer Posts, Older Posts and Home Links In Blogger

As I was planning to write a post on this topic, so thanks for reminding me !

View Comment
wpDiscuz