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, Wordpress, VPS, Android, Hacking, Online Tutorials And Computer

Leave a Comment