Putting a Facebook "like", "send" or "share" button on your blog

There is an official Facebook button that your readers can use to share your blog, your current post, or any website, on their own Facebook account. This article describes how to get the code from Facebook and install it into Blogger - but most of the information applies to other blogging tools (Wordpress, TypePad, etc) and many other web-site tools also.

Previously I've described the different ways that you can link your blog and the social-networking sites.

Facebook badges can be used to send your blog's readers to your personal Facebook profile, or to your page. These are an example of the "follow me" approach.

But often blog authors want to give their readers a tool to share the blog that they are reading on their own (ie the readers own) Facebook account - that is to use the "Look what s/he said" approach.

Your readers could just copy-and-paste a hyperlink to your page into their own Facebook account, but it's clunky, and means that they have to start up Facebook themselves.

Various people have written 3rd-party widgets to put a Facebook icon on your blog, set up so that when a reader clicks it the current page it is automatically shared on the reader's Facebook account. Some even count how many times the button has been clicked.

But I don't like, or trust, 3rd party gadgets:

There's no guarantee that they don't have nasty side effects on your blog.
Some of them ask you to type your Facebook id and password onto a page owned by a 3rd party. They promise that the won't do nasty things with the data - and some of them mean it. But you just don't know who to trust.
If Facebook change how they do things, there's no guarantee that 3rd party tools will also be changed: you could easily be left with a button that doesn't work any more.

I'm not saying that all the 3rd party gadgets are bad: I've used some on my sites with no ill-effects. But I've never been happy about it. And the day that I used the AddThis button on a newspaper website to share an article to my personal travel-blog, I had a mini panic-attack 1/2 an hour later when I realised that I'd just given my email and AdSense password to a third-party.

One approach - Blogger's social-sharing buttons:

Google have introduced social-media buttons whichcan be shown at the bottom of each post. They only work on blogs with Designer Templates (ref Types of Blogger Templates)

They're an improvement on the 3rd party gadgets, but I still don't like the way they look, and the lack of options to customize them, so I usually have them turned off.

A better approach - Facebook's official gadgets:

The Share Button:

The first "look what s/he said" option that Facebook offered was the Share button, officially called the the Post To Profile gadget.

This let you customise a few features, and also had a preview function

You can still see this gadget on many web-pages. But you cannot get the code for this from Facebook any more: they now recommend using the social plugins (more about them below) instead.

The Share button still works though, and can be added to your site using this code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='float:left;padding:3px 3px 3px 3px;'>
<a expr:share_url='data:post.url'

href='http://www.facebook.com/sharer.php'

name='fb_share'

type='box_count'>

Share

</a>

<script

src='http://static.ak.fbcdn.net/connect.php/js/FB.Share'

type='text/javascript'>

</script>
</div>

</b:if>

(I've spaced the code out a bit so it can be understoond more easily - the extra line-breaks can be removed when you use it.)

You can configure the code by changing the value of type: other options are

button_count (shows a counter beside a smaller button)
button (shows a smaller button, still with the word "share"
icon (shows the small "f" only)

See Sharing from your blog to the Social Networking Sites for more information about where to put the code, including general and post-specific options.

Notice that because the code above includes expr:share_url='data:post.url' you need to put it in a post-specific place in your blog. Another option would be to replace data:post.url with the URL for your blog, and put the code into a gadget etc.

Be aware that sometime in the future, the Share button may stop working, because Facebook stop supporting it. I don't expect that to happen soon though, because it's now installed on so many web-sites worldwide.

The Like and Send buttons:

Facebook's official gadgets for saying "look what s/he said" are now the Like and Send buttons.

Officially, you can get the code for them on the Developers > Social Plugins > Core concepts page: don't be put off because the page is labelled "develoeprs" - it really is quite simple to install the buttons into your blog.

However the last few times I tried to get the code from Facebook, it's refused to give it to me, saying:

"The href entered is not recognized as a valid URL.".

So this is the code I got from them before, modified to be used in a post-specific place - see below - and to not use the width that was suggested:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like action='like' colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='false' show_faces='false'/>

This picture shows the options that were available when I got that code:

It's fairly easy to look at these options, and work out changes you might like to make, eg

like action='recommend' colorscheme='dark' font=''Arial layout='box_count' send='true' show_faces='true'

When you have chosen the options you want:

Click the Get Code button at the bottom of the page,
Copy the code that is provided, and
Install it into your blog (see below for more info about this).

Sharing a Post vs Sharing the whole blog:

If you put a a Like, Send or Share button into your own blog as a gadget, then what is shared is your whole blog, not the particular Post that is being read, for example

http://blogger-hints-and-tips.blogspot.com (this blog)

instead of

http://blogger-hints-and-tips.blogspot.com/2010/04/tools-for-linking-blogger-and-social.html (a post)

If this is what you want your readers to do, then just put your blog's URL into the "URL to Like" field (or the expr-statement if you're using the Share button code), and add the code as a gadget.

But if you want your readers to share individual posts, then you need the Facebook-button to appear with every post, in either the post-header or post footer This is a little harder than adding it as a gadget. To get the code to use for the Like/Send buttons

Put some dummy text into the URL to share field
Get the code
Replace the dummy text with instructions to use the URL of the current post, ie change it from

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=173511999379139&xfbml=1"></script><fb:like href="DUMMY-TEXT" send="false" width="450" show_faces="true" font=""></fb:like>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=173511999379139&xfbml=1"></script><fb:like
expr:share_url='data:post.url' send="false" width="450" show_faces="true" font=""></fb:like>

The way to add the code to your blog is described fully in Putting Share this on XXX buttons into your blog (it's done the same way, no matter what social network's share button you are adding).

Enhance the sharing using Open Graph tags

Facebook was one of the first sites to use Open Graph (OG) markup, which is a way to label parts of your blog so that social websites know what to use in each of their features.

Unfortunately Blogger templates don't automatically contain Open Graph code. But you can add it yourself. This isn't essential - people can still share your posts without the tags being present - but it does generally make shared of your pages look better.

What your readers see

When a reader clicks your Facebook button, they'll be asked to log in to Facebook (unless they're already logged in).

Once they're logged in, then:

If they used the Like button:

The "like" is recorded on their wall, and they are shown a small message in your site, giving then the opportunity to un-do the like, or to add a comment which is also shown on their wall along with the like.

If they used the Send button:

They are shown a small pop-up window where they can type in names (from their existing Facebook friends) or email addresses. A message about the item is send to the selected people using either Facebook Messages or regular email for people who aren't on Facebook.

If they used the Share button:

They see a window where they can enter a message, and see the link and description that they're going to be sharing.

The link is either the page that they were viewing when they clicked the button, or another URL (if you chose the Custom URL option when you were setting up the gadget). The description is an advertisement for Blogger. However both of these these can be changed if your reader clicks on them.