Add Facebook Invite Friends Link To Blogger Blog

This is one of the best widget every bloggers should have on their blog's, it's one of the best way to create a large audience for your blog. The main function of this facebook invite friends link is that it will allow your blog readers to invite their facebook friends to your blog.
Example of this facebook invite friends link can be found at the sidebar of this blog, and for a demo of how it works, simply click on the link. You will see a pop-up window which will show the list of all your facebook friends and you can invite anyone that you have the interest to notify about the blog/site.

DEMO:

Invite Friends To RealcomBiz

Create A Bit.ly URL For Your Blog

The first step is to create a secure base url, you can create one at bit.ly. Copy the new generated shorten url and save it somewhere because you are still going to use it in this tutorial.

Create A Facebook App

Now you will need to create a facebook application as you'll need an App ID. go to facebook developer page, and create an application. in the first pop-up box, fill it as follows:

• App Name: enter the name of your site (e.g RealcomBiz)
• App Namespace: also enter the name of your site, as it will feature in the url of your app (e.g http://apps.facebook.com/realcombiz)
• Click on Continue.

In the next window, simply fill the rest of the details required as shown below.

• Contact email - Enter your email address 
• App Domains - The URL(s) of the blog(s) you will be using this app for (eg: http://yourblog.blogspot.com or yourblog.blogspot.com)

Now, click on "Select how your app integrates with Facebook" and fill in details as follows:

• 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. (e.g http://bit.ly/YklQKY?)
• Secure Canvas URL - Enter your blog's bit.ly URL beginning with https and add a question mark at the end (eg: https://bit.ly/YklQKY?)

You can also add your site image or logo at the top of the page, as it will appear when your blog readers use your application.
You can see the screenshot below for more clarification.

When you have fill-in all your details, click on "Save Changes" and copy your App ID as identified in the screenshot above.

How To Add Facebook Invite Friends Link

• Go to your blogger dashboard
• Click on Layout > Add a gadget > HTML/JavaScript
• Copy and paste the following code in the content box

<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></span>
<script type='text/javascript'>
if (top.location!= self.location)
{
top.location = self.location
}
</script>

• Replace Your App-ID with the app id you copied from facebook developer page.
• Change Your Message Here to your preferred text
• Change Invite Friends Link Text to your preferred text.

Now If any of your readers click on the invite friends link, the pop-up window will show the list of their facebook friends as shown below.

Using CSS To Style The Link

• Go to Template > Edit HTML > Proceed
• Use ctrl F to find ]]></b:kin> and paste the following code above/before it.

.invite-friends-link a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzCy3Vp3ry2oQg8aanvYQhF4dYF-kY6cf3TUFomCzYnvEU_S_WP1xojapET3zJU_1ZZQe3cRcIuEkGXbhlBqDhhXS6Vu1QcIUpjwvZwsyqGnKNAbZzXnYzqXo2H4Bdoyh6GFyasy_yCUGA/s1600/facebook.png) left no-repeat;
padding-left: 30px;
line-height: 30px;
font-size: 16px;
font-weight: bold;
color: #3b5998;
display: block;
}

Now save changes and you are done.
We like to hear your feedback or suggestion concerning this Facebook invite friends link.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz