Web Technology Experts Notes

Showing posts with label Facebook. Show all posts

Wednesday, 6 September 2017

jQuery Autocomplete like Facebook With Demo

jQuery facebook autocomplete live demo

Following are the code snippet example for Autocomplete (similar the facebook autocomplete).

Code Example:

<link charset="utf-8" href="//www.emposha.com/demo/fcbkcomplete_2/style.css" media="screen" rel="stylesheet" type="text/css"></link>
        <script charset="utf-8" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js" type="text/javascript"></script>
        <script charset="utf-8" src="//www.emposha.com/demo/fcbkcomplete_2/jquery.fcbkcomplete.js" type="text/javascript"></script>

        <h1>
JQuery Autocomplete similar to facebook</h1>
<div id="text">
</div>
<form accept-charset="utf-8" action="submit.php" method="POST">
<select id="select3" name="select3">
                <option class="selected" value="sleep">sleep</option>
                <option value="sport">sport</option>
                <option value="freestyle">freestyle</option>
            </select>
            <br />
<input type="submit" value="Send" />
        </form>
<script type="text/javascript">
          /** json_url data **/
        var jsonData=[{"key": "hello world", "value": "hello world"}, {"key": "movies", "value": "movies"}, {"key": "ski", "value": "ski"}, {"key": "snowbord", "value": "snowbord"}, {"key": "computer", "value": "computer"}, {"key": "apple", "value": "apple"}, {"key": "pc", "value": "pc"}, {"key": "ipod", "value": "ipod"}, {"key": "ipad", "value": "ipad"}, {"key": "iphone", "value": "iphone"}, {"key": "iphon4", "value": "iphone4"}, {"key": "iphone5", "value": "iphone5"}, {"key": "samsung", "value": "samsung"}, {"key": "blackberry", "value": "blackberry"}]
        /** json_url data **/
        
            $(document).ready(function(){                
                $("#select3").fcbkcomplete({
                    json_url: "http://www.emposha.com/demo/fcbkcomplete_2/data.txt",// This must be in your server
                    addontab: true,                   
                    maxitems: 2,
                    height: 2,
                    cache: true
                });
            });
        </script>
        
        <div id="testme">
</div>

Wednesday, 20 July 2016

How to embed muted youtube video with autoplay

Question:How to Embed muted youtube video with autoplay?

<iframe allowfullscreen="" frameborder="0" height="300px" id="ytplayer" src="https://www.youtube-nocookie.com/embed/2gcfHpGpsOw?rel=0&amp;enablejsapi=1&amp;autoplay=1&amp;controls=1&amp;showinfo=0&amp;loop=1&amp;iv_load_policy=3" type="text/html" width="400px"></iframe>
<script>
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    player.mute();
    player.playVideo();
}    
    </script>

Question:How to Embed muted youtube video without autoplay?

<iframe allowfullscreen="" frameborder="0" height="300px" id="ytplayer" src="https://www.youtube-nocookie.com/embed/2gcfHpGpsOw?rel=0&amp;enablejsapi=1&amp;autoplay=0&amp;controls=1&amp;showinfo=0&amp;loop=1&amp;iv_load_policy=3" type="text/html" width="400px"></iframe>
<script>
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    player.mute();
    player.playVideo();
}    
    </script>

Demo

Friday, 24 June 2016

How to integrate facebook like button in website?

Question: What is facebook like button?
Facebook give an embed code for like button, when you embed code this code people can like your page with this. They can also view friends who already have like your page.

Question: What are the requirement for facebook like button?
You must have following:

Facebook Account
Facebook App, If not https://www.facebook.com/help/172925542764476
An Website where you will you will embed the code.

Question: How to get embed code for like button?
Open https://developers.facebook.com/docs/plugins/like-button and follow below steps

Choose an URL of a website Page you want to use with the like button.
Code Configurator from https://developers.facebook.com/docs/plugins/like-button#configurator
Click on "Get Code" and past the code in website

Question: Give the sample code of Facebook like button?

<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.6&appId=508427595967225";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-action="like" data-href="http://www.web-technology-experts-notes.in" data-layout="standard" data-share="true" data-show-faces="true">
</div>

Output

Friday, 10 June 2016

How to add multiple og image tag for open graph API

Just use the og:image multiple times.
See Example below:

<meta property='og:url' content='http://www.web-technology-experts-notes.in/' />
<meta property='og:title' content='Web technology experts notes' />
<meta property='og:description' content='Web technology experts notes' />
<meta property='og:site_name' content='http://www.web-technology-experts-notes.in/' />
<meta property='og:type' content='website' />
<meta property='og:image' content='http://img.youtube.com/vi/EwznozFWcTs/mqdefault.jpg' />
<meta property='og:image' content='http://img.youtube.com/vi/Dg_IN8jAoag/mqdefault.jpg' />
<meta property='og:image' content='http://img.youtube.com/vi/LauTDyg2ovg/mqdefault.jpg' />
<meta property='og:image' content='http://img.youtube.com/vi/1WOO2kT-ryE/mqdefault.jpg' />

Friday, 18 March 2016

Facebook SDK does not loading all.js

Facebook SDK doesn't loading and its getting failed

//connect.facebook.net/en_US/all.js

Facebook SDK is NOT Loading properly OR Facebook Login is not working in Few system, Might cause following reasons.

Are you including JS with http OR https like below:
```
http://connect.facebook.net/en_US/all.js
 OR
https://connect.facebook.net/en_US/all.js
```
If Yes, remove the "http:" OR "https://"
Browser plugin is prevent to load the facebook js
Blocking by Firewalls OR Antivirus
Make sure you put that snippet in the and not
facebook APPLICATION id is in-correct.

Not Yet Fixed, Then below Code.


<script>
    function statusChangeCallback(response) {
        console.log('ok');
        if (response.status === 'connected') {
            console.log('You are login successfuly');
        } else if (response.status === 'not_authorized') {
            FB.login();
        } else {
            FB.login();
        }
    }

    // This function is called when someone finishes with the Login
    // Button.  See the onlogin handler attached to it in the sample
    // code below.
    function checkLoginState() {
        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });
    }

    window.fbAsyncInit = function() {
        FB.init({
            appId: 'FACEBOOK_APP_ID',
            cookie: true, // enable cookies to allow the server to access 
            // the session
            xfbml: true, // parse social plugins on this page
            version: 'v2.2' // use version 2.2
        });

        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });

        FB.login(function(response) {
            if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                FB.api('/me', function(response) {
                    console.log(response);//Here you have login details
                    document.getElementById('loginId').style.display = 'none';
                    document.getElementById('alreadyLogin').style.display = 'block';

                });
            } else {
                document.getElementById('loginId').style.display = 'block';
                document.getElementById('alreadyLogin').style.display = 'none';
            }
        });

    };

    // Load the SDK asynchronously
    (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";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script> 
<input id="loginId" onclick="checkLoginState()" style="display: none;" type="button" value="Click To Login in Facebook" />
<input id="alreadyLogin" style="display: none;" type="button" value="Already Login in Facebook" />

Tuesday, 11 August 2015

How to logout from facebook with javascritp SDK - FB.logout

Following are code snippets to logout from Facebook:

<script>window.fbAsyncInit = function() {
                FB.init({
                    appId      : "FACEBOOK_APPLICATION_ID", 
                    status     : true, 
                    cookie     : true,
                    xfbml      : true,
                    oauth      : true                    
                });
                FB.getLoginStatus(function(response) {
                if (response && response.status === 'connected') {
                    FB.logout(function(response) {
                       /** Afer logout, Refresh the Page **/ 
                       console.log('Logout Successfully.');
                       document.getElementById('currentStatus').innerHTML='Logout from facebook Successfully.';
                       //document.location.href='/';
                       /** Afer logout, Refresh the Page **/                        

                    });
                }else{
                    //document.location.href='/';                    
                    document.getElementById('currentStatus').innerHTML='You are NOT LOGIN in Facebook.';
                    console.log('You are not login in Facebook.')
                }
            });


            }; 

            (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>
        <h2 id="currentStatus">
Please wait...</h2>

Tuesday, 26 May 2015

Facebook SDK javascript - Facebook Login Check, Get Login Details, Share URL and POST to Profile

Add following javascript code which are Responsible for load javascript SDK.

window.fbAsyncInit = function() {
    FB.init({
        appId      : FB_APP_ID, 
        cookie     : true,
        xfbml      : true,                    
        version    : 'v2.3'
    });

}; 
(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));

Please don't forget to replace the "FB_APP_ID" with facebook API Id.

Add following javascript code which will leverage the functionality like Login check, login details, Share URL and Post to facebook.

function fbLogin(){
    FB.getLoginStatus(function(response) {
     if (response.status === 'connected') {
       console.log('You are login in FB.');
     }
     else {
       FB.login();
     }
   });

}
function fbLoginDetails(){                
    FB.api('/v2.2/me?fields=name,email,location,gender,birthday', function(response) {                   
        console.log(response.toSource());                    
    });
}

function fbShareURL(){
    FB.ui(
        {
         method: 'share',
         href: 'http://www.web-technology-experts-notes.in/2013/09/Facebook-Registration-Plugin-with-Custom-Fields.html'
       }, function(response){   }); 
}

function fbPostURL(){
    FB.ui({
        method: 'share_open_graph',
        action_type: 'og.likes',
        action_properties: JSON.stringify({
         object:'http://www.web-technology-experts-notes.in/2013/09/Facebook-Registration-Plugin-with-Custom-Fields.html',
        })
       }, function(){})

}

Add following HTML code which will create button on which click functionality will work.

<a class="button-facebook" href="javascript:fbLogin()">Facebook Login Check</a>
        <a class="button-facebook" href="javascript:fbLoginDetails()">Facebook Get Login Details</a>

        <a class="button-facebook" href="javascript:fbShareURL()">Facebook Share URL</a>
        <a class="button-facebook" href="javascript:fbPostURL()">Facebook POST URL</a>

Tuesday, 19 May 2015

Facebook Login Integration - Multiple Facebook IDs for the same user[Solved]

I have facebook login integration in my website - Its working fine.

When Facebook user first time comes in website, I register the facebook user with my website and login him successfully.
When same Facebook user comes back and login to website, then i login him in my website because he is returning user and his entity is already in database.

How I was checking Returning OR New user.
1. When user register with website, facebook return following details.

Array
(
    [id] => 1421305244855173
    [first_name] => Arun
    [gender] => male
    [last_name] => Kumar
    [link] => https://www.facebook.com/app_scoped_user_id/1421305244855173/
    [locale] => en_US
    [name] => Arun Kumar
    [timezone] => 5.5
    [updated_time] => 2015-04-23T09:57:26+0000
    [verified] => false    
)

2. I add facebook Id(here Id is 1421305244855173), in my database along with other user details.
3. Login him successfully.
4. When same user come back in website, I check the "facebook Id" in database.
5. If "facebook Id" does not exist in database, create account and login him successfully [New facebook user].
6. If "facebook Id" exist in database, login him successfully [Returning facebook user].

I have login login integration from below links:
http://www.web-technology-experts-notes.in/2014/09/facebook-login-with-javascript-sdk-example.html

Now Problem:
If same user login from web application and android application.
It add two different records in database which is not expecting.
Expection is "It must have single records" in database.

My finding are below:
1) Facebook gives different "facebook id" when same user login from web application and login from "Android Application".
2) Facebook gives different "facebook Id" when user using different version of facebook APIs (V1 and V2).

Why this is happing:
When Facebook giving two different Ids for same facebook user, It means
One "facebook id" is "Global Ids"
Second one is "App Scoped ID"

For More details check: https://developers.facebook.com/docs/apps/changelog#v2_0_graph_api

Solution
You need "Mapping the same user across multiple apps" by doing this issue will be fixed.

For this, you need need to create "Business Manager Account" in facebook Apps.

How to create Business Manager Account:
https://developers.facebook.com/docs/apps/business-manager#create-business

After doing setup, you will be able to get the "token_for_business", which will be same for one user across all apps.
How to get token_for_business in javascript.

FB.api('/me?fields=token_for_business', function(response) {
    console.log(response);
});

For More Details: https://developers.facebook.com/docs/apps/for-business

Sunday, 12 April 2015

Share count and Share URL of Facebook, Twitter, LinkedIn and Pinterest

Share count and Share URL of Facebook, Twitter, LinkedIn and Pininterest.

Share Count: There are different free api to get the share count of Facebook, Twitter, Linkedin and Pininterest. These number number of counts by all users.

Facebook Share (33)

http://graph.facebook.com/?id=http://www.web-technology-experts-notes.in

Response:

{
   "id": "http://www.web-technology-experts-notes.in",
   "shares": 33
}

Twitter Share (7)

https://share.yandex.ru/gpp.xml?url=http://www.web-technology-experts-notes.in

Response:

"20"

Linkedin Share (6)

 https://www.linkedin.com/countserv/count/share?format=json&url=http://www.web-technology-experts-notes.in

Response:

 {"count":6,"fCnt":"6","fCntPlusOne":"7","url":"http:\/\/www.web-technology-experts-notes.in"}

Pinterest Share (0)

 http://api.pinterest.com/v1/urls/count.json?callback=x&url=http://www.web-technology-experts-notes.in

Resonse:

 x({"url":"http://www.web-technology-experts-notes.in","count":0})

Share URL:Each Social Services (Facebook, Twitter, Linkedin and Pininterest), have its own sharing URL and its work on all global browsers.

Facebook Share (33)

http://www.facebook.com/sharer.php?u=http://www.web-technology-experts-notes.in

Twitter Share (7)

http://www.twitter.com/share?url=http://www.web-technology-experts-notes.in

Pinterest Share (0)

http://pinterest.com/pin/create/button/?media=http://www.web-technology-experts-notes.in

Linkedin Share (6)

http://www.linkedin.com/cws/share?url=http://www.web-technology-experts-notes.in

Share on Twitter with Custom Text

https://twitter.com/intent/tweet?text=this%20is%20custom%20text&url=web-technology-experts-notes.in

Share on Twitter with Custom Text and Via

https://twitter.com/intent/tweet?text=this%20is%20text&via=this_is_via&url=http://www.domain.com

Thursday, 19 March 2015

Disable facebook notification popup after Click on Facebook Like Button

I use following code to show the "Facebook Like Button" in my Web Page.

Added following code in Header
<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>

Added Following code where "show the Facebook Like Button"

<div class="fb-like" data-action="like" data-href="http://www.web-technology-experts-notes.in/2011/12/facebook-social-plugin.html" data-layout="standard" data-share="false" data-show-faces="true" style="height: 19px; overflow: hidden;"> </div>

When Someone click on "Facebook Like Button" It shows the following popup. See Below:

Now, I want to disable this facebook popup. Means, If someone click on "Facebook Like Button" I must not show the Popup.

Solution:
Replace the Following code

<div class="fb-like" data-action="like" data-href="http://www.web-technology-experts-notes.in/2011/12/facebook-social-plugin.html" data-layout="standard" data-share="false" data-show-faces="true"> </div> With <div class="fb-like" data-action="like" data-href="http://www.web-technology-experts-notes.in/2011/12/facebook-social-plugin.html" data-layout="standard" data-share="false" data-show-faces="true" style="height: 19px; overflow: hidden;"> </div>

Note: you can increase/decrease the height as per design.

Tuesday, 24 February 2015

How to share Embed youtube video on facebook From my website

Following are two steps

1. Get video-code from YouTube URL video URL
Suppose you have following youtube video.

https://www.youtube.com/watch?v=adn45xIFa4g

Now get the video-Code i.e adn45xIFa4g from YouTube URL.

2. Update the following meta tags (fill Video Code)
<meta property="og:title" content="How to share Embed youtube video on facebook From my website" />
<meta property="og:description" content="How to share Embed youtube video on facebook From my website" />
<meta property="og:url" content="http://www.web-technology-experts-notes.in/2015/02/how-to-share-embed-youtube-video-on-facebook-from-my-website.html" />
<meta property="og:type" content="video" >
<meta property="og:image" content="http://i1.ytimg.com/vi/adn45xIFa4g/maxresdefault.jpg" />
<meta property="og:video" content="http://www.youtube.com/e/adn45xIFa4g" />
<meta property="og:video:height" content="268" />
<meta property="og:video:width" content="480" />


<meta property="og:url:secure_url" content="http://www.web-technology-experts-notes.in/2015/02/how-to-share-embed-youtube-video-on-facebook-from-my-website.html" >
<meta property="og:image:secure_url" content="https://i1.ytimg.com/vi/adn45xIFa4g/maxresdefault.jpg" />
<meta property="og:video:secure_url" content="https://www.youtube.com/e/adn45xIFa4g" >


3. Paste the above meta tags before the closing of head tag (</head>)

Monday, 16 February 2015

How to Find a Facebook Profile From an Image URL

Suppose you have following Profile Picture.

Following is URL of above Image
http://graph.facebook.com/1438566719/picture?type=square

In this Profile Image URL, there is Id i.e. 1438566719. This is Facebook Profile ID.
From this facebook ID, we can get the facebook profile URL.

Following is facebook profile URL.
http://facebook.com/1438566719

You will set it will automatic redirect to https://www.facebook.com/arun.compute.

In Facebook, every things have ID whether it is profile URL, Page OR APP.
when you open http://facebook.com/[ID_NUMBER], It wil be automatic redirect to its specific page.

Wednesday, 11 February 2015

How to integrate Facebook open Graph API in Website

In April of 2010, Facebook launched Open Graph API. Open Graph API let's you get website information & post on facebook.com. It helps to share your website information globally through facebook.com.

When it was launched within a week around 50,000 website integrate the Facebook Open Graph API. With use of Open Graph API, we can published/post/submit your website's page/article/video on facebook.com and your content will start displaying in Facebook.com

To implement Open Graph API in website, there are two steps and are following.

Step No 1
How to create App in Facebook:
A. Login Facebook, go to the Developers page (https://developers.facebook.com/).
B. Click "Set up a new app" button on the top right corner.
C. Give a name to your new App, "agree" to Facebook terms and conditions, then click on "Create app".
D. Go to Web Site tab, fill up Site URL and Site Domain.
E. Note down the "Application ID" which we will use in Meta Tags.

Step No 2
Following are Different Meta Tags of Open Graph API which you can add in your Website

<meta content='508427595967225' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='http://www.web-technology-experts-notes.in/2014/12/facebook-comments-integration-in-website.html' property='og:url'/>
<meta content='Facebook comments Integration in website' property='og:title'/>
<meta content='article' property='og:type'/>
<meta content='Web Technology Experts Notes' property='og:site_name'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwY-LposUHaskiINc04SYtH2iOmaZoqTTtxnZIK3eDejPPH2V_h1MiBT6Mo9yCzKY9tWfbv0vkuR6g9sFZYmTsMUN_xSatoMayqDAwWS6BxoemOkV05fIyFCo3OsPhTsgPuz-ZbRr52A0/s72-c/facebook+comment+box.png' property='og:image'/>
<meta content='The Comments box lets people comment on your site with Facebok. Add Facebook comments box for you blogger, Generic website, Ecommerce website etc.in few seconds with dynamic URL.' property='og:description'/>


Want to check your Meta tags on facebook.com:
https://developers.facebook.com/tools/debug/ (This need Fb Login)

Need More info, check offical facebook page:
https://developers.facebook.com/docs/opengraph/getting-started

Wednesday, 28 January 2015

How to clear Facebook image cache

Following are way to clear the facebook's image from cache.
Step 1, Update the Image URL with version in Meta Tags
<meta content="http://www.aboutcity.net/images/web-technology-experts-notes.jpg?v=12" property="og:image"/>

Step 2:
A) Go to https://developers.facebook.com/tools/debug/
B) Enter URL and Press "Debug" Submit button
C) Click On "Show existing scrape information", It will remove the caching
D) Check the updated image

Following is Screenshot which explain, how to clear the Image Cache?

Subscribe to: Posts ( Atom )

Wednesday, 6 September 2017

Best Related Posts are Following:

Wednesday, 20 July 2016

Best Related Posts are Following:

Friday, 24 June 2016

Best Related Posts are Following:

Friday, 10 June 2016

Best Related Posts are Following:

Friday, 18 March 2016

Best Related Posts are Following:

Tuesday, 11 August 2015

Best Related Posts are Following:

Tuesday, 26 May 2015

Best Related Posts are Following:

Tuesday, 19 May 2015

Best Related Posts are Following:

Sunday, 12 April 2015

Best Related Posts are Following:

Thursday, 19 March 2015

Best Related Posts are Following:

Tuesday, 24 February 2015

Best Related Posts are Following:

Monday, 16 February 2015

Best Related Posts are Following:

Wednesday, 11 February 2015

Best Related Posts are Following:

Wednesday, 28 January 2015

Best Related Posts are Following: