How To Add XFBML Send Button Below Blogger Title?

By Vinod Suthersan → Thursday, February 2, 2012
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, XFBML and iFrame.
Let's try it out with XFBML, which is more powerful and works wonderfully.

We see 3 sets of codes:
1. A script
2. An XML tag
3. 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.

Step 2. Adding the SCRIPT
It should look something like the one shown below:
Code:
<div id="fb-root"></div>
<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.

Step 3. Adding XML
In the Template HTML, Search(Ctrl+F) for "<html"
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".

Step 4. Adding Final Facebook Plugin Code
In the Template HTML, search(Ctrl+F) for <data:post.body/> and just before it paste the Facebook plugin code as:
Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:send expr:href="data:post.url" font="arial" colorscheme="light"></fb:send>
</b:if>
The above code is gonna get you the send button below all the Blogger post titles.

The best part of XFBML code is that it automatically fetches the post URL without entering any URL while generating the code.

Customization:
1. To change colorscheme, change colorscheme="light" to colorscheme="dark"

2. To display the social widget on Home page of Blogger as well:
Remove the conditional tags <b:if cond='data:blog.pageType == &quot;item&quot;'> and </b:if>

3. To display it on all pages except static pages, then wrap the code with this conditional statement as shown below:

Code:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<fb:send expr:href="data:post.url" font="arial" colorscheme="light"></fb:send>
</b:if>

4. Default font is arial - font="arial". Other fonts are:
font="verdana"
font="tahoma"
font="lucida%2Bgrande" 
font="segoe%2Bui"  
font="trebuchet%2Bms"

Hope you enjoyed doing this on your Blogger blog. Thanks for reading. We will look into more into social networking in the future. If you have any doubts, please feel free to stay in touch with me via comments are you can also contact me via the contact form.

~iTechColumn
Karan Vyas

Karan Vyas is the founder at Itechcolumn.com, a 19 year old student pursuing his B.Tech in ECE.He is passionate blogger,Web Developer having vast knowledge on reverse engineering,hacking,software developement.Apart from this he is involved in witchcraft black magic and hypnotism.