Wednesday 23 July 2014

How to Schedule a post to Facebook page using Javascript

Hi Guys,
For the past 2 days i am wondering how to schedule a post and schedule photo/video to Facebook page from our websites using JavaScript. Finally i got the solution for that.
Lets see how to implement that using JavaScript.

Step 1:
For implementing Facebook related stuff, first we need to create an Facebook App.
You can refer my previous post for creating an app in Facebook.
http://oraclejavazone.blogspot.com/2014/05/how-to-create-app-in-facebook-with-user.html

Step 2:
Load your JavaScript SDK in your JSP file.
You can refer my previous post for loading Facebook JavaScript SDK.
http://oraclejavazone.blogspot.com/2014/07/how-to-create-facebook-login-for-web.html

Step 3:
We need to get the Page Access Token for posting to Facebook page. For that we need to get the page access token once page owner get logged in to Web using Facebook App.
In previous post i explained how to get the user details when user get logged in. So instead of getting user details here we need to get the page access token. Follow the below code to get the Page Access token using FB.api() method.

var Access_Token;
FB.api('/me/accounts', function(response){
          Access_Token = response.data[0].access_token; //from the response pick the first data.
          console.log("Access Token:"+Access_Token); //getting page access token
          var p_name = response.data[0].name; // getting page name
          console.log(p_name);
          });

Once you get the Page Access Token use that for posting to your Facebook Page.

Step 4:
Now Schedule a post to Facebook. For Scheduling you need scheduled_publish_time="unixtime" and published="false" as parameter with Graph API URL request.

FB.api('/your pageid/feed', 'post',
{ 'message': Your message, 'scheduled_publish_time':unixtime ,'published': false,
           'access_token':Your PageAccessToken }, function(response) {
  if (!response && response.error) {
    //handle the response
  }
});

Use Unix time-stamp for scheduling post to Facebook, Facebook accept only Unix time-stamp. The time-stamp should be in between 10 minutes to 6 months.
For information on Unix time-stamp refer http://www.unixtimestamp.com/index.php
Instead of hard-coding the time-stamp use Calender for getting the time. Get the time from calender then convert it to Unix time-stamp.

Step 5:
If you are scheduling photo/video to facebook page, you need to use Ajax or XML HTTP request Object with Multipart File Upload. Because FB.api method doesn't support for uploading photo/video from your system. For information on Form data refer
https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
So lets see how to schedule photo/video to facebook page using XML HTTP request Object.

oReq.open("POST", "https://graph.facebook.com/your page id/photos?access_token="+Page AccessToken+"&scheduled_publish_time="+unixtime+"&published=false",true);

For videos use page-id/videos. Once you schedule the post you will get object_id of the post. Once your post get posted successfully on your facebook page you will get notification from facebook.
Note: Only Facebook Page owner can schedule the post on page. Page users cant able to do this.

That's All Folks.

Monday 21 July 2014

How to Create a Facebook Login for WEB using JavaScript SDK

Hi Guys,
Lets see how to create Facebook login in your website using JavaScript SDK

Step 1:
For implementing Facebook related stuff, first we need to create an Facebook App.
You can refer my previous post for creating an app in Facebook.
http://oraclejavazone.blogspot.com/2014/05/how-to-create-app-in-facebook-with-user.html

Step 2:
Load your JavaScript SDK in your JSP file. You can load SDK either Synchronously or Asynchronously.
I am loading the SDK Asynchronously.
Add the below code after opening <body> tag in your JSP file.

<div id="fb-root"></div>
<script>
var AccessToken;

window.fbAsyncInit = function() {
FB.init({
        appId: 'your app id',
        xfbml: true, //for parsing social plugins
        status: true, //for getting user status
        cookie: true, //save cookie
        version:'v2.0' //version of graph API
      });
   
FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
};

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


  //checking login status of user
 function statusChangeCallback(response) {

        if(response && response.status == 'connected') {
          alert('User is authorized');
         AccessToken = response.authResponse.accessToken; //Get the user access token from the auth                         //response
         console.log('Welcome!  Fetching your information.... ');
         FB.api('/me', function(response) {
               console.log('Good to see you, ' + response.name + '.' +  response.id);
         });
         console.log(AccessToken);
       } else {
         alert('User is not authorized');
       }
}

 function checkLoginState() {
   FB.getLoginStatus(function(response) {
     statusChangeCallback(response);  });
 }
</script>

For more details refer https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.0

Step 3:
Create the Facebook Login Button using <fb:login-button>.
Add the below code to your JSP file.

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();" autologoutlink="true">
</fb:login-button>


  • scope="public_profile,email" used to retrieve the data's that you wish to get from Facebook once user get logged in successfully.
  • autologoutlink="true" enable log out button once user logged in to your website using Facebook.
While running the code open browser console finding the user id and name of the user.

That's All Folks...