Showing posts with label facebook. Show all posts
Showing posts with label facebook. Show all posts

Tuesday, 22 October 2013

Like button of facebook using javascript SDK

Facebook Like Button implementation 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=your_API_id";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
//like button
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="16" data-height="16" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false">
</div>

Post on Facebook using javascript SDK


Post On facebook using javascript SDK

below id the code to create comment box on you page to post the comment on facebook page just you need to put your page facebook pageid/appid where you want to post the comment.

<script type=&quot;syntaxhighlighter&quot; class=&quot;brush: csharp&quot;>
<![CDATA[
function postOnFB()
{
      window.fbAsyncInit = function() {
   FB.init({
   // window.location.reload();console.log(response);    FB.getLoginStatus(function(response) {      appId: ' YOUR APP ID ',
   xfbml: true,
   status: true,
   cookie: true,
   oauth: true,
    channelUrl : 'CHANNEL URL / REDIRACT URL', // Channel File
});


FB.Event.subscribe("auth.authResponseChange", function(response) {
    });
      if (response && response.status == 'connected') {   

           FB.api('/me', function(response) {
      });
   
        } else if (response.status === 'not_authorized') {
      } else {
      }
     
     });
  
 };

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

      FB.login(
                function(response) {
                    if (response.authResponse) {
                    var access_token = FB.getAuthResponse()['accessToken'];
                    console.log("token:==>");
                    console.log(access_token);
                    FB.api(
                    'me/photos',
                    'post', {
                    name:"My Post",
                    message: 'here is yor post message',
                    status: 'success',
                    access_token: access_token,
                    url:$("#myimage").attr("src");    /// yourimage url is here
                    },
                    function(response) {
                        if (!response || response.error) {
                        console.log(response);
                        alert('Error occured:' + response);
                        } else {
                        // document.getElementById('imguploadheader').innerHTML="Status";
                        alert(Sucessfully posted);
                        }
                    });
                    } else {
                    errordisplay();
                    $("#appendtext").html(
                    "User cancelled login or did not fully authorize.");
                    $("#uploadingpregress")
                    .css("display","none");
                    successfullyupload();

                    }
                }, {
                scope: 'user_photos,photo_upload,publish_stream,offline_access'
          });
}
]]></script>

Facebook login using javascript SDK

 FACEBOOK Login Example

index.html  /// 

<html><body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
  FB.init({
      appId: '490986011016528', // App ID
      channelUrl: 'http://localhost:8000/', // Channel File
      status: true, // check login status
      cookie: true, // enable cookies to allow the server to access the session
      xfbml: true  // parse XFBML
  });
        
FB.Event.subscribe('auth.authResponseChange', function(response) 
{
   if (response.status === 'connected') 
   {
   document.getElementById("message").innerHTML +=  "<br>Connected to Facebook";
   //SUCCESS
       }  
else if (response.status === 'not_authorized') 
{
     document.getElementById("message").innerHTML +=  "<br>Failed to Connect";
//FAILED
        } 
else 
  { document.getElementById("message").innerHTML +=  "<br>Logged Out";
       //UNKNOWN ERROR
      }
});
    };
    
    function Login(){
FB.login(function(response) {
   if (response.authResponse) 
{
     getUserInfo();
    }
 else 
{
         console.log('User cancelled login or did not fully authorize.');
    }
 },
   {scope: 'email,user_photos,user_videos'});
}
  function getUserInfo() {
    FB.api('/me', function(response) {
  var str="<b>Name</b> : "+response.name+"<br>";
     str +="<b>Link: </b>"+response.link+"<br>";
     str +="<b>Username:</b> "+response.username+"<br>";
     str +="<b>id: </b>"+response.id+"<br>";
     str +="<b>Email:</b> "+response.email+"<br>";
     str +="<input type='button' value='Get Photo' onclick='getPhoto();'/>";
     str +="<input type='button' value='Logout' onclick='Logout();'/>";
     document.getElementById("status").innerHTML=str;         
    });
    }
function getPhoto()
{
  FB.api('/me/picture?type=normal', function(response) {
  var str="<br/><b>Pic</b> : <img src='"+response.data.url+"'/>";
     document.getElementById("status").innerHTML+=str;
    });
}
function Logout()
{
FB.logout(function(){document.location.reload();});
}
  // Load the SDK asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
<div align="center">
<h2>Facebook OAuth Javascript Demo</h2>
<div id="status">
 Click on Below Image to start the demo: <br/>
<img src="http://hayageek.com/examples/oauth/facebook/oauth-javascript/LoginWithFacebook.png" style="cursor:pointer;" onclick="Login()"/>
</div>
<br/><br/><br/><br/><br/>
<div id="message">
Logs:<br/>
</div>
</div>
</body>
</html>
 
channel.html  /// 
 
<script src="//connect.facebook.net/en_US/all.js"></script>