Add a Facebook Invite Friends Link to your Blogger Site

Have you noticed the new button "Bring Your Friends" just take a quick look at the page position top right. Actually this is Facebook invite friends system. For implementing this you have to create a Facebook application to setup your webpage canvas URL, just few lines of code but before that your web page should be SSL (https) enable.

Live DEMO:

Fb Friends Invite to RN Hckr

Create a Bit.ly URL for your blog

The first thing you'll need to do is create a short bit.ly url for your blog. This will enable us to circumvent the requirement for a secure base URL (beginning with https which we can't natively use with Blogger).

Make a note of this short bit.ly URL as you will need it when creating your app on Facebook.

Create Your Facebook App

Next, click on "Select how your app integrates with Facebook" and fill in details as follows:Now you'll need to create a Facebook Application as you'll need an appID to use in your code. Visit the Apps page on Facebook Developers to do this.

Name your application and fill in the first set of details as follows: 

• Display Name - The name of your site 
• Namespace - yournamespace (this will feature in the URL for your app. eg: http://apps.facebook.com/rnhckr)
• Contact email - your email address 
• App Domains - The URL(s) of the blog(s) you will be using this app for (eg: http://yourblog.blogspot.com) 

• Website with Facebook Login - Your blog's URL (eg: http://yourblog.blogspot.com) 
• Canvas URL - Here you'll need to enter the bit.ly url you generated for your site, adding a question mark at the end. For example, http://adf.ly/CuekG? 
• Secure Canvas URL - Enter your blog's bit.ly URL beginning with https (eg: http://adf.ly/CuekG?) 

If you like, you can add an icon and thumbnail for your application at the top of the page; these will appear when readers use your app. Then save your changes.

Once you've done this, be sure to make a note of your App ID which will be shown at the top of the page as you'll need to add this to the code to be pasted in your site.

Custom Gadget to your Site

Finally, go to the Layout section of your Blogger dashboard and choose to add (or edit) an HTML/JavaScript gadget.

Paste the following code into your gadget, replacing the values of  your-app-id, Your Message Here, Invite friends link text 

/* Add a Facebook Invite Friends Widget start by rnhckr.com */
<script src="http://connect.facebook.net/en_US/all.js"></script> <script>
FB.init({
appId:'your-app-id',
cookie:true,
status:true,
xfbml:true
});

function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: 'Your Message Here'
});
}
</script> <div id="fb-root"></div><span class="invite-friends-link"><a href='#' onclick="FacebookInviteFriends();"> Invite friends link text </a> <script type='text/javascript'>
if (top.location!= self.location)
{
top.location = self.location
}
</script></span>
/* Add a Facebook Invite Friendstop post Widget End by rnhckr.com */

And save the changes.

This will create a basic text link which your blog visitors can click to bring up a Facebook dialogue box in which their friends can be invited to visit your site.

For those who may be reading this post in their feed reader. here's a screenshot of the Facebook pop-up screen:

Facebook Invite to RN Hckr

If you would like to style the link to look like the one which appears above and in the Blogger Buster sidebar, go toTemplate>Customize in your Blogger dashboard, scroll down to the Advanced section and add the following to your Custom CSS (or modify to suit your requirements):

.invite-friends-link a { background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8O2ej_qSmdsTh73q_f5goRpvr-UWaynlWtNZkk5cAVOGUAe-SGcg-qH9iKfzZKJbZmM3evKyPdP4I-TuU9xXnQ8DRlPFkZ8LSSm-m2pdZ0JGw4f2h8UOmKXLgt3thNlwYrVSr2QxRMu6d/s1600/facebook.png) left no-repeat; padding-left: 30px; line-height: 30px; font-size: 16px; font-weight: bold; color: #3b5998; display: block; }

That's all there is to it!