Blogging Tips: Adding Social Media Share Buttons to Every Post

Welcome Back to my Blogging Tips Series.

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

             Are you a "No-Reply" Commenter?

        Customize your Favicon

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:

<data:post.body/>

The code below is the code for the buttons.  Copy and paste this code ABOVE the code that you just searched for (<data:post.body/>)

<!-- Scripts Start -->

<b:if cond='data:post.isFirstPost'>

<!-- Facebook -->

<div id='fb-root'/>

<script>(function(d, s, id) {

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'));

</script>

<!-- Google +1 -->

<script type='text/javascript'>

(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);

})();

</script>

<!-- Twitter -->

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</b:if>

<!-- Scripts End -->

<!-- Horizontal social buttons Start -->

<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>

<!-- Twitter -->

<div style='float:left;'>

<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>

</div>

<!-- Google +1 -->

<div style='float:left;'>

<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>

</div>

<!-- Facebook Like+Send -->

<div style='float:left;'>

<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>

</div>

<!-- Pinterest Start -->

<b:if cond='data:blog.pageType == "item"'>

<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>

<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>

<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>

</div>

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

<style type='text/css'>

#pin-wrapper > a {background-image:none !important;}

</style>

</b:if>

<!-- Pinterest End -->

</div>

<div style='clear: both;'/>

<!-- Horizontal social buttons End -->

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!