There are very few and specific changes that are to be done to enable the facebook-connect service on your blog in blogger.com.
- Create a new application at http://www.facebook.com/developers/createapp.php
- Enter a name for your application in the Application Name field and “save changes”
- Copy the API Key
- Click on the Connect tab and set Connect URL to “Your_Blog_Name.blogspot.com” and “save changes”
- Login to Blogger and go to Blog Dashboard> Layout > Edit HTML
- Look for :
- expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’ >
- Replace it with:
- expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’ xmlns:fb=’http://www.facebook.com/2008/fbml’>
- Look for :
- </head> tag
- Insert just before </head> :
- // <!–[CDATA[
src=’
// ]]>http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2’ type=’text/javascript’/> - Look for :
- </body> tag
- Insert just before </body> :
- // <!–[CDATA[
src=’
// ]]>http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php’ type=’text/javascript’/> <script type=’text/javascript’> FB.init("YOUR_API_KEY_HERE", ""); </script> - Save changes, you are now ready to add Facebook connect to your blog
- Go to : Add gadget and select html/javascript
- Face-book connect button:
- <fb:login-button autologoutlink=”True” length=”short” background=”white” size=”large”></fb:login-button>
- Profile picture :
- <fb:profile-pic uid=”loggedinuser” facebook-logo=”true” linked=”false”></fb:profile-pic>
- Username :
- <fb:name uid=”loggedinuser” useyou=”false”/></fb:name>
- Live-stream box :
- <fb:live-stream event_app_id=”YOUR_APPLICATION_ID” width=”400″ height=”500″>
- Comments :
- <fb:comments width=’480′/>
- Fan Profile :
- <fb:fan profile_id=”YOUR_PAGE_ID” stream=”1″ connections=”10″ width=”300″></fb:fan>