Langsung ke konten utama

Add A Facebook Invite Friends Link To Your Blogger Site

 I read a very helpful tutorial to add an  Add a Facebook Invite Friends Link to your Blogger Site
Over at 9Lessons I read a very helpful tutorial to add an "Invite your Facebook Friends" link to a website. I was able to modify this in order to add to a gadget which now appears in the sidebar on all pages of (beneath the Facebook Like box).

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 .

In this simple tutorial I'll explain how you can add this functionality to your own Blogger powered blog.

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

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

Next, 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 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.

Add a 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 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.

Here's a demo of how the "Invite Facebook Friends" link works:

Invite friends to

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



If you would like to style the link to look like the one which appears above and in the sidebar, go to Template>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: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvhj8x85u8rNV17RAcasvi4QQ1tr_GOSRTnUTM4LURBLCFr8vMmnlYPct8aZ8K8unkPTvWFoJEpAh7F4lGz_4IqJKZUscY6e42xnClvfXA0Nk_OYhLP5cvEr-TJdCREJ_BbyoSIxTOjie/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!

Final thoughts

Admittedly it did take a while for me to figure out how to get my own app working properly. The biggest kasus I had was finding a way to use a secure base URL as Blogger does not support https requests. Thankfully I discovered that bit.ly enables us to use a secure shortened URL, though you could alternatively use the free service provided by Social Server.

I hope you have found this tutorial to be useful in creating your own "Invite Facebook Friends" link for your Blogger powered site. Please feel free to leave your comments and suggestions below.

Komentar

Postingan populer dari blog ini

How To Add A Music Player In Blogspot

Since this archived post was written in 2007, web design and Blogger templates have changed immensely. The development of HTML5 and <audio> tags enable us to add music to our Blogspot websites and posts far more simply, and with improved control. In preparation for explaining how to podcast with Blogger, this tutorial explains how to easily add an HTML5 mp3/audio player to your blog posts or layout. No JavaScript, Flash or plugins are required, and with a fallback for older browsers which don't support the player. I've even created a simple form to generate basic tags for you! Adding music to your Blogspot site has never been so easy! Basic HTML5 Audio Tags Explained The <audio> tag is a new feature of HTML5 which we can use to natively embed audio playback in our sites. It is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari, and can be set to play the linked audio file automatically (autoplay) or loop if required. Here...

Import Blogs From Another Service To Blogger With The Google Blog Converters Project

A few months back, Blogger announced the ability to import and export Blogger hosted blogs. At the time, it was not possible to import blogs from any other service to Blogger, which left many of us a little disappointed though wondering when this service could be made available. Well it seems there is hope that Blogger can make such a service available through our Blogger dashboards soon enough! Today the the Google Blog Converters project : an open source project which aims to make available the ability to import/export feeds from many different blog platforms: This new Open Source project provides the ability to easily move blog posts and comments from service to service. This initial release provides Python libraries and runnable scripts that convert between the export formats of Blogger, LiveJournal , MovableType , and WordPress . In addition, the source code includes templates for hosting these conversions on Google App Engine . Future additions to the project will includ...

Download Mp3 - Parodi Blackpink - dududu At D&#;Academy Indonesia Dance Solo by Ivonne Rose (Anak Indonesia)

download lagu 123 Parodi Blackpink - dududu At D&#;Academy Indonesia Dance Solo by Ivonne Rose (Anak Indonesia) - download lagu terbaru blackpink lisa moments i think about a lot- free download lagu mp3 Blackpink Lisa - Lili [FMV] Alan Walker, K- & Emelie Hollow - Lily- download lagu mp3 full 【BLACKPINK】Gaon Chart Kpop Awards -download lagu 123 MP3 bts & blackpink | mma , Semua Lagu-Lagu, Video dan Lyrics tersedia disini, Semua Musik ini berasal dari Youtube.com dan gratis untuk didownload. Belilah Lagu Parodi Blackpink - dududu At D&#;Academy Indonesia Dance Solo by Ivonne Rose (Anak Indonesia) dan kasetnya di Toko Terdekat Maupun di iTunes atau Amazon secara legal, ini hanya sebagai Review dan Promosi saja. Video Terkait Video Download MP3 Parodi Blackpink - dududu At D&#;Academy Indonesia Dance Solo by Ivonne Rose (Anak Indonesia) Download MP3 blackpink lisa moments i think about a lot Download MP3 Blackpink Lisa - Lili [FMV] Alan Walker, K- & Emelie Ho...