Web Technology Experts Notes

Showing posts with label Facebook. Show all posts

Wednesday 24 December 2014

Facebook comments Integration in website

Add Following code in your website, Facebook comment will start working.

<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/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-comments" data-colorscheme="light" data-href="http://www.web-technology-experts-notes.in/2014/12/facebook-comments-box-for-website.html" data-numposts="5" width="700"> </div>
See Demo:

You can manage following Options in Facebook Comment Box.
1. data-colorscheme: Color scheme used by the plugin. Can be "light" or "dark".
Option: light|dark

2. data-href: This is comment page URL, you can also add dynamic page URL. Add Website Address bar URL like http://dev.georama.loc/comment.php

3. data-numposts: Total no of comments wants to display at the time of page load.
default:5

4. width: Total widths of facebook comments box
default:550

Friday 5 September 2014

Facebook login with javascript SDK example

Follow the Simple Steps to integrate Facebook Login with javascript SDK in your website, in 10 Mins.

Step: 1
Add Following html in Web Page

<a href="javascript:void(0)" onclick="return fblogin()">Facebook Login</a>

Step: 2
Add Following javaScript function, and get FACEBOOK_APPLICATION_ID from https://developers.facebook.com/.

var myWindow=null;
function fblogin(){
    var appId =FACEBOOK_APPLICATION_ID;/** facebook application id */
    var URLAfterAuth = 'http://www.example.com/ajax/fblogin';/* After authentication go to this page **/
    var str= window.location.href;
    if (myWindow && !myWindow.closed) { //exist and is not closed
        myWindow.close();
        myWindow=null; //delete the object

    }else{            
            myWindow = window.open('https://www.facebook.com/dialog/oauth?redirect_uri='+URLAfterAuth+'&display=popup&response_type=code&client_id='+appId+'&ret=login', 'mywindow','left=100,top=50,width=500,height=500,toolbar=0,resizable=0');                       

    }

}

Step: 3
Add Following script in ajax/fblogin URL

        //Add jQuery File
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <div id="fb-root">
</div>
<script>
             var str= window.location.href;             
            
            window.fbAsyncInit = function() {
                FB.init({
                    appId      : FACEBOOK_APPLICATION_ID                    
                    status     : true, 
                    cookie     : true,
                    xfbml      : true,
                    oauth      : true                    
                });
                FB.Event.subscribe('auth.authResponseChange', function(response) {                    
                    // Here we specify what we do with the response anytime this event occurs. 
                    if (response.status === 'connected') {
                        saveuserdetail();
                    } else if (response.status === 'not_authorized') {                        
                        FB.login();
                    } else {
                        FB.login();
                    }
                })  
  
            };
        
            function saveuserdetail() {                
                FB.api('/me', function(response) {
                    $.ajax({
                        type: "POST",
                         url: '/ajax/register/',/** Facebook will send user detail send in this URL **/
                        data: response,
                        success: function(msg){                            
                            if(msg['login']=='success'){   
                                 window.opener.location.reload();
                                 window.close();
                            }
                        },
                        dataType: 'json'
                    });
                });
            }
            (function(d){
                var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
                js = d.createElement('script'); js.id = id; js.async = true;
                js.src = "//connect.facebook.net/en_US/all.js";
                d.getElementsByTagName('head')[0].appendChild(js);
            }(document));
        </script>        
        Please wait ....

Step: 4
(After Facebook authentication facebook send user to this URL),
URL: ajax/register

print_r($_POST);//Here will have all details

Tuesday 8 April 2014

Facebook User Profile Get Custom Picture of Facebook User

Today, Every one use the Facebook for social networking whether he is Student, Working Women, House wives, IT Professional or Business man etc. Everyone open Facebook account at-least once a day.

Due to huge use of Facebook profiles. All Web application start integrate the Facebook plugins in their websites.
They Start using plugins like Registration, Like plugin, Comment box, Login/Logout functionalists and Chat implement.

Many times, we need to show the Profile pictures of Facebook users in web page. Sometimes you have to show the custom size of profile picture. If there is requirement of showing the custom images of profile user then you are very right place. Here we are giving you lot of example of custom size.

You can show the profile pictures in unlimited sizes. Just fill the height width parameter in URL and your profile picutre is ready. to show the Profile picture you need 1 parameter only and that is UID. UID is user id and facebook users and its unique.

If we have facebook profile Id, then we can get different facebook profile images with the following URLs.

http://graph.facebook.com/[UID]/picture?type=square

https://graph.facebook.com/[UID]/picture?width=[WIDTH]&height=[HEIGHT]

Here [UID] is Facebook Profile Id and [WIDTH]/[HEIGHT] is width/height




Very Small Profile Image(50 X 50)
https://graph.facebook.com/1438566719/picture?width=50&height=50

Profile Thumbnailhttp://graph.facebook.com/1438566719/picture?type=square

Large Profile Image (300 X 300)
https://graph.facebook.com/1438566719/picture?width=300&height=300

Thursday 3 April 2014

Facebook Login with JavaScript

Follow Simple Steps to Integrate "Facebook Login" with JavasScript in your Web Application.

Login in https://www.facebook.com/
"Create a New App" in https://developers.facebook.com/
Fill all required Information
Settings => App PlateForm=>Click on "Website" then add detail
In "Status & Review", Click on "Yes" to activate for public

Get the "App Id" and use in Following Example

<html>
    <head>
        <title>Facebook Login Integration with JavaScript</title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>

        <div id="fb-root">
</div>
<script>
            window.fbAsyncInit = function() {
                FB.init({
                    appId      : 'XXXXXXXX',//your appid
                    status     : true, 
                    cookie     : true,
                    xfbml      : true,
                    oauth      : true                    
                });
                FB.Event.subscribe('auth.authResponseChange', function(response) {                    
                    // Here we specify what we do with the response anytime this event occurs. 
                    if (response.status === 'connected') {
                        saveuserdetail();
                    } else if (response.status === 'not_authorized') {
                        // In this case, the person is logged into Facebook, but not into the app, so we call                        
                        FB.login();
                    } else {
                        // In this case, the person is not logged into Facebook, so we call the login()                         
                        FB.login();
                    }
                })  
  
            };
        
            function saveuserdetail() {
                //console.log('Welcome!  Fetching your information.... ');
                FB.api('/me', function(response) {                    
                    console.log(response.toSource());
                    $.ajax({                        
                        type: "POST",
                        url: '/url_to_save_detail',
                        data: response,
                        success: function(msg){
                        console.log(msg);    
                        },
                        dataType: 'json'
                    });
                });
            }
            (function(d){
                var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
                js = d.createElement('script'); js.id = id; js.async = true;
                js.src = "//connect.facebook.net/en_US/all.js";
                d.getElementsByTagName('head')[0].appendChild(js);
            }(document));
        </script>
        <div class="fb-login-button">
Login with Facebook</div>
</body>
</html>

Facebook Login URL:

https://www.facebook.com/dialog/oauth?redirect_uri=websiteLoginURL&display=popup&response_type=code&client_id=appId&ret=login

websiteLoginURL: After login which page of your website should redirect.
appId: Application Id of facebook.com

Saturday 22 February 2014

Firebase Chat with Facebook and Twitter Integration

FireBase Chat
1). Its Free
2). You can integrate with Facebook/Twitter/Github etc
3) You can manage Chat (Can View/Update/Delete)
4) You can export chat in Json Form
5) API Available

Demo: http://firebase.github.io/firechat/

Tutorial: http://firebase.github.io/firechat/docs/

How to setup firebase chat
1) Register to https://www.firebase.com/
2) Login to your firebase account similar to https://blistering-fire-9888.firebaseio.com/
3) Go to Dashboard=>Simple Account
a) Add list of domains where your chat will be run, (for example localhost, www.example.com)
b) Set "Authentication Providers"
Here you can enable provider (Facebook|Twitter etc)
Enable the checkbox and put the required credentials

For facebook
i) Create a app
ii) In Site URL put "https://auth.firebase.com/auth/facebook/callback"
iii) In "Site and Review", Enable the app for public
iv) Copy your "App ID" and "App Secret" from "Settings" and paste in "firebase.com=>Simple Login=>Facebook"

For Twitter
i) Create a App in twitter.com
URL: https://apps.twitter.com/
ii) In Callback URL set " https://auth.firebase.com/auth/twitter/callback"
iii) Copy "API key" and "API secret" from twitter apps and paste in "firebase.com=>Simple Login=>Twitter" (Twitter Consumer Key,Twitter Consumer Secret)

4) Open Below URL's
http://firebase.github.io/firebase-simple-login/
a) Click on "Launch demo" of Facebook Link
b) Click on "Launch demo" of Twitter Link

Sunday 15 September 2013

Facebook Registration Plugin with Custom Fields

This was plugin removed as of API version 2.0. It will stop working on July 30, 2015.

Apps using this plugin should migrate to Facebook Login.

Facebook Login with JavaScript Example

http://www.web-technology-experts-notes.in/2014/04/facebook-login-integration-with-javaScript.html

Tuesday 6 December 2011

Facebook Social Plugins Integration in Website

Facebook Platform enables you to make your website more social. You can use our Social Plugins, such as the Like Button to drive user engagement with a single line of HTML. Login Button and Registration Plugin let you simplify or eliminate your own user registration and sign-in. Lastly, the Graph API lets you access the full social graph of a given user, allowing you to create a truly deep personal experience.

Social Plugins are the easiest way to get started with Facebook Platform. The plugins are embeddable social features that can be integrated in your site with a line of HTML. Because they are hosted by Facebook, the plugins are personalized for all users who are currently logged into Facebook, even if they are visiting your site for the first time.

Following are the different Facebook Social Plugins.

Facebook Like Button

Send Button

Facebook Comments

Share Button

Like Box

Facebok Social Plugin from where you can get the code and just past into your website.
Each link Socail plugin will give you two codes and are following

JavaScript SDK (include once only)

HTML Code (Must include for each Social plugin)

<div class="fb-like-box" data-colorscheme="light" data-header="true" data-href="https://www.facebook.com/pages/Web-Technology-Experts-Notes/1486091758321940" data-show-border="true" data-show-faces="true" data-stream="false"> </div>

Following are the links from where you can get the HTML tag