Showing posts with label Facebook. Show all posts
Showing posts with label Facebook. Show all posts

Wednesday 6 September 2017

jQuery Autocomplete like Facebook With Demo

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

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?

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:
  1. Facebook Account
  2. Facebook App, If not https://www.facebook.com/help/172925542764476
  3. 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
  1. Choose an URL of a website Page you want to use with the like button.
  2. Code Configurator from https://developers.facebook.com/docs/plugins/like-button#configurator
  3. 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

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.
  1. 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://"
  2. Browser plugin is prevent to load the facebook js
  3. Blocking by Firewalls OR Antivirus
  4. Make sure you put that snippet in the <body></body> and not <head></head>
  5. 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" />