Add New Facebook Login Button to a Website/Blog 2012
Now a days you can find a Log-in with Facebook option in lots of website. Well, if you are also owner of a website or blog, its very easy to add a Facebook Log-in button in your own site. Here I am gonna tell you how to do it..
1. Go to Facebook Developer Page. You might be asked to verify your account, choose any of the verification options to complete the verification.
2. Click on : Create a New App. Choose an App name & a valid App Namespace.
3. Click on Edit App and choose Website with Facebook Login option and enter your website/blog URL there.
4. You should then see your application info. Now copy the App ID as indicated in the picture below and save it in a notepad.
5. Come to your website/blog template and paste this come under the <body> tag.
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID&xfbml=1"></script>
6. Replace the YOUR_APP_ID in the code above with your App ID provided from Facebook which you copied in Step 4 and save.
7. Now in your website, where you want the log-in button to be appear copy and paste the code below, into it (in case of blog click on " ADD A GAGDET" on the sidebar or any other location you want to add the button to. From the GADGETS list, choose HTML/JAVASCRIPT. In the title field, you can enter "Login to Facebook" and in the content box, copy and paste the code below, into it).
NOTE: If a visitor to your blog clicks on the "facebook login" button, he/she will not be taken away from your blog. Instead, your blog page will refresh and the "facebook login" button will change to "facebook log out" button.
Only Facebook Log-in Button :
<div style='float:center;'><fb:login-button autologoutlink="True" length="short" background="white" size="large"></fb:login-button> </div>
Facebook Log-in Button with name :
(name will appear after someone log-in)
<div style="text-align: center;">
<h2 class="title">
Hello <fb:name uid="loggedinuser" useyou="false"></fb:name></h2>
</div>
<div style="text-align: center;">
<div style="font-family: "Trebuchet MS",sans-serif;">
<div style="font-family: Verdana,sans-serif;">
<h2 class="title">
<fb:login-button autologoutlink="True" background="white" length="short" size="large"></fb:login-button></h2>
</div>
</div>
</div>
<h2 class="title">
Hello <fb:name uid="loggedinuser" useyou="false"></fb:name></h2>
</div>
<div style="text-align: center;">
<div style="font-family: "Trebuchet MS",sans-serif;">
<div style="font-family: Verdana,sans-serif;">
<h2 class="title">
<fb:login-button autologoutlink="True" background="white" length="short" size="large"></fb:login-button></h2>
</div>
</div>
</div>
Facebook Log-in Button with Name and Profile Photo:
(Name & photo will appear after someone log-in)
<div style="text-align: center;">
<h2 class="title">
Hello <fb:name uid="loggedinuser" useyou="false"></fb:name></h2>
</div>
<div style="text-align: center;">
<div style="text-align: center;">
<h2 class="title">
<fb:profile-pic facebook-logo="true" linked="false" uid="loggedinuser"></fb:profile-pic></h2>
</div>
</div>
<div style="text-align: center;">
<div style="font-family: "Trebuchet MS",sans-serif;">
<div style="font-family: Verdana,sans-serif;">
<h2 class="title">
<fb:login-button autologoutlink="True" background="white" length="short" size="large"></fb:login-button></h2>
</div>
</div>
</div>
<h2 class="title">
Hello <fb:name uid="loggedinuser" useyou="false"></fb:name></h2>
</div>
<div style="text-align: center;">
<div style="text-align: center;">
<h2 class="title">
<fb:profile-pic facebook-logo="true" linked="false" uid="loggedinuser"></fb:profile-pic></h2>
</div>
</div>
<div style="text-align: center;">
<div style="font-family: "Trebuchet MS",sans-serif;">
<div style="font-family: Verdana,sans-serif;">
<h2 class="title">
<fb:login-button autologoutlink="True" background="white" length="short" size="large"></fb:login-button></h2>
</div>
</div>
</div>
You can customize this as you wish. If everything is done as it should & then you click on the log-in button a pop-up windows like this would appear.
It works for WordPress, Blogger, Joomla and any platform or even in simple HTML/pHp webpages. If it works for you, kindly like this post and give comments. If there is any problem then just let me know.
Below here you can experience the whole Log-In thing.
Check-out more services from us - For Hacking tricks : Click here | For Android Tricks : Click here | For How To Do Tutorials : Click here | For Gadget reviews : Click here | For Internet Tricks : Click here | For Windows tricks : Click here. You can like us on Facebook or Follow us in Twitter to stay connected with us.
at the top right of any Facebook page and choose Account Settings.
Posts
![[Your IP address]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vbXnvzb5s8mbZpzJ45JoDDWs3EbyRIhQjjwBaoTm09PABuznURYc7ZEH4rzTRqA4EI4vR86jdOYduw599G34cM2G_ECTC1QTO4my2p=s0-d)
