You may do lot of researches, explore and go through articles, integrate your experiences and do all kind of everything to result an informative and worthy articles on your blog for your readers. Yeah, sometimes it may not your own creation but you may share interesting images, videos or such media with relevant credits to original creators too. Absolutely it is your passion and on the other hand your expectation of blogging is sharing knowledge with your readers and interested parties in same niche. Such stories are worth reading and even more worthy spreading among interested users. So did you ever think about a convenient solution for your readers to share your posts or articles with their friends and followers?
Blogger has standard share buttons which helps your readers in sharing your articles. But it's limited to few popular networks. Beyond standard sharing buttons, we have already discussed about adding popular share buttons with AddThis and Floating Vertical Share Bar for Blogger posts. Those two blog posts were based on AddThis sharing solution and it has got eye catching share buttons and cool features for publishers. But here we going to introduce ShareThis, as another popular solution for sharing content on your blog. ShareThis helps users sharing your content to popular networks such as Facebook, Twitter, Google+, Pinterest. Further they have identical style for their share buttons which could impress you. Altogether with share buttons and styles, they provide real-time analytics for shares happen on your blog and you can track down which content matters to your readers.
Before You Go:
You need to have a ShareThis account to continue with below process. If you don't have an account already, register for a new account.
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 ShareThis script right before the </head> tag.
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"/>
<script type="text/javascript">stLight.options({publisher:'[Your Publisher Key]', shorten:false});</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"/>
<script type="text/javascript">stLight.options({publisher:'[Your Publisher Key]', shorten:false});</script>
Color Indication Information
- Share Widget Style
Here you can enable Multi-Post (Oauth) style or Direct Post (Classic) style. Specify true to enable Multi-Post style and false to enable Direct Post style.
Multi Post Style - Let people share your content to multiple networks at once without leaving your blog.
Direct Post Style - People will redirected to particular site when clicking on button. For example, if an user clicks on Facebook button, he will be redirected to Facebook to complete sharing.
- Your Publisher Key
Add your ShareThis publisher key here. If you don't know your publisher key, you can find it at My Account page.
- Shorten URL
Here you can enable or disable shortening your links with ShareThis when sharing. If you wanna enable shortening, change the value as true here.
7. Now search for <data:post.body/> in your template and add your preferred button code snippet right after <data:post.body/>.
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/>. Add this code right after the first resulted line of code.
Small Style
<b:if cond='data:blog.pageType == "item"'>
<span class='st_facebook' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>
<span class='st_facebook' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>
Large Style
<b:if cond='data:blog.pageType == "item"'>
<span class='st_facebook_large' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter_large' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin_large' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest_large' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email_large' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis_large' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>
<span class='st_facebook_large' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter_large' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin_large' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest_large' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email_large' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis_large' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>
Horizontal Count Style
<b:if cond='data:blog.pageType == "item"'>
<span class='st_plusone_hcount' displayText='Google +1' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_fblike_hcount' displayText='Facebook Like' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_facebook_hcount' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter_hcount' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin_hcount' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest_hcount' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email_hcount' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis_hcount' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>
<span class='st_plusone_hcount' displayText='Google +1' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_fblike_hcount' displayText='Facebook Like' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_facebook_hcount' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter_hcount' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin_hcount' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest_hcount' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email_hcount' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis_hcount' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>
Vertical Count Style
<b:if cond='data:blog.pageType == "item"'>
<span class='st_plusone_vcount' displayText='Google +1' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_fblike_vcount' displayText='Facebook Like' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_facebook_vcount' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter_vcount' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin_vcount' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest_vcount' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email_vcount' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis_vcount' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>
<span class='st_plusone_vcount' displayText='Google +1' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_fblike_vcount' displayText='Facebook Like' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_facebook_vcount' displayText='Facebook' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_twitter_vcount' st_via='[Your Twitter Username]' displayText='Tweet' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin_vcount' displayText='LinkedIn' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_pinterest_vcount' displayText='Pinterest' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_email_vcount' displayText='Email' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis_vcount' displayText='ShareThis' expr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
</b:if>
Color Indication Information
- Your Twitter Username
Enter your Twitter username here if you wanna mention your Twitter username when sharing. Else leave it blank.
- Custom Button Label
Here you can specify a custom button label or text to be reflected on respective buttons.
- Google +1 Button
Remove this line if you wanna remove Google +1 button from your share buttons.
- Facebook Like Button
Remove this line if you wanna remove Facebook Like button from your share buttons.
8. Now save your template.
More Information:
* You can find the all statistics for shares happened on your blog via ShareThis Metrics Dashboard.
* If you wish to customize your buttons and its functionality further, you can refer ShareThis Customization Overview.
Enjoy :-)
29 comments:
Hey there,
I same issues (again) I added it through their website but because of my image instead of Read More text doesn't fit properly. I can't find the code in html section either. What to do ?
http://genutsu.blogspot.com/
I didn't get your question mate. But I see ShareThis buttons appearing on your blog, just above your comment form :)
Cheers...
Look how they appear on home page, not on post page
and maybe to position it in the middle, 'cause it look a bit in the left, by default i guess
You have added it as an element on Layout page. That's how ShareThis website let you add share buttons for Blogger. Try positioning ShareThis element, or remove element and add the Share button code manually.
Cheers...
Can the @twitterusername be added to this twitter share like the AddThis one?
Hi Brenda,
Thanks for popping up with this question :) Yes you can. I just updated this post with that capability. Just add your preferable code snippet to your blog dear.
Cheers...
Thank you! I might try this one as I was having an issue sharing to my facebook page via my mobile. :)
Oh mobile? I have to agree with you dear :) As most sharing buttons are dynamic, they are having issues when rendering on mobile. You have to try a separate share button for Facebook as ShareThis got.
Hope it helps dear :) Thanks for commenting...
Cheers...
Thanks for this info! This improved my blog greatly. I had one little problem - I have a custom theme and the buttons would not appear when I placed the span tags under - so I put it above and it worked. I'm leaving this address so your readers will see that your instructions work perfectly http://www.capesonfilm.com/2012/10/info-on-X-Men-Days-of-Future-Past.html
Cheers :)
Hi Matthew,
Glad it helped you and as you have a custom template, that can happen mate :) Really thanks for taking your time to let know about it and I'm sure if anyone struggling with such issue would find your comment helpful :)
Thanks for stopping by and sharing your experience mate :)
Cheers...
thanks for your suggestion. I faced the similar problem, now it working fine.
thank for this info. I will try this to my blog. http://travelhotspotsinthailand.blogspot.com/
I appreciate your HARD WORK from my heart, and I mean that. Eariler, I can add buttons from Sharethis site but they share only Homepage. Almost disappointed, but after i do as you teach slowly, share buttons do their good work. If you don't write step by step and very detailed, I guess I would change buttons. thank you very much.
p.s. sorry for my poor eng language.
Hi Mate,
Really glad to hear that you were able to add share buttons on your blog mate :) Ha... Now you can share your post URL instead of homepage URL. I hope you are enjoy sharing now :)
Thanks for coming by and sharing your experience on adding share buttons :) Really appreciate your genuine compliments and it motivates me to keep on doin' it mate.
Cheers...
After i used ShareThis Buttons, I got the same problem as other users in Blogger. the problem is ShareThis changed all link address in blog (such as homepage link, post links)
why did i know ShareThis is the one who cause this? Because after I deleted code
var switchTo5x=true;
Hi Mate,
Other users? I haven't got such queries here though :)
The code snippet you pointed is what need to function ShareThis buttons mate. Removing it will stop ShareThis from working on your blog.
What do you mean by changes URL? You mean shorten URL, like http://shar.es/gerVs? :)
Anyway I've added that option to coding and updated this post :) You can try it out if you are referring to the shorten links.
Cheers...
i have some problem. when I click share buttons in my post, it should +1 in count number bubble but when I refresh the same page, it still "0" ?
what is it?
Hi Mate,
Just clicking on the button won't count though it appears so :) Did you try sharing it and refreshing the page?
Cheers...
Hi there, thanks for the informative post! I am wondering if you could tell me how to remove my default blog title from the tweet in sharethis? I just want users to tweet the post title, url and @mytwittername not my blog title at the beginning. How do I remove that? I have searched everywhere. Thanks!
Hi Tasha,
In that case you have to change the title structure of your blog :) ShareThis use the title appears on your pages. You can refer to this post on changing your page titles ~ How to Customize the Page Title in Blogger.
Cheers...
Thanks for your help. I was having a hard time with the directions you posted in that post. I did find another easier solution here. http://www.yanniel.info/2010/09/blogger-remove-blog-post-title.html Thanks though!
Alrighty Tasha :) Glad to hear you have made it.
Cheers...
:)
Thank you so much.
You're welcome Nerline :) Glad to help you out here.
Cheers...
hii Mayura De Silva
i have one problem button are not coming in good way.. here is code screenshot that i added :plz help me on this plz. here is my blog link :http://hackintoshs.blogspot.in/2013/02/automate-everything-in-your-home-using.html#.UYjfAbVmiSp
Hi Sam,
Strange indeed! I haven't found anything wrong with your code either.
Try adding ShareThis button codes via HTML/JavaScript gadget on your sidebar and see if they render properly.
Cheers...
thanks