You may do a lot of researches and explore extra resources, integrate your experiences and perform different activities to result an informative and interesting posts on your blog. Blogging can be your passion, but on the other hand your expectation is to share knowledge with the audience who really interested in your content as they can make use of yours. Have you ever thought about a convenient solution for your readers to share your posts or articles with interested parties?
By default, Blogger has standard share buttons which allows your readers to share your posts. But you may notice that it's limited to few popular networks. If you prefer to let your readers share on more networks, we have already discussed about adding more share buttons with AddThis and you can even have a Floating Vertical Share Bar too.
Those both blog posts were based on AddThis sharing solution, and it has eye catching share buttons and cool features for publishers. But now I'd like to introduce ShareThis, as another popular solution for sharing content on your blog.
ShareThis helps visitors share your content on popular networks such as Facebook, Twitter, Google+, Pinterest and so on. The functionality is similar to AddThis, but they have an identical style for their share buttons which you may fall in love with ShareThis in first place.
Except for stylish share buttons and opening doors for multiple networks, they provide real-time analytics for user shares happening on your blog. As ShareThis offer reports on sharing statistics, you can track down which topics matter to your audience too.
Those both blog posts were based on AddThis sharing solution, and it has eye catching share buttons and cool features for publishers. But now I'd like to introduce ShareThis, as another popular solution for sharing content on your blog.
ShareThis helps visitors share your content on popular networks such as Facebook, Twitter, Google+, Pinterest and so on. The functionality is similar to AddThis, but they have an identical style for their share buttons which you may fall in love with ShareThis in first place.
Except for stylish share buttons and opening doors for multiple networks, they provide real-time analytics for user shares happening on your blog. As ShareThis offer reports on sharing statistics, you can track down which topics matter to your audience too.
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.
* 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 :-)
39 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...
Mayura, where am I adding the publisher key for sharethis after blog posts? Thanks!
Mayura I did find it but not working, does it work with dynamic views? Thanks!
Hi Lisa,
It's hard to place the share buttons when it comes to Dynamic Views dear :)
You can try vertical sharing widget though ~ Add Floating Vertical Share Bar for Blogger Posts with ShareThis.
Hope it helps :)
Cheers...
Thanks my friend - I was wondering why I was having such a hard time with it. My other option is to keep their's but how do I had my own Twitter name?
When it comes to Vertical share bar, it had no way to add our Twitter handle earlier Lisa. But let me check now and get back to you if they have a workaround :)
No Lisa. Yet there's no workaround or vertical share bar.
If you like, I'd recommend Addthis Vertical Share Bar instead ~ Add Floating Vertical Share Bar for Blogger Posts with AddThis
Cheers...
It's working now, after you asked me to reset the widgets it just set into place :)
Awesome! Glad you got it working now Kaarunya :)
Cheers...
Can the linkedin share button or the sharethis buttons be added to a blogger dynamic view template?
Hi Brian,
Unlike the Layout templates, Dynamic Views doesn't support positioning share buttons wherever you like. Alternatively, you can implement floating vertical ShareThis buttons though ~ Add Floating Vertical Share Bar for Blogger Posts with ShareThis :)
Hope it helps :)
But it is not working for Pinterest,,,,
Post a Comment