Feedburner Facebook youtube pinterest twitter

Sunday, February 19, 2012

Elizabeth's Blogger Wikis: Add a facebook login button to your blogger using html code

Elizabeth's Blogger Wikis: Add a facebook login button to your blogger using html code - Simple method

People have been having issues with the above tutorial on adding a facebook login button to your Google Blog on Blogspot. After doing a little research and testing for myself, there is another way. If you are using a heavily scripted blog on blogspot then the above tutorial will not work and you will get one or both of the following errors:


  • An invalid API key was specified
  • A large ugly Facebook Logo Button
To fix this problem, unfortunately you are going to have to use the more difficult tutorial but the upside to this one is that there is logout button as well.  As you can see from mine on the top left when you log into Facebook from my site it works and you will also notice the logout option.

Step 1: Search for the code below and add code in red.....final look will be

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


Step 2: Put the below code above </head>

<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php' type='text/javascript'/>


Step 3: Put this code above </body>

<script type='text/javascript'> 
FB.init("
YOUR_API_KEY_HERE" , "");
</script>


To add your_api_key_here, click the above link to find out how to obtain an api_key.

Step 4: Save changes you are almost done!! 

Adding Facebook Connect-->>

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

USER NAME-
<fb:name uid="loggedinuser" useyou="false"/></fb:name>

1 comment :

  1. Linking from Facebook to the blog so that Facebook generates a notification requires a manual step, but I guess as long as I feel well enough I can do that. www.facebook.com login homewww.facebook.com login home

    ReplyDelete

Adsense

My Blog List