{"id":978,"date":"2010-09-16T16:41:48","date_gmt":"2010-09-16T20:41:48","guid":{"rendered":"http:\/\/cd34.com\/blog\/?p=978"},"modified":"2010-09-16T16:53:01","modified_gmt":"2010-09-16T20:53:01","slug":"facebooks-javascript-sdk-and-a-short-one-page-application","status":"publish","type":"post","link":"https:\/\/cd34.com\/blog\/framework\/facebooks-javascript-sdk-and-a-short-one-page-application\/","title":{"rendered":"Facebook&#8217;s Javascript SDK and a short one page application"},"content":{"rendered":"<p>While discussing a project with a client it occurred to me that perhaps you don&#8217;t need to get too complex to do something simple.  Since using Facebook almost mandates that your surfer has Javascript enabled, we should be able to write a very simple application that posts to someone&#8217;s wall after asking for the &#8216;publish&#8217; permission.  After reading the documentation and looking through a few github repositories, the solution was quite simple.<\/p>\n<p>While this code doesn&#8217;t use the non-blocking async javascript method, it is a good example.  I&#8217;ve seen others that use the inline publish, but, for some reason I couldn&#8217;t get it to consistently open a dialog box rather than a popup &#8211; which Chrome conveniently blocked.  I also ran into an issue that Facebook appears to aggressively cache objects that don&#8217;t explicitly set an expire time.  While I find that acceptable for the application&#8217;s long term goals, it did make debugging a slightly frustrating experience.<\/p>\n<p>To try the application, <a href=\"http:\/\/apps.facebook.com\/onepageapp\/\">http:\/\/apps.facebook.com\/onepageapp\/<\/a>.  A direct link to the code is available at <a href=\"http:\/\/fbapp.cd34.com\/opa\/index.txt\">http:\/\/fbapp.cd34.com\/opa\/index.txt<\/a>.<\/p>\n<pre>\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xmlns:fb=\"http:\/\/www.facebook.com\/2008\/fbml\"&gt;\r\n    &lt;head&gt;\r\n        &lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"\/&gt;\r\n        &lt;title&gt;One Page App&lt;\/title&gt;\r\n    &lt;\/head&gt;\r\n    &lt;body&gt;\r\n&lt;div id=\"fb-root\"&gt;&lt;\/div&gt;\r\nThanks for clicking.  This is just a test to make sure that the application\r\nworks as expected.\r\n&lt;p&gt;\r\nYou can skip posting to the wall if you would like.\r\n&lt;script src=\"http:\/\/connect.facebook.net\/en_US\/all.js\"&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\nappid = '154516391233318';\r\nname = 'One Page App';\r\ncaption = 'A single page application designed to test whether it could be done';\r\ndescription = 'A quick page that allows you to post to someone\\'s wall';\r\nhref = 'http:\/\/apps.facebook.com\/onepageapp\/';\r\nuser_message_prompt = 'Post a sample to your wall';\r\nmessage = 'Let\\'s do a sample post to the wall.';\r\naction_text = 'Get the code';\r\naction_href = 'http:\/\/fbapp.cd34.com\/opa\/index.txt';\r\n\r\nFB.init({appId  : appid, status : true, cookie : true, xfbml  : false });\r\nFB.getLoginStatus(function(response) {\r\n  if (response.session) {\r\n    FB.ui(\r\n      {\r\n        method: 'stream.publish',\r\n        display: 'dialog',\r\n        message: message,\r\n        attachment: {\r\n          name: name,\r\n          caption: caption,\r\n          description: description,\r\n          href: href\r\n        },\r\n        action_links: [\r\n          { text: action_text, href: action_href }\r\n        ],\r\n        user_message_prompt: user_message_prompt\r\n      },\r\n      function(response) {\r\n        self.location.href='\/opa\/thanks.html';\r\n      }\r\n    );\r\n  } else {\r\n    top.location.href='https:\/\/graph.facebook.com\/oauth\/authorize?client_id='+appid+'&redirect_uri='+href+'&display=page&scope=publish_stream';\r\n  }\r\n});\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<div style=\"float:left;\">\n<div id=\"fb-root\"><\/div>\n<fb:like href=\"https:\/\/cd34.com\/blog\/framework\/facebooks-javascript-sdk-and-a-short-one-page-application\/\" width=\"250\" send=\"false\" show_faces=\"false\" layout=\"button_count\" action=\"recommend\"><\/fb:like>\n<\/div><div style=\"clear:both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>While discussing a project with a client it occurred to me that perhaps you don&#8217;t need to get too complex to do something simple. Since using Facebook almost mandates that your surfer has Javascript enabled, we should be able to write a very simple application that posts to someone&#8217;s wall after asking for the &#8216;publish&#8217; [&hellip;]<\/p>\n<div style=\"float:left;\">\n<div id=\"fb-root\"><\/div>\n<fb:like href=\"https:\/\/cd34.com\/blog\/framework\/facebooks-javascript-sdk-and-a-short-one-page-application\/\" width=\"250\" send=\"false\" show_faces=\"false\" layout=\"button_count\" action=\"recommend\"><\/fb:like>\n<\/div><div style=\"clear:both;\"><\/div>","protected":false},"author":15,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[90,130],"class_list":["post-978","post","type-post","status-publish","format-standard","hentry","category-framework","tag-facebook","tag-javascript-sdk"],"_links":{"self":[{"href":"https:\/\/cd34.com\/blog\/wp-json\/wp\/v2\/posts\/978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cd34.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cd34.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cd34.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/cd34.com\/blog\/wp-json\/wp\/v2\/comments?post=978"}],"version-history":[{"count":6,"href":"https:\/\/cd34.com\/blog\/wp-json\/wp\/v2\/posts\/978\/revisions"}],"predecessor-version":[{"id":984,"href":"https:\/\/cd34.com\/blog\/wp-json\/wp\/v2\/posts\/978\/revisions\/984"}],"wp:attachment":[{"href":"https:\/\/cd34.com\/blog\/wp-json\/wp\/v2\/media?parent=978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cd34.com\/blog\/wp-json\/wp\/v2\/categories?post=978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cd34.com\/blog\/wp-json\/wp\/v2\/tags?post=978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}