Adding Social Media Share Buttons in WordPress – HTML and CSS

We all want our web pages to be seen by as many people as possible. And while writing top quality content remains a great way to do this, enabling your visitors to share content through social media has become an excellent way to drive traffic.

four holding hands with social media

Just so that we’re all on the same page, there are two types of social media button:

  • The first are the social media buttons that direct visitors to your profile pages at the various social media sites. These can be seen on the right of my header and in my sidebar directing you to my YouTube account, my Twitter stream, etc.
  • The second type of social media buttons – the ones we are talking about here – are sharing buttons. These exist on website pages and, when clicked, will record the fact you “Liked”, “Tweeted”, “Plus-1’ed”, “Stumbled” or shared the page.

The ubiquity and power of these buttons seems to be growing almost daily. More and more people are coming to this website, and others like it, as a result of recommendations from a friend or from someone with a shared interest. And, as a result, this traffic is likely to be more engaged with the content.

Why do this with HTML and CSS and not with a plugin? This way you get to use one less plugin and therefore your pages will load quicker and you’ll have more control over the buttons as well.

The HTML

Here is the HTML that will give you the following:

  • Facebook Like button (Facebook share buttons are to be discontinued soon)
  • Google Plus One button
  • Tweet button
  • LinkedIn share button
  • StumbleUpon button

These will be displayed horizontally with a counter on each, like so:

social media buttons

They can be added, ideally, at the beginning or end of the post. So, in the single.php of your theme, paste the following:

<div class="social-links">

<div class="fb">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
document.write('<fb:like layout="button_count" show_faces="false" width="100"></fb:like>')
</script></div>

<div class="googplus">
<g:plusone size="medium"></g:plusone></div>

<div class="tweet">
<a href="http://twitter.com/share" data-url="<?php the_permalink(); ?>" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

<div class="linkedinshare">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="right"></script></div>

<div class="stumble">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=2"></script></div>

</div>

If you can’t do this as you have a child theme to a theme framework (like Genesis) you’ll have to put the above in the functions.php. This is what I added in my functions.php to add the buttons before single posts using the genesis_before_post_content Genesis hook and the is_single() WordPress conditional tag.

/*Social Media Buttons Before Post*/

add_action( 'genesis_before_post_content', 'child_social_media_icons', 5 );

function child_social_media_icons() {
if ( is_single() ) { ?>

<div class="social-links"> ... (add the rest of the button HTML here) </div>

<?php } }

The CSS

Now that you have your buttons inserted where you want them, you will need to style them up to look the way you want. Add this to your theme’s style.css:

.social-links { margin:20px 0px 10px 0px; height:35px; }
.fb { float: left; margin-right : 10px; }
.googplus { float: left; }
.tweet { float: left; }
.linkedinshare { float: left; margin-right : 20px; }
.stumble { float: left; margin-top: 2px; }

As you can see the CSS makes sure that the buttons all line up horizontally with adequate space between them. All these buttons come from different sources and behave in slightly different ways – notice that the StumbleUpon button a 2 pixel margin on the top, otherwise it’s a bit higher than the others.

The code in the <head>

And you’ll have to paste the following in the <head> of your pages to make sure the Google Plus One button works, so add this to your theme’s header.php just before </head>:

<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>

That’s it! It’s just a question of pasting in the above and the HTML and CSS.

But if you want to go into more detail (and I suggest you do) I will go through the buttons one by one.

Facebook Like button

Let’s start with the most difficult one. Go to the official Facebook developers Like button page and you can choose how you would like the button to appear (maybe you’d like to see the faces of the people that Liked the page).

facebook-like-button-code-generator

Once you are happy with the way it looks you can click Get Code and you’ll find ways you can paste this to your webpages. Unfortunately, Facebook makes this a bit difficult for you, insisting that you enter a Facebook App number. If you’ve made any App for Facebook then you can use the number from this App. Otherwise you could quickly make an App or I have heard it may work without an App number. Here’s the code:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=99999999999999 &xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="140" show_faces="true" font="arial"><script type="text/javascript">_ga.trackFacebook();</script></fb:like>

99999999999999 is the App number. Alternatively, you can use the JavaScript Like button version I used in the main example.

Google Plus One button

Google Plus may be a ghost town or the next best thing according to what you’ve been reading recently. Go to this page to choose the Google Plus button you want.

google-plus-button-generator

Twitter Tweet button

You can’t knock Twitter! They are the most simple social media platform, provide the most targeted traffic and their button technology is the best (according to me!) Go here to generate your Twitter buttons.

twitter-tweet-button-generator

What’s great about the Twitter button is that you can place a hashtag in the tweet, make sure your Twitter account (for example, @RobCubbon) is included in the tweet and, once tweeted, you can have your account recommended. Awesome!

LinkedIn Share button

Can’t argue with the LinkedIn Share button generator, simple and easy to use!

linkedin-share-button-generator

With a LinkedIn Share button, your visitors can share with all their LinkedIn contacts and all their groups from your blog post, potentially reaching tens of thousands of targeted professionals with a click.

StumbleUpon Stumble button

The StumbleUpon button which can send you a lot of traffic – just not fantastically engaged traffic. This is where you create your StumbleUpon badge.

Pinterest Pin It button

Despite being the social network that does everything right at the moment, Pinterest doesn’t have good information on how to the code to add a Pin It button. However, this site does.

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo get_the_title(); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

The above works a treat! Thank you, Techably!

And finally!

As a blogger, it can be a bit frustrating to constantly have to insert snippets of code and buttons on our blogs to satisfy the latest social fad. But, there’s no doubting that these buttons make it easier for our content to be shared and provide social proof of its quality.

Adding the code for these buttons enables us to track Tweets, Facebook Likes and more with Google Analytics.

Big thanks to Andrew Keir for providing me with his code originally.

And, lastly, here are the buttons under the post… Why don’t you click one? :)

Did you enjoy the article? If so, please share!

Download my 2 free e-books and 2 free MP3s on running an online business & getting clients

Plus a list of my 12 favorite resources for online business

two free books and two free mp3s and a list of favorite online tools

Comments

  1. says

    It was a difficult job for me. But you made my work very easy my sharing this tutorial :) I will surely try this!

    BTW, I just subscribed to your blog ;)

    • says

      Hello Ammar, it’s great to see you here. Welcome to my blog! I really hope you find this useful as I have found many of your articles useful. And I’m using your tool for posting to multiple Facebook walls. :)

  2. says

    Rob, I understand that it’s straight forward to add the code for all these links. However I’ve gone for a plugin approach is that the different providers may change to choose their API in the future and I don’t want to have to keep up with all of the different changes.

    • says

      Yes, Andy, I’ll admit that using a plugin is a more simple option. But if, like me, you already have loads of plugins you’ll be looking to reduce the number so the pages load quicker.

      Yes, these sites change their API and ways of doing things from time to time. But once you get into the habit of visiting their developer pages, it’s really not that difficult. They try to make it as easy as possible. And it really takes only a couple of minutes.

      Thanks for your comment.

  3. says

    thank you thank you thank you…. you have just cleared up so much confusion for me!
    I have resorted to plugins but then had a bad experience as one of them created lots of html errors and I almost had to rebuild one site from scratch.
    It is Friday afternoon here and it is raining very hard – you have just made the sun shine a little for me! :)

  4. says

    Hi!

    I’m using the facebook html5 code:

    Where should this be placed in the code that you have provided?

    document.write(‘’)

    • says

      If you want to use the HTML5 from Facebook you have to put the first script part ideally after the opening <body> tag and the next bit in the main HTML bit where you want the button to go. I hope this helps, chetan.

  5. Mohammad says

    Thanks for the great tutorial, it was exactly what i am looking for.

    I just have small comment that copying the code from this page make trouble with opening and closing quotes ”
    so i replace them with ”

    Many thanks

  6. Andy says

    Hi Rob,

    Thanks so much for this, I’ve always been able to add the code for social media sharing buttons but since being converted to WordPress I struggle getting them to align!

    Would you happen to know how I can do the above but rather than align horizontally, do it vertically? I’m putting mine into a widget within a footer….

    Thanks in advance.

    Andy

    • says

      Hi Andy, that’s just a case of fiddling with the CSS. All the div classes (.fb, .googplus, .tweet, etc.) instead of float:left; need to be clear: both; and then you’ll have to play around with the margins. I hope this helps.

  7. Cecilia Hermansson says

    Hi,
    Thanks so much for this, it was exactly what I needed! However, I have a problem. Everything looks perfect in Safari and Firefox, but in Chrome, the facebook icon won’t show. Do you have any idea why this happens? I don’t, and I’m not sure what to google to solve it. Would really appreciate any hints given.

    Here’s the site that I’m working on (in Swedish (: )
    http://jamstalldhetsexperten.se/uppfinn-inte-hjulet-igen

    Thanks in advance
    Cecilia

  8. Cecilia Hermansson says

    Apparently it’s only me who can’t see the Facebook like button. Weird! But as long as others can see it it’s fine. And thank you very much for taking the time to look at it! Cheers.

    Cecilia

    • says

      I hope it’s OK. In my experience even though the site appears wrong on one browser it should still be looked into as these things, if left alone, have a habit of coming back to haunt you! Anyway, if you need any more help you could always come back here. :)

  9. says

    Hi – this is a great tutorial! I’ve been trying to neatly add these buttons for hours. I’ve been going back and forth between the plug-ins etc. etc.

    Could you go into detail about adding the pinterest button? This is the one that is giving me the most trouble when I follow instructions off the pinterest site. I am trying to add this to my tumblr code.

    Thanks!

    • says

      Ah, Pinterest! I must admit I left that one til last as I hadn’t done it myself. I’ve just realised that the Pinterest site gives you hardly any information at all about how to do this. But I found this useful post here: http://techably.com/add-pinterest-button-to-website/5310/ – he gives a WordPress version of the code which I’ve just tested and works like a dream. There’s code for Tumblr there as well. I suggest you try that. :) Sorry to not be of more help, Katie.

  10. says

    I applide the code to my WordPress site and the buttons stock out vertically. I am sure I installed everything right. Is there anything I am missing?