Latest Updates: javascript RSS

  • Post to Facebook with Javascript SDK

    Ellen 13:55 on December 21, 2010 | 0 Permalink
    Tags: , , javascript,

    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.
    facebook_post

    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:
    facebook_youtube

  • How to urlencode your XMLHttpRequest request

    Ellen 13:04 on September 28, 2010 | 0 Permalink
    Tags: ajax, encodeURIComponent, javascript,

    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 17:27 on January 15, 2010 | 1 Permalink | Reply
    Tags: , javascript

    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:

    <script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/sv_SE” type=”text/javascript”></script>

    Generating the login button on your site:

    <fb:login-button v=”2″ size=”medium” onlogin=”window.location.reload(true);”>Log in to Facebook Connect</fb:login-button>

    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.

    <script type=”text/javascript”>
    var widget_div = document.getElementById(”profile_pics”);
    FB.ensureInit(function () {
    FB.Facebook.get_sessionState().waitUntilReady(function() {
      var session = FB.Facebook.apiClient.get_session();
      FB.Facebook.apiClient.users_getInfo([session.uid], ["about_me","books","interests","movies","music",
    "religion","tv","quotes","education_history","political","sex","meeting_for"],
    function(result) {
      var markup = “”;
      for(var o in result[0]) {
      markup += “<br>” + o + ” : ” + result[0][o];
    }
    widget_div.innerHTML = markup;
    FB.XFBML.Host.parseDomElement(widget_div);
    });
    });
    });
    </script>

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
esc
cancel