Add, Embed Facebook Send Button To Your Blog Or Website [Complete Guide]

Facebook has recently rolled out the new send button to replace the email to friend widget on blogs or website pages, you can read about this new change here.

4-26-2011 1-56-09 AM

The new facebook send button comes with privacy feature and also with the option to share a link to a group of facebook friends and all this will remain private, nothing will be posted onto your facebook wall.

4-26-2011 1-55-12 AM

You can share movie review, book review, a product or gift page with your friends on facebook or else you can also directly mail the link to page to a any email address to a person who is not connected to you on facebook.

facebook-send

For all the webmasters who would like to embed these new send button on their websites or blog can follow the procedure below.


Implementation Guide Of Send Button For Static Website Or Blogs

You can use the code below to add a facebook like and send button together, Facebook Send button can be easily added to existing Like buttons or as a standalone feature. Developers currently using the XFBML Like button can include the send="true" attribute in their Like button code to generate a combined button, and those using an iFrame version of the Like button will need to upgrade to XFBML to display a Send button. The following code will generate a combined Like and Send button.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="example.com" show_faces="true" width="450" send="true">
</fb:like>

In case of the above code, if the page on which you are embedded the send button is static URL then replace the example.com in the code with your URL, if you are embedding the send button on a blog on some page or single post then delete the example.com in the above code and make that attribute as href=””

For Static Website Pages Use The Code

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="put your website page url here" show_faces="true" width="450" send="true">
</fb:like>

For Dynamic Blogs Pages Use The Code

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

Developers can add a standalone Send button with the following code

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:send href="example.com"></fb:send>

You can also generate the send button code at this page, and you can also optimize the look and feel of your facebook send button – the different attributes of the send button are

  • ref – the URL to send.
  • font – the font to display in the button. Options: ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, ‘verdana’
  • colorscheme – the color scheme for the like button. Options: ‘light’, ‘dark’
  • ref – a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). Specifying the ref attribute will add the ‘fb_ref’ parameter to the referrer URL when a user clicks a link from the plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *