April 7, 2012

How to Add Share Buttons for Your Blogger Posts with ShareThis




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.


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>

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>


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>


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='Emailexpr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis_hcount' displayText='ShareThisexpr: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='Emailexpr:st_img='data:post.thumbnailUrl' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_sharethis_vcount' displayText='ShareThisexpr: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 :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Unknown said...

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/

Mayura De Silva said...

I didn't get your question mate. But I see ShareThis buttons appearing on your blog, just above your comment form :)

Cheers...

Unknown said...

Look how they appear on home page, not on post page

Unknown said...

and maybe to position it in the middle, 'cause it look a bit in the left, by default i guess

Mayura De Silva said...

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...

Brenda said...

Can the @twitterusername be added to this twitter share like the AddThis one?

Mayura De Silva said...

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...

Brenda said...

Thank you! I might try this one as I was having an issue sharing to my facebook page via my mobile. :) 

Mayura De Silva said...

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...

Matthew Killorin said...

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 :)

Mayura De Silva said...

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...

Saurabh Kumar said...

thanks for your suggestion. I faced the similar problem, now it working fine.

osias said...

thank for this info. I will try this to my blog. http://travelhotspotsinthailand.blogspot.com/

ShareButtonSeeker said...

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.

Mayura De Silva said...

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...

ShareButtonSeeker said...

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;

Mayura De Silva said...

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...

ShareButtonSeeker said...

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?

Mayura De Silva said...

Hi Mate,


Just clicking on the button won't count though it appears so :) Did you try sharing it and refreshing the page?


Cheers...

Tasha W said...

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!

Mayura De Silva said...

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...

xocanadianangel said...

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!

Mayura De Silva said...

Alrighty Tasha :) Glad to hear you have made it.


Cheers...

Tasha W said...

:)

NERLINE GERMAIN said...

Thank you so much.

Mayura De Silva said...

You're welcome Nerline :) Glad to help you out here.

Cheers...

sam445 said...

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

Mayura De Silva said...

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...

Lisa Buben said...

Mayura, where am I adding the publisher key for sharethis after blog posts? Thanks!

Lisa Buben said...

Mayura I did find it but not working, does it work with dynamic views? Thanks!

Mayura De Silva said...

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...

Lisa Buben said...

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?

Mayura De Silva said...

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 :)

Mayura De Silva said...

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...

Kaarunya said...

It's working now, after you asked me to reset the widgets it just set into place :)

Mayura De Silva said...

Awesome! Glad you got it working now Kaarunya :)


Cheers...

Brian Strahle said...

Can the linkedin share button or the sharethis buttons be added to a blogger dynamic view template?

Mayura De Silva said...

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 :)

PowerElectrical said...

But it is not working for Pinterest,,,,