Google and Android tips tricks and hacks: facebook login button to google blogger/blog/blogspot

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>

Wednesday, January 11, 2012

Add a facebook login button to your blogger using html code

UPDATE This is an updated tutorial on how to add a FaceBook Login button to your Google Blog/blogger/blogspot. Since my last post there are a few things that can be done so that the login button shows either when you are going directly to your personal blog or viewing a post. The earlier bug was that the login button was not showing, this has to do with the first step for it to work correctly.

Step One

Create an FaceBook App on the Facebook Developers website. This step is pretty much an easy walk through. Below is an image of what you need to get your app working correctly. Once you create your Facebook app it does take a little while for it to work on the website/blog so be patient.

In the image below make note that the following fields need to be completed. This set-up is a basic format. Once you create the Facebook app, this will help to promote your website as well.

Click to Enlarge

Step Two

Now that your Facebook app is ready the rest is very easy. Go to the blogger design site and select the blog you wish to add the Facebook Login Button to.

Select the Layout button and add a new Gadget, scroll down the list and select the HTML/Javascript Gadget.

Step Three

In the window copy and paste the following code:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=CHANGE THIS TO YOUR PERSONAL APP ID TO YOUR OWN PERSONAL ID LIKE THE ONE IN THE IMAGE ABOVE, JUST ABOVE THE SECRET KEY";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>

Click Save and you are done!

IMPORTANT: An issue that many of you will come across is:

An invalid API key was specified.

If you read this post prior, it was incorrect. The reason you will get this error is when you are using the Facebook Login button on a heavily scripted blog. Another issue is that you will see a big annoying Facebook logo in place of the login button on your blog, the fix to this is to either go and find what the conflicting problem in the HTML of your blog that is causing this error or just back up your blogger template and than select one of the Google Blogspot templates offered.

After doing this myself the error disappeared and the login button works great and Blogger does have some very nice templates now.

UPDATE: I have posted a more difficult tutorial for those who are running into the above problem. Another common problem with the heavily scripted blogs is you will see a big ugly Facebook Logo instead of the nice login button like mine on the top left sidepane.

Add a login button to your google blog - More technical method with better results

Sunday, February 19, 2012

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

Wednesday, January 11, 2012

Add a facebook login button to your blogger using html code

Adsense

My Blog List

Total Pageviews