Description: An easy step to add Facebook Send Button to each Blogger posts. Facebook Send Button also lets you share content privately.
Facebook has launched the Facebook send button that you may add to your blogs by which your visitors may send your posts to their friends as a private message. Your visitors may also send your blog post to their Facebook groups, and email IDs. The maximum number of people your visitors can send your posts through the send button at a time is 20. The blog owner may also send their posts to various groups and friends at a time. Facebook send button has inbuilt suggestion option, whenever you type the words in "To" field, Facebook will show your friends followed by the words and the groups so that you can easily select the right person or group. If you wish to send your posts to the friends whose doesn't exist in Facebook, then type the email address of your friend in "To" field, and your message will be delivered to their email inbox as a normal email. Therefore, here is how to add Facebook send button to Blogger.
Related Topics:
You can easily add the Facebook send button provided by Facebook into your Blogger, but the problem is that Facebook allows you to type your URL into "URL to send" field. Let you have typed your homepage URL in this field, as the following way,
Once you click on Get Code, you can add this code to your Blogger pages, but if someone read your post inside your blog, and If they click on the send button, then it will send the home page instead of the current page your visitors are on.
I have tweaked on this code provided by Facebook for Blogger blogs, so that your visitors can send the page that they are reading.
--> This code will appear on the left side. If you wish to show it on the right, just replace the blue text which is, float:left;padding: 6px 6px 6px 0px with this one, float:right; padding: 6px 0px 6px 6px.
--> You may change your color scheme, look at the data-colorscheme attribute in the above code, and change its value from light to dark.
--> The last line of the code, <div style='clear:both;'/> is basically to add a line break. If you don't add this line, send button will wrap with your content i.e., send button would be in left/right followed by your content in right/left to the send button.
--> If you want to add some other social button in a row, then you can paste other social codes to this code just before <div style='clear:both;'/>
--> This code will show your Facebook send button only on the post pages or it will not appear on the homepage, and static pages which is also not necessary. However, if you wish to appear it on those pages, simply remove the 'if' condition as in the first line remove <b:if cond='data:blog.pageType == "item"'> and in the last line remove </b:if>.
Now where can you paste this Code 1.1, follow the options.
1. Firstly, go to your Blogger Dashboard --> Click on Template under more options::
Click anywhere on the code and type (ctrl+F) to find <data:post.body/> code. Now, paste the above code1.1 just before <data:post.body/> code. It will show your Facebook send button to the upside of the content area or below to post title. If you want to show send button below to post content then paste your code 1.1 below to <data:post.body/>. Finally, click on Save.
*** If you are using automatic read more option for your custom templates on Blogger then you would find <data:post.body/> code more than one. It is not a difficult task just paste your code for each <data:post.body/>, and look out which one suits your need.
2) You may also show your Facebook send button to Blogger's sidebar. You can paste your code 1.1 into your sidebar widgets by going to Blogger Dashboard --> Layout(Under more options) --> Add a Gadget(choose from sidebars) --> HTML/JavaScript (Choose under pop up window) and paste your code and click on Save.
 |
| Facebook Send Button for Blogger |
- Keyboard Shortcuts for Facebook Browsing
- Auto Post Facebook Status to Twitter
- Add Facebook Videos/Status Updates on Blogger
- Change your Facebook Theme with your choice of Colors
You can easily add the Facebook send button provided by Facebook into your Blogger, but the problem is that Facebook allows you to type your URL into "URL to send" field. Let you have typed your homepage URL in this field, as the following way,
Once you click on Get Code, you can add this code to your Blogger pages, but if someone read your post inside your blog, and If they click on the send button, then it will send the home page instead of the current page your visitors are on.
I have tweaked on this code provided by Facebook for Blogger blogs, so that your visitors can send the page that they are reading.
Let's see, in the short, what will be the benefits by adding Facebook send button to Blogger:
- Your visitors can share your posts to specific friends ( Privately in inbox)
- Your visitors can post on the wall of any joined groups in Facebook.
- Your visitors can send your link to their friends by the email ids.
Adding Facebook Send Button to Blogger
Copy the below code:
Code 1.1
<b:if cond='data:blog.pageType == "item"'>
<div style="float:left;padding: 6px 6px 6px 0px">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><div class="fb-send" expr:data-href="data:blog.url" data-colorscheme="light"></div></div><div style='clear: both;'/></b:if>
<div style="float:left;padding: 6px 6px 6px 0px">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><div class="fb-send" expr:data-href="data:blog.url" data-colorscheme="light"></div></div><div style='clear: both;'/></b:if>
--> This code will appear on the left side. If you wish to show it on the right, just replace the blue text which is, float:left;padding: 6px 6px 6px 0px with this one, float:right; padding: 6px 0px 6px 6px.
--> You may change your color scheme, look at the data-colorscheme attribute in the above code, and change its value from light to dark.
--> The last line of the code, <div style='clear:both;'/> is basically to add a line break. If you don't add this line, send button will wrap with your content i.e., send button would be in left/right followed by your content in right/left to the send button.
--> If you want to add some other social button in a row, then you can paste other social codes to this code just before <div style='clear:both;'/>
--> This code will show your Facebook send button only on the post pages or it will not appear on the homepage, and static pages which is also not necessary. However, if you wish to appear it on those pages, simply remove the 'if' condition as in the first line remove <b:if cond='data:blog.pageType == "item"'> and in the last line remove </b:if>.
Now where can you paste this Code 1.1, follow the options.
1. Firstly, go to your Blogger Dashboard --> Click on Template under more options::
Click anywhere on the code and type (ctrl+F) to find <data:post.body/> code. Now, paste the above code1.1 just before <data:post.body/> code. It will show your Facebook send button to the upside of the content area or below to post title. If you want to show send button below to post content then paste your code 1.1 below to <data:post.body/>. Finally, click on Save.
*** If you are using automatic read more option for your custom templates on Blogger then you would find <data:post.body/> code more than one. It is not a difficult task just paste your code for each <data:post.body/>, and look out which one suits your need.
2) You may also show your Facebook send button to Blogger's sidebar. You can paste your code 1.1 into your sidebar widgets by going to Blogger Dashboard --> Layout(Under more options) --> Add a Gadget(choose from sidebars) --> HTML/JavaScript (Choose under pop up window) and paste your code and click on Save.
