Blogging Tutorials

How to Add Stylish Social Share Buttons Below Every Blog Posts

Social Media & Social Networking plays an important role in SEO and search engine ranking. So it’s a must to have social networks sharing buttons in all blog posts. In this post I will share stylish social share buttons script & it’s installation.Add Stylish Social Share Buttons

Advantages of these buttons:

  • Stylish Real network buttons
  • 13 Network Buttons
  • Share counts
  • Horizontal Arrangements

STEPS TO INSTALL THESE BUTTONS – POWERED BY SHARETHIS

STEP 1: Go to Dashboard > Layouts > Edit on Blog Posts & Disable “Show Share Buttons”.

Add Stylish Social Share Buttons

STEP 2: Now, go to Template > Edit HTML & find  </head>

 
STEP 3: Paste the following script Just above it.

<span id=”st_finder”></span><script type=”text/javascript” src=”http://w.sharethis.com/widget/stblogger2.js”></script><script type=”text/javascript”>var switchTo5x= true;stBlogger2.init(“http://w.sharethis.com/button/buttons.js”,{}, “23c235b2-e301-42b3-9d4c-43d8d68d1fa2”);var f = document.getElementById(“st_finder”);var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = “none”; } catch(err) {}}</script>

STEP 4: Now find <data:post.body/> in the HTML code.

STEP 5: Copy the Following Code and paste it below <data:post.body/> as shown below.

NOTE: Your Template may have multiple “<data:post.body/>” tags, If so find all and paste the code below every tag.

<span class=’st_facebook_hcount’ displayText=’Facebook’/>
<span class=’st_googleplus_hcount’ displayText=’Google +’/>
<span class=’st_twitter_hcount’ displayText=’Tweet’/>
<span class=’st_sharethis_hcount’ displayText=’ShareThis’/> <div>
<span class=’st_fblike_vcount’ displayText=’Facebook Like’/>
<span class=’st_plusone_vcount’ displayText=’Google +1’/>
<span class=’st_twitter_vcount’ displayText=’Tweet’/>
<span class=’st_linkedin_vcount’ displayText=’LinkedIn’/>
<span class=’st_stumbleupon_vcount’ displayText=’StumbleUpon’/>
<span class=’st_pinterest_vcount’ displayText=’Pinterest’/>
<span class=’st_email_vcount’ displayText=’Email’/>
<span class=’st_facebook_vcount’ displayText=’Facebook’/>
<span class=’st_fbsend_vcount’ displayText=’Facebook Send’/>

Add Stylish Social Share Buttons

STEP 4: Save Template! And you’re done!!

Thanks for reading! Happy Blogging 🙂

About the author

Sasidharan

Sasidharan is The Founder & CEO Of Techspotz, A Blogger Who is Growing Up Very Fast From Chennai, India. He Likes To Write On Any Topic Related To Blogging Such As Tech, SEO, Android, Hacking, Online Tutorials.

Leave a Comment