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?
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.
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.
Color Indication Information:
- Click Tracking
- Address Bar Tracking
- Your Twitter Username
- AddThis Profile ID
Add your AddThis profile ID here. You can find your AddThis profile ID on AddThis Publisher Profiles page.
Style 01
Style 02
8. Now Save your template.
More Information:
* You can obtain or review analytics for shares on your blog via AddThis Analytics page.
Enjoy :-)
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:
{
};
</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=[Your Profile ID]' 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.
* 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&pubid=[Your Profile ID]" class="addthis_button_compact">Share</a>
</b:if>
<a href="http://www.addthis.com/bookmark.php?v=300&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>
<a class="addthis_counter addthis_pill_style"/>
</b:if>
Style 03
<b:if cond='data:blog.pageType == "item"'>
<a class="addthis_counter">
</b:if>
<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&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&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&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_pinterest_pinit"/>
<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 :-)
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
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...
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)))))))
Hi Seta,
You are welcome dear :) Now you know how to do that.
Enjoy Blogging...
Cheers...
Thank you very much for this information!
Hi Sally,
You are welcome :)
Cheers...
Thank you for this post it was very helpful.
You are welcome Bradly :) And your compliments...
Cheers...
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?
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...
hey have a question, where do i put it to be before "Read more" 'cause I can't figure it out.
You can place it just before this line in your template mate,
<div class='jump-link'>
Cheers...
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.
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...
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.
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...
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!
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...
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. :/
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...
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
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...
Worked like Magic.
Hi Sandipan,
Glad you made it on your blog mate :) Enjoy sharing...
Cheers...
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
Hi Mate,
What code snippet you added from above?
Cheers...
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
Hi Mate,
Remove class='ikonz-social' part from the div tag above your share button code.
Cheers...
it work @MayuraDeSilva:disqus thanks a lot for your help and it not showing a line how to add line at above
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...
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 :(
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...
I added right after the first data:post.body :(
Oops... Did you check it in an individual post Brenda? 'Cause it's not visible on homepage though.
Cheers...
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! :)
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...
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.
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...
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.
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...
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!
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...
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?
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...
I will check it out right niw :)
btw do u know how to center these buttons??
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 :)