sundh.com » javascript

Post to Facebook with Javascript SDK

Ellen — Tue, 21 Dec 2010 12:55:12 +0000

Posting a message to someones wall can contain the following parameters:

var my_message = ‘This is just a test!’;

var url = ‘http://www.sundh.com/’;

var title = ‘This is the name of my post’;

var desc = ‘Optional description of my link’;

var picUrl = ‘http://www.sundh.com/blog/images/led.jpg’;

To post the following to my wall this javascript code is executed:

FB.api(‘/me/feed’, ‘post’, {message:my_message,link:url,name:title,picture:picUrl,description:desc },

function(response) {

if (!response || response.error) {

alert(‘Error occured’);

} else {

alert(‘Post ID: ‘ + response.id);

}

});

If I decided to not define the parameter “description” the post will grab the text appearing on the URL.

Youtube clip

Posting a YouTube clip to someone’s wall requires a little bit different code in order to be able to play the YouTube clip within Facebook. Note that the URL to the YouTube clip is different from the URL shown in the browser when you watch the clip. Instead of “http://www.youtube.com/watch?v=VIDEO_ID”, it is set to “http://www.youtube.com/v/VIDEO_ID”. The thumbnail of the YouTube clips is easly retreived by accesing the URL “http://img.youtube.com/vi/VIDEO_ID/0.jpg”.

var my_message = ‘My message here’;

var url = ‘http://www.youtube.com/v/VIDEO_ID’;

var title = ‘Title of YouTube clip’;

var desc = ‘Description of YouTube clip’;

var picUrl = ‘http://img.youtube.com/vi/VIDEO_ID/0.jpg’;

The trick that makes the YouTube clip embeddable on Facebook is to add the parameter “source” in you API call to Facebook. The source is the same as the URL to the video clip.

FB.api(‘/me/feed’, ‘post’, {message:my_message,link:url,name:title,picture:picUrl,source:url,description:desc }, function(response) {

      if (!response || response.error) {

        alert(‘Error occured’);

      } else {

        alert(‘Post ID: ‘ + response.id);

      }

    });

The result looks like this:

How to urlencode your XMLHttpRequest request

Ellen — Tue, 28 Sep 2010 12:04:58 +0000

I had problems getting characters like +@*/ to work by posting them with a XMLHttpRequest. The escape method in javascript does not suppert characters like this so I had to use encodeURIComponent and urlencode each one of my parameters. The next step in PHP was to turn characters like åäö into upper case. There are several ways of converting these characters to upper case in php but I found the easiest way was to convert them in JavaScript before sending them to PHP.

var name = document.getElementById(”name”);
var url = document.getElementById(”url”);

var params = “name=” + encodeURIComponent(name.value.toUpperCase()) + “&url=” + encodeURIComponent(url.value);
var url = “generate.php”;
xmlhttp.open(”POST”,url,true); //calling testing.php using POST method
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader(”Content-type”, “application/x-www-form-urlencoded”);
xmlhttp.setRequestHeader(”Content-length”, params.length);
xmlhttp.setRequestHeader(”Connection”, “close”);
xmlhttp.send(params);

Facebook Connect: No server-side needed

Ellen — Fri, 15 Jan 2010 16:27:44 +0000

With the Facebook Connect API comes javascript functionality. This means no server-side scripting needed. You can create your application on Facebook and connect to it from your website thought javascript. Use the API Key and Secret Key to connect to you application. Make sure your callback URL is set on Facebook to be the URL of the page you are connecting from.

Create your customized Facebook Connect login button through this wizard. Paste in the code into your site.

Enabling calls to the javascript API on Facebook:

Generating the login button on your site:

The Facebook Connect login will appear in a pop-up window. When successfully logged in, the window closes and your main page reloads.

The output
In the Javascript function FB.ensureInit you can then put in your API calls and generate your HTML from that. Below is an example of showing selected information from a user’s profile.