In the previous post we saw how to enable a Facebook like button for all the Blogger posts. Today, we shall learn how to implement a Facebook send button below Blogger post title.

Remember that what was implemented in the previous like button tutorial was using an <iframe> tag. But send button has been upgraded to be XFBML version.

Here is a picture of how it works:

It just needs a click to start functioning. Click on the send button, type in the name of the friend, group or mail address you want to send and type in the message and click on send. Done!!!

Here is the official link to create a send button for your site/Blogspot.

Here is an example for my setting:

Do not enter any URL if you are going to implement it under the post. If you want it for your blog or particular link, then enter the URL and click “Get Code“.

In the next pop up you see HTML5, Let’s try it out with XFBML, which is more powerful and works wonderfully.

1. A script2. An XML tag3. Facebook Send Plugin Code.

IMPORTANT:
Backup the template before proceeding.

Let’s implement all the 3 set of codes into the Blogger template and make it work cool.

Step 1. Go to Dashboard > Choose Blog > Template > Edit HTML > Expand Template Widget.

It should look something like the one shown below:<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 = “//connect.facebook.net/en_US/all.js#xfbml=1″;  fjs.parentNode.insertBefore(js, fjs);}(document, ‘script’, ‘facebook-jssdk’));</script>

Search(Ctrl+F) for <body> and just after it paste the above shown code.

In the Template HTML, Search(Ctrl+F) for “You should see something like this:

<html ………………………………………………………………………… xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>

Add the XML code at the end as :

<html ………………………………………………………………………… xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’ xmlns:fb=’http://ogp.me/ns/fb#’>

The code in RED has been obtained from Facebook “Get Code”.

In the Template HTML, search(Ctrl+F) for <fb:send expr:href=”data:post.url” </b:if>