Add a Facebook Invite Friends Link to your Blogger Site

This is a helpful tutorial to add an "Invite your Facebook Friends" link to a website.This will be added as a gadget in the sidebar on all pages of your blog.

If you click on this link, a box will appear on the page enabling you to invite chosen friends from your Facebook profile to visit Cyberawake blog.

When you click this link, it will look like:

Now i'm going to explain how you can add this item to your own blogger blog site.

STEP1- Create a Bit.ly URL for your blog

Go to  https://bitly.com/ and at the bottom, enter your blog URL and generate your shortened bit.ly URL. Then save it somewhere as it will be needed to the step 2

NOTE- http//:bitly.com is a utility that allows users to shorten a long URL, share it, and then track the resulting usage. 

For example, you can turn this link:

http://www.facebook.com/notes/internet-marketing-whats-hot-whats-not/what-is-bitly-how-does-it-work-why-should-you-use-it/165286256861623 (which so happens to be the link to this Note)

Into this link:

http://on.fb.me/ShortenWithbitly

STEP2- Create a Facebook Application

Now you need to create a facebook app because you will need an appID to use in your code.

Go to https://developers.facebook.com/apps/ and creat new app.

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/bloggerbuster)

     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) 

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. For example, http://bit.ly/blgrbstr? 

     Secure Canvas URL - Enter your blog's bit.ly URL beginning with https 

     (eg: https://bit.ly/blgrbstr?) 

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

After you have done this, save your app ID which will be shown at the top of the page because you'll need to add this to the code to be pasted in your site.

STEP3- Add a custom gadget to your site

go to the Page Elements section of your Blogger dashboard and choose to add an HTML/JavaScript gadget.

Paste the following code into your gadget, replacing the values highlighted in red and blue:

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

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.

If you would like to style the link to look like the one which appears above and in this blog's sidebar, go to Template Designer in your Blogger dashboard, scroll down to the Advanced section and add the following to your Custom CSS

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

Ok.You are done!!

Don't forget to leave a comment and take a look the invite link  at the top right side and invite couple of friends to visit this site.

Any problem?? ask by a comment.