Add Invite Facebook Friends Button to Blogger Blog

Every blogger is using social bookmarking buttons on their blogs such as Facebook Like, Twitter Tweet, Google +1, Stumbleupon, Linkedin, Pinterest and so on. The Facebook 'Invite Friends' button is really unique because its not a bookmarking button. Blogger can increase their blog's traffic by adding this button. Today I will show you a short tutorial how to add an 'Invite Friends' button to your (Blogger) blog. Let's start this tutorial:

Adding Invite Friends Button to Blogger

First of all create a small Facebook app of your own. Go to the Facebook Developer Page, and create a new app.

• Click on Apps » Create New App

• Enter a Name and Identifier For Your App, and Then Choose a Category.
• Copy Your App ID. This Will be Used Later.
• Now, take a look at the following code. It is the code for our button, but not quite ready yet. All you have to do is, replace the ID given in this code with your own (given in bold text). You can change the other text in bold as well with your own customized message. And of course, you can customize the CSS styling.

<style>

 .BD-FB a {

  font-family: tahoma, verdana, arial, sans-serif !important;

  font-weight:bold !important;

  font-size:12px !important;

  width:150px !important;

  border:solid #29447e 1px !important;

  border-bottom:solid #29447e 1px !important;

  cursor:pointer !important;

  padding:6px 6px 6px 6px !important;

  background-color:#5c75a9 !important;

  border-top:solid #8a9cc2 1px !important;

  text-align:center !important;

  color:#fff !important;

  text-decoration:none  ! important;

 }

 .BD-FB a:active {

  background-color:#4f6aa3 !important;

 }

</style>

<script src='http://connect.facebook.net/en_US/all.js'></script>

<script>

 FB.init ({

  appId:'164402213770771',

  cookie:true,

  status:true,

  xfbml:true

 });

 function FacebookInviteFriends () {

  FB.ui ({

   method: 'apprequests',

   message: 'Invite your friends'

  });

 }

</script>

<div id='fb-root'></div>

<span class='BD-FB'>

 <a href='#' onclick='FacebookInviteFriends();'>Invite your friends</a>

</span>

<script type='text/javascript'>

 if (top.location != self.location) {

  top.location = self.location

 }

</script>

• Go to your app page, and then go to settings.

• Click on Add a new platform and then click on Website. Enter the URL of your website, and then save your changes.

That's it! Just add above given code anywhere on your blog like: blog post, sidebar etc! If you need any help then please feel free to ask in the comment section below. Stay Blessed :)