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


21 comments :

  1. I tried to do this, but instead of a nice tidy button, it's a big, lopsided facebook logo! :(

    ReplyDelete
    Replies
    1. And then it says "given url is not allowed within application configuration"? I'm obviously doing something wrong...

      Delete
    2. I noticed that on heavily scripted blogs that this happens. I get a big ugly log on my http://hottopics.hopto.org blog when viewing posts but it is okay when I am on the homepage of the blog. Was getting ready to redo the template to see if that worked. Also, you may have to wait up to at least two hours before the FB button kicks in.

      Delete
    3. Back to my previous comment, blogs that are scripted heavily, you will run into that problem with the Facebook logo not working correctly, than when you click the logo you will see an error that says, Invalid API error. After I went and selected one of the google blogger ready templates the Facebook login button worked just fine.

      Delete
  2. its giving big logo
    www.cinterviews.com

    ReplyDelete
    Replies
    1. Yes on January 23, 2012 my comment also addresses that problem as well. As stated in my post at the bottom of the tutorial as well as my last comment before yours, if your blog is heavily scripted you are going to run into the problem of getting a large logo or an API error. I to was getting that big logo and than after using the Blogspot template that is provided in the template skins the issue disappeared.

      Delete
  3. I dunno, I just switched the Rich Text Link to Edit HTML link and now it's showing a lovely little login box. The only problem is that it doesn't work...

    ReplyDelete
  4. Simple Tutorial.....Any one can understand.......Excellent work..Thanks......

    ReplyDelete
  5. nice tutorial... good work , and thanks for share with us

    ReplyDelete
  6. nice... thanks... plz help me how to approved my adsence account?

    ReplyDelete
  7. it works but i cannot remove link in it thanks http://softft.blogspot.com/

    ReplyDelete
  8. ty but in my blog i dont need it my blog is giving you The Top Music http://www.toptopmusic.com/

    ReplyDelete
  9. grt job thanks Elizabeth.. !!

    ReplyDelete
  10. Thanks Beth, Script works great - App was ready to use within 10 mins of posting on FB Developers site.

    JR

    ReplyDelete
  11. ESTIMADOS HERMANOS:
    Solicito desbloquearme de mi cuenta de FACEBOOK porque el moderador es chismoso en dimitirme de averiguarme en los casos judiciales de usuario por mi oprobio sexual con Guatemala, por el cual, les solicito a ustedes averiguarme de mi oprobio con Guatemala con la policía nacional civil de Guatemala y con el movimiento político WINAQ de Guatemala porque representa a la etnia guatemalteca popular como testigos de mi oprobio sexual con Guatemala por culpa de mis calumniadores surrealistas y de mis calumniadores circunvecinos a mi casa por la calumnia de prevaricador consecuente a la calumnia de violador sexual parafílico por una ignominia sexual necrofílica frustrada popularmente por mi prestigio. Fuí altruista con la red social de FACEBOOK para resarcir necrofílicamente a los violadores sexuales irrevertibles de la parafilia voyeurista con las secuaces sexuales.

    Atentamente:
    Jorge Vinicio Santos Gonzalez,
    Documento de identificacion personal:
    1999-01058-0101 Guatemala,
    Cédula de Vecindad:
    ORDEN: A-1, REGISTRO: 825,466,
    Ciudadano de Guatemala de la América Central.

    ReplyDelete
  12. ESTIMADOS HERMANOS:
    Solicito desbloquearme de mi cuenta de FACEBOOK porque el moderador es chismoso en dimitirme de averiguarme en los casos judiciales de usuario por mi oprobio sexual con Guatemala, por el cual, les solicito a ustedes averiguarme de mi oprobio con Guatemala con la policía nacional civil de Guatemala y con el movimiento político WINAQ de Guatemala porque representa a la etnia guatemalteca popular como testigos de mi oprobio sexual con Guatemala por culpa de mis calumniadores surrealistas y de mis calumniadores circunvecinos a mi casa por la calumnia de prevaricador consecuente a la calumnia de violador sexual parafílico por una ignominia sexual necrofílica frustrada popularmente por mi prestigio. Fuí altruista con la red social de FACEBOOK para resarcir necrofílicamente a los violadores sexuales irrevertibles de la parafilia voyeurista con las secuaces sexuales.

    Atentamente:
    Jorge Vinicio Santos Gonzalez,
    Documento de identificacion personal:
    1999-01058-0101 Guatemala,
    Cédula de Vecindad:
    ORDEN: A-1, REGISTRO: 825,466,
    Ciudadano de Guatemala de la América Central.

    ReplyDelete
  13. Duniya Ke Ishq Ko Zami Ke Seene Me Daba Aayi
    Hu
    .
    Mustafa Ke Ishq Me Duniya Bhula Ke Aayi Hu
    .
    Nahi Jala Payegi Mujhe Jahannam Aye Momino
    .
    Ishq E Muhammed Ko Seene Me Basa Layi Hu
    .
    Nahi Mohtaj Mai Duniya Ke Ishq Ki
    .
    Ishq E Mustafa Kafi H Jine Ke Liye +9779816842448 ♡ ♡ ♡ ♡ ♡

    ReplyDelete
  14. Thanks for all your efforts that you have put in this. very interesting Blog... Thank you for posting this....
    Normal-Rent-On-Computer In Delhi

    ReplyDelete

My Blog List