Blogging Tips: Adding Social Media Share Buttons to Every Post

This post may contain links to affiliate websites, such as Amazon and we receive an affiliate commission for any purchases made by you using these links.

Welcome Back to my Blogging Tips Series.

If you missed the first two weeks, you can find them here:


Today I will be showing you how to add social media share buttons to the top of every post, like the ones that I have. Take a look…do you like them? These little beauties make it super simple for anyone to share your content.  When I was first trying to set up my social media share buttons, I was adding them manually into each post one button at a time.  That lasted about 3 posts and I knew there had to be an easier way.  That’s the way it goes around here…I start by doing things the difficult way, get fed up, and then turn to Google. 
Here we go:

First, select “template”


In order to get the buttons to show up above each post, you have to edit your html.  Don’t worry, this is not as scary as it sounds. 

Click “Edit Html”. Before making any changes, be sure to back up your template!

Check “Expand widget template”

Using “Ctrl F”, search for this part of your html code:


The code below is the code for the buttons.  Copy and paste this code ABOVE the code that you just searched for ()
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
#pin-wrapper > a {background-image:none !important;}


Click "preview" and if all looks good, click "save"

After you get your social media share buttons all set up, make sure to head on over and reward yourself by entering my current giveaway. Up for grabs is a $175 Amazon or Target giftcard. 

And then go ahead and share the giveaway!

14 Comments

  1. Such a great tutorial! Thank you!! I have tried to put this on, but the “Pin it” button is not showing up. Everything else is great. Is there something else I need to do? I took it off just in case I made a mistake, so it doesn’t show right now.

  2. Hi Kelly, this is great information!! Thank you so much visiting today, your latest reader 🙂

    xo, Tanya

  3. Hi! I found you via the Ginger Snap Crafts linky party. I appreciate your tip and I’ve applied it to my blog! I pinned it too! I think others would benefit from this and I’d love for you to share it at my party the Rock N Share.

  4. Hi! Came from the Get Schooled Saturday. Thank you for sharing this tip. I am a new blogger and posts like this helps tremendously.

    Joanne @ Creative Mess
    jmacreativemess.blogspot.com

    1. Hi, could I ask how you did the code for the share buttons that you currently have? I’m struggling to work out how online!

  5. hello! i just tried to put the social button code in my template , i followed every step, i saved , but nothing appears! help! what is wrong?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.