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.
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:
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).
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.
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.
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!
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? 🙂
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 😉
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. 🙂
You Top Banner Has A Social Buttons. Will You Say Me About This Name? I Have Like It More.
I have written about the social media buttons in the header here, Mr. Extra Person.
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.
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.
nice tip i didnt know the more plugins you use the longer it took to load the page
i have to get rid of some
thanks for that
Yes, I would try to keep your plugins down to a minimum, leighbeater, thank you.
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! 🙂
Good to have bought a bit of sunshine into your life, Joanna! Hope this manual way of making the buttons does it for you!
Hi!
I’m using the facebook html5 code:
Where should this be placed in the code that you have provided?
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.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
Thanks, Mohammad, I have changed the formatting of the code snippets and they shouldn’t give you those annoying curly quotes anymore! 🙂
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
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.
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
Hello Cecilia, the Facebook Like button appears to work on that page that you gave me. Which method did you use to create it – HTML5 or FBML with an app you’ve created on Facebook? Facebook is definitely the most complicated one to deal with. You could try some of the other solutions here: http://www.websiteadministrator.com.au/articles/FaceBook-Like-Button-with-Strict-W3C-Validation.html
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
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. 🙂
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!
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.
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?
I can’t see any buttons on your site, Greg.
Sorry, I took the buttons down as I was struggling with the code. I have them up again on my other site. Any help would be greatly appreciated!
http://mbmsurf.com/locations/lowersmania-2012
Thank you.
Greg, looks like you’ve got it sorted out? They look perfect on that site!
tnx rob but i was searching simple html version…
This is the simplest way HTML-wise, Arafin. However, the simplest way would be with a WordPress plugin.
Perfect!! I used it in my web, and validates HTML 5! Great!
For example: http://www.cambiatufisico.com/rutinas-pecho/
I use a include(“social.php”) instead of paste the entire code. This way is easier to put everywhere.
Great! And good to know it validates in HTML5. Thanks, Carlos.
thnx sharing is great , thnx
thnx