TUTORIAL IT

Facebook Invite Friends Button For Blogger

The Facebook 'Invite Friends' button for blogger can also be added as one of the best widget because it enables your blog readers to easily refer their friends to your Facebook fan page, thereby increasing your audience. Normally, this Facebook button can only be found on Facebook pages where Page administrators have to manually invite others to like the page and fans who have liked the page also inviting their friends. Taking advantage of thousands of users on a social networking site like Facebook can go a long way in improving your blog's audience.

Also Read: How to Add HTML Parse Tool To Blogger
                    Social Follow and Subscription Widget For Blogger


How does this facebook invite friends blogger widget work? Each time a person clicks on the 'invite friends button', a new pop-up window opens. They can invite as many as 50 friends (which is the limit) at once to like your page. Using this invite button can help in increasing the fans on your Facebook page, thereby bringing more traffic each time your blog post is shared on the page. Include this widget on your blog so that your readers can also invite their friends to like your page directly from your blog.

Also Read:   'Link to This Post Widget' For Blogger
                     Customized Labels Cloud Widget For Blogger

How to Add the Facebook Invite Friends Button to Blogger

1. Create a Facebook app by Going to Facebook Developer's Page.

2. You must be a registered developer before you can gain access to this to create apps on the page. To do this, click on the Register button on the top right corner.

3 Next, Click on 'Apps'  tab, then select 'Create new app'.


4. Enter a name of your choice for the app and also an identifier(optional), Select your app's category from the drop down menu. Then click 'create'.

5. You'll get an app Id, copy the ID into a notepad or text editor


6. Still on the Facebook developer's page, click on 'app page', and then go to 'settings'. Select 'Add a new platform' and then click on 'Website'. Fill the spaces appropriately with your URL and also mobile URL of your site, and then save your changes.

7.

• .Goto your blogger dashboard
• Click on 'layout' 
• then select 'add gadget' 
• select 'html/javascript'. 
• Copy the entire code below into the html/javascript editor. Before you save, edit the code by replacing the app ID in the code with your 'app ID' which you copied from Facebook developer's page. Also edit the 'facebook page url' in the code, replace it with yours. 
• Then Save the gadget

<style>
/*Facebook Invite Friends Button CSS http://www.informationtutorial15.blogspot.com*/
.MD_fb_invite a{
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif !important;
font-weight:bold !important;
font-size:12px !important;
width:150px !important;
border:solid #3b6e22 1px !important;
border-bottom:solid #2c5115 1px !important;
cursor:pointer !important;
padding:6px 6px 6px 6px !important;
background-color:#68a64c !important;
border-top:solid #98c286 1px !important;
text-align:center !important;
color:#fff !important;
text-decoration:none ! important;
}

.MD_fb_invite a:active{
background-color:#609946 !important;
}
/*End CSS http://www.informationtutorial15.blogspot.com*/
</style>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<script>
FB.init({
appId:'533069656825293',
cookie:true,
status:true,
xfbml:true
});
function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: 'Invite your friends '
});
}
</script>
<div id='fb-root'></div>
<span class='MD_fb_invite'><a href='http://www.facebook.com/newsville' onclick='FacebookInviteFriends();'>
Invite your friends
</a></span>
<script type='text/javascript'>
if (top.location!= self.location)
{
top.location = self.location
}
</script>