Social media is all the rage for the past few years. And of course, if you’ve been online any time in the past 5 years or so, and definitely if you have a blog - you probably already know that. Bloggers use social media to drive traffic, so we want to push-push-push it in our readers face.
There are several different ways to deal with this issue, most of which cause silly gaps between the buttons or require various types of floating vertical areas which contain the social media buttons. I didn’t want to be quite so “in your face”, so I worked on it a little bit and I think I came up with a nice layout which requires a minimum amount of size mismatch, a horizontal layout and no gaps whatsoever. You can take a look at the bottom of this post for an idea of how it’s going to look when you’re done. If you don’t like it, I suggest you stop reading now…
Note and warning: Before you do this, please back up your template. If you don’t know what that means, don’t even try. Wherever there is a yellow highlight, you should replace the values with your own (according to what is needed in that location).
[This tutorial covers the code necessary for setting the image for the Pinterest button dynamically, so no need to do both.]
Step 1 - Choose your button design:
[If you only want the social media buttons with the count, you can skip this step]
There are lots of free social media icons sets out there, so you should have no trouble finding one that suits your design. However, to support this layout, the icons must be 20 pixels high. Unfortunately, most sets don’t come with that height. Choose the closest size which is larger than 20 pixels high (usually 24). In any case, let me Google that for you. After you have chosen the media buttons set you want to use, save the buttons in a public online location such as Picasa (if you’re using Blogger, you already have a Picasa account).
Step 2 - Setup facebook requirements:
In order to work with the facebook like button, you must setup a facebook application. For details on how to do this, go to facebook developers and set up the most basic dummy application (only required fields). When you are done, you will have an appId which you should use below for the fb:app_id property.
In addition, you will need to know your own facebook id, go to the like button page on facebook developers, scroll down to “Step 2 - Get Open Graph Tags”. If you are logged in to facebook, you will see your user id in the “Admin” text box. This is the id you should use below for the fb:admins property.
Step 3 - Edit template:
Go to Template --> Edit HTML in your blog’s admin section. Make sure that the “Expand Widget Templates” checkbox is checked.
Step 4 - Setup code:
After the opening <head> tag, paste the following code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content=’url-to-a-default-image’ property='og:image'/>
<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content=’your-facebook-id’ property='fb:admins'/>
<meta content=’your-facebook-appid’ property='fb:app_id'/>
</b:if>
[This includes jQuery on the page, which is a javascript library we will use later, and the required facebook open graph tags]
After the opening <body> tag, paste the following code:
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=your-facebook-appid";
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);
})();
//]]>
</script>
[This sets up the scripts necessary for the facebook and Google+ buttons]
Before the closing </body> tag, paste the following code:
<script type='text/javascript'>
(function() {
// select all pin it buttons on the page
$('.pin-it-button').each(function()
{
// get all the images in this post
var postId = $(this).attr('post-id');
var images = $('#post-body-'+postId+' img');
var image;
// if there are no images, use a default image
if (images.length == 0)
{
image = 'replace-with-default-image-url'
}
else // use the first image found
{
image = images[0].src;
// blogger images can sometimes have url parameters, we want to strip those
if (image.indexOf('?') > -1)
{
image = image.split("?")[0];
}
}
var imageParam = '&media='+image;
var href = $(this).attr('href');
$(this).attr('href', href+imageParam);
});
// starting here - it’s the standard Pinterest script
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>
[This sets up the necessary scripts for the Pin It button and the dynamic image]
Step 5 - Place the buttons on the page:
After the opening <head> tag, paste the following code:
<b:if cond='data:post.url'>
<div style='width: 1000px; height: 65px; margin-top: 10px;'>
You can add any or all of the following buttons.
For facebook Like button:
<div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false' data-width='45' expr:data-href='data:post.url' style='border:none; overflow:hidden; width: 45px; height: 62px'/>
For Twitter share button (with count):
<a class='twitter-share-button' data-count='vertical' data-lang='en' expr:href='"https://twitter.com/share?url="+data:post.url'>Tweet</a>
<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>
For Google+ button:
<g:plusone expr:href='data:post.canonicalUrl' size='tall'/>
For Pin It button
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url+ "&description="+data:post.title' expr:post-id='data:post.id'/>
For Email button:
<a expr:href='"mailto:?subject="+data:post.url' title=’Email This’ style='margin-right: 1px;' target='_blank'>
<img height='20' src='url-of-your-email-icon’ width='20'/>
</a>
For facebook share button:
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' title='Share To Facebook' style='margin-right: 1px;' target='_blank'>
<img height='20' src='url-of-your-facebook-share-icon' width='20'/>
</a>
For Twitter share button (without count):
<a expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url + "&text=" + data:post.title' title=’Share to Twitter' style='margin-right: 1px;' target='_blank'>
<img height='20' src='url-of-your-twitter-share-icon’ width='20'/>
</a>
For stumble upon button:
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' style='margin-right: 1px;' target='_blank'><img alt='Stumble' height='20' src='url-of-your-stumble-upon-icon’ width='20'/></a>
For delicious button:
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' style='margin-right: 1px;' target='_blank'><img alt='Delicious' height='20' src='url-of-your-delicious-icon' width='20'/></a>
For digg button:
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' style='margin-right: 1px;' target='_blank'><img alt='Digg it' height='20' src='url-of-your-digg-icon' width='20'/></a>
And finally paste the closing tags:
</div>
</b:if>
Step 6 - Save
Save the changes made to the template, and you’re done!
I hope I didn’t miss anything… Please let me know if it works for you, but even more if it doesn’t work (I might have made a mistake here, it happens).
Enjoy (and share)!
