--> How To Add Facebook Invite Friends Button To Blogger? | Experience Lab - Online business creation and development guide for bloggers and startups

How To Add Facebook Invite Friends Button To Blogger?

Social bookmarking buttons are very commonly seen on blogs, and there are any number of widgets that will give you a ton of all the common ...




Add Facebook Invite Friends Button To Blogger

Social bookmarking buttons are very commonly seen on blogs, and there are any number of widgets that will give you a ton of all the common buttons, such as Facebook Like, Twitter Tweet, Google +1, and so on. The Facebook 'Invite Friends' button is different in the sense that it isn't a bookmarking button. It is something much more useful - it enables users easily refer certain content to their friends, and also helps bloggers with increasing their audience. Today's how-to is all about creating an 'Invite Friends' button, and adding it to your (Blogger) blog.


What is the Invite Friends button?



You typically see this sort of button on Facebook Pages only. Page administrators can invite their friends to like their page. Other people who visit the page, and have liked it can also invite their friends. This helps with generating a new audience for your Facebook page, and hence your website or blog. You can put this button on your blog as well so that people can invite their friends from right there, instead of going to a Facebook page.




Invite Friends




When a person clicks on the invite friend button, a new pop-up window opens. This allows them to search and select multiple friends of theirs at once. As per Facebook's limit, 50 people can be selected at a time. Clicking on the Send Requests button will send out requests to people on behalf of the sender to like the particular Facebook page.


Adding Invite Friends button to Blogger



This process involves generating a small Facebook app of your own. Go to the Facebook Developer Page, and create a new app. In order to be able to access this page, you need to be registered as a developer.




Become a developer




If you're not already registered as a developer, simply click on the Register button as shown. After confirmation, you will be taken to the Facebook Developers Page.


  • Click on Apps > Create New



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



Get App ID




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

.MBT-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;

}

.MBT-FB a:active {

background-color:#4f6aa3 !important;

}

</style>

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

<script>

FB.init ({

appId:'412074162260996',

cookie:true,

status:true,

xfbml:true

});

function FacebookInviteFriends () {

FB.ui ({

method: 'apprequests',

message: 'Invite your friends'

});

}

</script>

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

<span class='MBT-FB'>

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

</span>

<script type='text/javascript'>

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

top.location = self.location

}

</script>


  • Now, 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 site, and then save your changes. This step ensures access to your app from your site URL.


You're now all done! You can add the code given above anywhere on your blog! Check out this demo button below!









Invite your friends





Facing problems? Please feel free to ask in the comments section below. Hope this post helped. Cheers :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: How To Add Facebook Invite Friends Button To Blogger?
How To Add Facebook Invite Friends Button To Blogger?
http://4.bp.blogspot.com/-g3D70DGNxCs/Uu4PCyzMuiI/AAAAAAAAFRY/pEU2Dn0m_yw/s1600/invite-friends.jpg
http://4.bp.blogspot.com/-g3D70DGNxCs/Uu4PCyzMuiI/AAAAAAAAFRY/pEU2Dn0m_yw/s72-c/invite-friends.jpg
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2014/02/how-to-add-facebook-invite-friends.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2014/02/how-to-add-facebook-invite-friends.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy