January 2, 2012

Add Share Buttons for Your Blogger Posts with AddThis


In blogging, people used to come visit your blog if they really worth what they are reading and some people might land on your blog after finding out your interesting blog posts via recommendations, web search or from wherever your content has been shared. Did you feel eventhough you have interesting posts, they have no readers as you expected?

Some marketers may recommend you to try best SEO techniques to bring out more users. Yeah there is greater chance to see your posts on web search. But people searching for what they need and what they feel interesting. And once they obsessed with interesting content, they would really like to share them with people who has similar interests. That will end up with gaining more traffic or readers to your content. So would you like to set up a way to share your posts in a giffy?

Sharing could result more audience for your content. In Blogger, you can offer few sharing capabilities for your readers on your post footer. But few means few sharing or not at all. The social web is consist of several hundred of social networks and there people finding for interesting content. People tend not to share and don't waste their time if there is no quick way to share your posts. Do you?

AddThis is a content sharing platform which enables users to share your content quite easily across many international social networks. AddThis allows you to use personalize services and tools with real-time tracking. So you can measure all sharing happen on your blog and find what matter most to your readers. Also it reveals how many new site visits come back from shared content. As it is offering you a reliable service, reader may never find any difficulties in sharing your content. And yeah, it's easy to implement.



Before You Go:

You need to have an AddThis account before you proceed with below steps. Sign up for a new AddThis account if you haven't got one yet.


Steps:

1. Navigate to Blogger Dashboard.

2. Click on your Blog Title.

3. Jump to Template tab.


Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click Edit HTML button underneath your blog preview.


5. Now find </head> in your template.

6. Add following AddThis script right before the </head> tag.

<script type='text/javascript'>
var addthis_config = {"data_track_clickback":true, "data_track_addressbar":false};

var addthis_share =
{
 templates:
 {
   twitter: "{{title}} {{url}} via @[Your Twitter Username]"
 }
};
</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=[Your Profile ID]' type='text/javascript'/>


Color Indication Information:

   - Click Tracking

Here this will enable tracking of click backs for your shared content. If you wanna disable click tracking of your shared content, set this as false. However this doesn't affect on your SEO.

   - Address Bar Tracking

This feature responsible for tracking of your content being shared by copying the page URL from user's address bar. If you wish to enable this feature, specify true here.

   - Your Twitter Username

Add your Twitter username here. So whenever someone share your posts via Twitter, it will mention your Twitter username in the tweet.

   - AddThis Profile ID

Add your AddThis profile ID here. You can find your AddThis profile ID on AddThis Publisher Profiles page.


7. Now search for <data:post.body/> in your template and just after that add the code snippet correspond to your preferred style.

Notes:

* Adding below <data:post.body/> will place your button under the post. If you need to place it elsewhere on post page, read How to Position Elements on a Blogger Post Page.

* You may encounter two search results for <data:post.body/>. If it doesn't work by placing the code snippet after first resulted line of code, you might need to try second one.

Style 01


<b:if cond='data:blog.pageType == "item"'>
<a href="http://www.addthis.com/bookmark.php?v=300&amp;pubid=[Your Profile ID]" class="addthis_button_compact">Share</a>
</b:if>


Style 02


<b:if cond='data:blog.pageType == "item"'>
<a class="addthis_counter addthis_pill_style"/>
</b:if>


Style 03


<b:if cond='data:blog.pageType == "item"'>
<a class="addthis_counter">
</b:if>


Style 04


<b:if cond='data:blog.pageType == "item"'>
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=300&amp;pubid=[Your Profile ID]"><img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0"/></a>
</b:if>


Style 05


<b:if cond='data:blog.pageType == "item"'>
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=300&amp;pubid=[Your Profile ID]"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
</b:if>


Style 06


<b:if cond='data:blog.pageType == "item"'>
<div class="addthis_toolbox addthis_default_style ">
<a href="http://www.addthis.com/bookmark.php?v=300&amp;pubid=[Your Profile ID]" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"/>
<a class="addthis_button_preferred_2"/>
<a class="addthis_button_preferred_3"/>
<a class="addthis_button_preferred_4"/>
</div>
</b:if>


Style 07


<b:if cond='data:blog.pageType == "item"'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"/>
<a class="addthis_button_preferred_2"/>
<a class="addthis_button_preferred_3"/>
<a class="addthis_button_preferred_4"/>
<a class="addthis_button_compact"/>
<a class="addthis_counter addthis_bubble_style"/>
</div>
</b:if>


Style 08


<b:if cond='data:blog.pageType == "item"'>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"/>
<a class="addthis_button_preferred_2"/>
<a class="addthis_button_preferred_3"/>
<a class="addthis_button_preferred_4"/>
<a class="addthis_button_compact"/>
<a class="addthis_counter addthis_bubble_style"/>
</div>
</b:if>


Style 09


<b:if cond='data:blog.pageType == "item"'>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"/>
<a class="addthis_button_tweet" tw:via="[Your Twitter Username]"/>
<a class="addthis_button_google_plusone" g:plusone:size="medium"/>
<a class="addthis_counter addthis_pill_style"/>
</div>
</b:if>


Style 10


<b:if cond='data:blog.pageType == "item"'>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"/>
<a class="addthis_button_tweet" tw:via="[Your Twitter Username]"/>
<a class="addthis_button_pinterest_pinit"/>
<a class="addthis_counter addthis_pill_style"/>
</div>
</b:if>


8. Now Save your template.


More Information:

* You can obtain or review analytics for shares on your blog via AddThis Analytics page.


Enjoy :-)

46 comments:

Seta Tutundjian said...

Mayura, thanks for this great post, exactly what i was looking for:))) I copied all the codes you listed in consequence, went to layout, added a gadget, picked JVA/HTML and pasted. Nothing happened.

so I figure out this cannot work as a gadget but i need to access the HTML, right or is there a way for it to work as a gadget/widget? I am a little afraid to go into the HTML template and mess things up.
my site is www.dish-away.com

Mayura De Silva said...

Hi Seta,

I got your query :) However it's quite simple. Just navigate to AddThis Sharing Tools page. Select Blogger and your style, then grab the widget for your blog :)

Cheers...

Seta Tutundjian said...

Mayura, you are an ANGEL!!! I couldn't believe how easy this was...... I have probably spent more than 30 hours searching the net to find out how to do this!!! thank you, thank you, thank you;-D)))))))

Mayura De Silva said...

Hi Seta,

You are welcome dear :) Now you know how to do that.

Enjoy Blogging...

Cheers...

x said...

Thank you very much for this information!

Mayura De Silva said...

Hi Sally,

You are welcome :)

Cheers...

Bradley Swarts said...

Thank you for this post it was very helpful.

Mayura De Silva said...

You are welcome Bradly :) And your compliments...

Cheers...

offshade said...

thank you very much Mayura. Could you also give me a hint how to make the widgets align in the middle of the column instead of left?

Mayura De Silva said...

Yeah mate :) You can center them by enclosing your button code snippet with div tags as below.

<div align="center">
[Your Share Button Code Snippet]
</div>

But please note that it may not work for some styles such as Style 9. If above method doesn't work for you, reply again mentioning the style you have been using on your site.

Cheers...

Unknown said...

hey have a question, where do i put it to be before "Read more" 'cause I can't figure it out.

Mayura De Silva said...

You can place it just before this line in your template mate,

<div class='jump-link'>

Cheers...

Unknown said...

hey nice post firstly.
Secondly, help me out with the share count. I want only the share count of each post to be displayed with each posts, on the home page, and not the share count of the home page. in case we have 4-5 posts displayed on the home page itself. By default, addthis counts the shares of the URL only.

Mayura De Silva said...

Yeah mate :) It shows share count of the specified URL and if you show them on homepage it will share your homepage URL. I couldn't figure out a way to display share count on homepage while sharing post URL in Blogger. But you can do it with ShareThis. If I figure that out, will let you know.

Cheers...

Unknown said...

Thanks Mayura.

But It is possible. I used some code previously. Now, I have missed it. But any ways, one more thing, with your code, the plugin only displays when the poet is opened. Not on the home page. Can we just put some <b:if cond... so that it atleast shows up on the home page also. Where all posts summaries are listed.

Mayura De Silva said...

Oh I didn't figure it out mate :) You can show buttons on homepage by removing <b:if cond='data:blog.pageType == "item"'> and </b:if> lines :)

Cheers...

Unknown said...

Thanks Mayura!
I would still try to figure out something like, the buttons are showed on the home page, but they show the count of share of individual posts.
but seriously. great blog. Thanks for keeping it dead simple. :)
Cheers!

Mayura De Silva said...

You're welcome mate :) Removing above mentioned lines will show share count for individual posts on homepage but share your blog URL on homepage. I think you wanna show individual post share count and share individual post link even on homepage. isn't it?

Cheers...

Anonymous said...

Hey sweetie. Anyway to config the Facebook button to post to a page? When I click the fb icon, it wants to post to my personal profile. :/

Mayura De Silva said...

Hi Brenda,

Welcome to Mayura4Ever :) Facebook like button configures for Facebook users to like on posts and it does offer them to post on their Facebook profile only. If you wanna share it on a Facebook page, group or with friends, either you have to use Facebook Send button or AddThis Share button does that for you.

Hope it helps dear :)

Cheers...

Anonymous said...

Thank you! So I added the first part of the coding but when I go to tweet it, I get an error?

P&HH: I'll have a Diet Coke AND a Big Mac: http://pibblesnheathen.blogspot.com/2011/04/i-have-diet-coke-and-big-mac.html#.T7UI6v5JeaQ.twitter

Mayura De Silva said...

I'm sorry dear. I was away from my blog. I've just landed on your blog, but couldn't find share buttons on it. Did I miss something? :)

Cheers...

Sandipan said...

Worked like Magic. 

Mayura De Silva said...

Hi Sandipan,

Glad you made it on your blog mate :) Enjoy sharing...

Cheers...

raindropanimation said...

hi Mayura
i need your one more time help i added addthis but share button is not opening in good way you can see in my blog http://thistest555.blogspot.in/2013/03/test-post.html#.UTeDzxynr9M

Mayura De Silva said...

Hi Mate,


What code snippet you added from above?


Cheers...

raindropanimation said...

this is code i added And pinterest is not coming and share button is not opening in good way you can see in my blog

Mayura De Silva said...

Hi Mate,

Remove class='ikonz-social' part from the div tag above your share button code.

Cheers...

raindropanimation said...

it work @MayuraDeSilva:disqus thanks a lot for your help and it not showing a line how to add line at above

Mayura De Silva said...

You need to keep removed attribute to have the same line above share buttons. You gotta decide either to have share buttons working properly or horizontal line :)


Cheers...

Bren Lee said...

Hey Mayura! I hate to open a can of old "worms" here but I'm playing with a blogger blog, installed Disqus, and just went through the steps to install these codes, and it's not showing :(

Mayura De Silva said...

Hey Brenda,

Not at all dear. There are two data:post.body tags in your template. Did you try adding the code right after next tag? :)

Cheers...

Bren Lee said...

I added right after the first data:post.body :(

Mayura De Silva said...

Oops... Did you check it in an individual post Brenda? 'Cause it's not visible on homepage though.

Cheers...

Bren Lee said...

I had to put it on the second data:post.body for it to work and yes, it's only on the individual posts. Didn't want on the homepage. Thanks Mayura! Ya saved me once again! :)

Mayura De Silva said...

Woopies... Thanks for letting me know Brenda :) That's very helpful here.

I've made changes to post and hope readers won't be confused :)

You're always welcome dear :)

Cheers...

annstaub said...

When I do this, it only shows my twitter handle if you use the red share box to tweet. My twitter handle will not show if you click the AddThis tweet button.

Mayura De Silva said...

Hi Ann,

What style did you implement on your blog dear?If the code snippet contains [Your Twitter Username], you need to replace that with your Twitter username :)



Cheers...

annstaub said...

Thanks for the reply - I tried a few different styles but was really going for Style 10. I did add my username to that section as well. It only halfway worked with @twitterhandle showing up if I went to tweet with the red share button. I took the code off my blog for now, until I can work on it again to get it right.

Mayura De Silva said...

Hi Ann,


I hope you have added Twitter username there without preceding @ sign :)

If you can implement the code again and find it's not working, I can check it out :)

Cheers...

annstaub said...

Yep, I actually tried it both ways just to make sure. I will have to work on it again sometime tomorrow but will let you know if I come across any other issues. Thanks!

Mayura De Silva said...

Oops... I've checked if there any issues with AddThis lately but couldn't find.


Alrighty dear, try it again and I'll check it out if it's not working out :) Jus' let me know.


Cheers...

Kaarunya said...

It worked :) :) :)
U explained really well :) the second data:post.body only worked :)
Gosh @last all the links are working fine too :)
only the description that appears below the share is all wrong...
do u know how to set that right?

Mayura De Silva said...

Hi Kaarunya,

Cool! Glad to hear it's working on your blog and thanks for the kind words too dear :)

Do you have descriptions fetched for your posts? :) If not, you can refer to this post ~ How to Add Search Descriptions for Your Posts in Blogger

Hope it will be helpful :)

Cheers...

Kaarunya said...

I will check it out right niw :)
btw do u know how to center these buttons??

Mayura De Silva said...

Alrighty! :)

For centering, simply the idea is to have enclosing DIV tag with the align="center" HTML code. If the code already have a div tag, just add the align attribute.


[Your AddThis Code]


Hope it helps :)

Post a Comment