Facebook Social Plugins Send Button

If you want your wordpress blog to get more readers and thus increase your monthly blog profit earning then you will love this new feature from Facebook Social Plugins – Send Button. Here are what Facebook Social Plugins main page has to say about this plugin:-

Try it!

‘The Send Button allows users to easily send content to their friends. People will have the option to send your URL in a message to their Facebook friends, to the group wall of one of their Facebook groups, and as an email to any email address. While the Like Button allows users to share content with all of their friends, the Send Button allows them to send a private message to just a few friends.

The message will include a link to the URL specified in the send button, along with a title, image, and short description of the link. You can specify what is shown for the title, image, and description by using Open Graph meta tags. ‘

I won’t go into open graph meta tags in this post so just forget about the ‘title’ and ‘image’ part first. I am going to show you how to embed a send button in your own post using its HTML5 tag in this post. Follow below steps to get thing done.

1) Start a new post and switch the mode to HTML from Visual.

2) Paste below code into any place as you wish in your new post while you are still in the HTML mode.

<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>

What the above code does is to create a javascript element with id=’facebook-jssdk’ which will load the JavaScript SDK file on your post, in order to use the send button you will need this file. You do not need to worry about whether this script file will load twice or not because the if statement in the script already taking care of the business for you.

3) Now place this tag in anyplace within the blog post where you want the button to appear.

<div class=”fb-send” data-href=”gadgets-code.com” data-font=”verdana” data-colorscheme=”dark” data-send=”true”></div>

data-href attribute is where you place the url which you want your readers to send to their friends, leave this attribute out if you want to use your post url instead of other url. data-font attribute allows you to specify the font of the send button and data-colorscheme allows you to make the button lighter or darker. data-send=”true” is used to include a ‘like’ feature together with the send button on your post. Besides the above attributes there is one more attribute  -  data-ref attribute is the label for tracking referrals which I am not included in the above tag. Don’t forget the class=”fb-send” or else the button will not render on your post.

Now try out the send button above by sending this post to your friends to see it in real action!