Breaking News

Wednesday, May 8, 2013

How To Add Share Buttons For Your Blogger Posts With ShareThis 2013


How To Add Share Buttons For Your Blogger Posts With ShareThis

Before writing a blog you conduct intensive research to provide meaningful article to your potential readers. But sometime there are some articles which are not yours but you would like to share information available on it by referring the name of original author. This is because of your interest on particular subject and sharing its full knowledge with your potential readers and with others.  This may be considered as the best way of exploring your blog with huge segment of readers.But have you ever thought to find some solution which enables your readers to explore your posts and articles with persons associated in their circle?

If you are working on Blogger platform than I am sure you must be aware that Blogger has initiated a new feature of integrating share button in your blog which facilitate readers of your blog with their friends. However this feature can be used only few specific social networking websites. This feature enables your readers to share your blog on Facebook, Twitter, Google+, Pinterest. Moreover as all of them have same type of sharing button style they grab attention of every reader. Apart from facilitating readers to share your blog these buttons also facilitate you to make an analysis regarding the choice of readers. 

Before you start process of integrating share button option in your blog I would suggest you to get yourself registered with an account, which enables you to integrate share button option in your blog. So now let us start our process of How to add share buttons for your blogger posts with share this, option.

Step 1 : Move on to Blogger Dashboard;

Step 2 : Now click on the title of your blog;


Step 3 : Move on template options;



Note:  Here as I have discussed in my other blogs also, I would recommend you to take back up of your template for future reference. But if you do not know the process of taking back up of template than you should read How to back up your template. 

Step 4 : Now click on HTML option place below your blog preview;

Step 5 : Click on proceed option to continue;

Step 6 : Click on expand widget templates;

Step 7 : Search for </head> in template;

Step 8 : Add share this script before </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]'});</script>

In the above code snippet:


  • Variant “true” enables you to determine the networks on which your readers may share your blog. There are two types of networks. Multi Post style, enables you to share your content on different available network. To activate this write “true”. The other style is Other post style, which enables you to let your readers move particular network by clicking on that. To enable this feature you need to mention “false” variant.

  • Your Publisher Key variant: This variant provides you the facility of inserting Share this option here. But in case if you do not know publisher key you can get it from Share This My account 
Step 9 : Now look for <data:post.body/> in your template and integrate your desired code snippets after it;

Notes:

Adding this code snipped below <data:post.body/> will display your button at the bottom of your post. However you are free to display it according to your requirement at any position on your blog.
You can also merge two search results for <data:post.body/>. You have to put this code just after the 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='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>

In the above code,, you will find different variants. These are explained as below:Twitter name: It enables you to insert your Twitter username if you want to let readers share your blog on Twitter;

Custom button label: This enables you to determine custom button label;

Google+ 1 button: you may eliminate this option if you do not want to get your blog shard on Google +1;

Facebook line button: You may remove this button if you do not want to share your blog on Facebook. 

Step 10 : Now save all these changes. 












No comments :

Post a Comment

Designed By Published.. Blogger Templates