{"id":1384,"date":"2018-01-19T19:22:46","date_gmt":"2018-01-19T19:22:46","guid":{"rendered":"http:\/\/goofy-trucks.flywheelsites.com\/create-advanced-facebook-apps-with-facebook-javascript\/"},"modified":"2018-01-19T19:24:45","modified_gmt":"2018-01-19T19:24:45","slug":"create-advanced-facebook-apps-with-facebook-javascript","status":"publish","type":"post","link":"https:\/\/phpbuilder.com\/create-advanced-facebook-apps-with-facebook-javascript\/","title":{"rendered":"Create Advanced Facebook Apps with Facebook JavaScript"},"content":{"rendered":"
\n
\n
By Sachin Khosla<\/div>\n
on May 6, 2010<\/div>\n<\/p><\/div>\n
\n
My previous article explained how to get started with Facebook API development using PHP<\/a>. This article goes a step further by exploring how to create more advanced Facebook applications using the Facebook JavaScript (FBJS<\/a>) framework. FBJS allows you to use JavaScript within your Facebook applications, opening the door for more interactive, Ajax-driven user controls.<\/div>\n
The FBJS framework is written in a way that also allows you to use Facebook’s built-in resources (such as dialog boxes, confirmation popups, and so on) easily, but it has with few limitations as well. For example, you cannot use the onload<\/code> function with FBJS and it does not allow you to access too many DOM properties at the window level. But not to worry, the example in this article does not require those functions anyway. <\/div>\n

Your First FBJS Application<\/h2>\n
So let’s get started with our first FBJS application. We are going to create a simple contact\/feedback form, which you can then insert on your Facebook page to let users leave feedback or contact you right away. <\/div>\n
I presume that you have already completed your application setup process. If you have not registered your application yet, please refer to my previous article on building your first Facebook app with PHP<\/a> for instructions.<\/div>\n
To start building the application, create a simple HTML form as shown below.<\/div>\n
\n<\/p>\n
<form action=\"\" id=\"ContactForm\" name=\"ContactForm\" method=\"post\">\n  <p>\n    Name: <input type=\"text\" tabindex=\"1\" value=\"\" name=\"name\" id=\"name\" \/>\n  <\/p>\n  <p>\n    Address:  <input type=\"text\" tabindex=\"2\" value=\"\" name=\"address\" id=\"address\" \/>\n  <\/p>\n  <p>\n    Phone: <input type=\"text\" tabindex=\"3\" value=\"\" name=\"phone\" id=\"phone\" \/>\n  <\/p>\n  <input type=\"button\" class=\"submit\" onclick=\"contact();\" value=\"Send Feedback \/ Contact\"\/>\n<\/form><\/pre>\n
<\/code>\n<\/div>\n
As you can see, this simple HTML form calls the JavaScript (JS) function contact();<\/code> on submit. This function will now use FBJS to make an Ajax request back to your server and do the required set of actions. So, write the JS function to learn more about it.<\/div>\n
\n<\/p>\n
<script>\nfunction contact()\n  {\n    var ajax = new Ajax();\n    ajax.responseType = Ajax.RAW;\n    ajax.ondone = function(data)\n    {\n      var msgdialog = new Dialog();\n      msgdialog.showMessage('Confirmation',data);\nmsgdialog.onconfirm = function() { document.setLocation('http:\/\/www.facebook.com\/digimantra?v=wall'); };\n      return false;\n    }\n    ajax.onerror = function() {\n      var msgdialog = new Dialog();\n      msgdialog.showMessage('Error', 'An error has occurred while trying to submit.');\n      return false;\n    }\n    var queryParams = {\n      'name' : document.getElementById('name').getValue(),\n      'address' : document.getElementById('address').getValue(),\n      'phone' : document.getElementById('phone').getValue()\n    };\n    ajax.post('http:\/\/your_app_url.com\/submit.php?sys=fbpage', queryParams);\n  }\n<\/script><\/pre>\n
<\/code>\n<\/div>\n
This self-explanatory JavaScript code is very easy to understand. You create the Ajax object using the new Ajax();<\/code> method and then set its return type. In this example, we keep the return type as RAW, but you can choose JSON or FBML as well. You also can embed HTML and JavaScript code in the same file; in this example, we call the file form.php<\/u><\/code><\/a> and it submits data to submit.php<\/u><\/code><\/a> (see the full code listing below).<\/div>\n
Next, we post our data from the form to a PHP file where the data is processed and the corresponding response is returned. We use ajax.post()<\/code> to post the data on the given URL. The data is easily collected using the native JS function getElementById<\/code> and is passed in the form of comma-separated key\/value pairs.<\/div>\n
If the Ajax call is successful, then the function ondone<\/code> is triggered. Otherwise, the onerror<\/code> function is triggered so that your script can act accordingly. In this example, we show a confirmation dialog using Facebook’s dialog utility and then redirect the user to any other link, if needed. <\/div>\n<\/div>\n
<\/p>\n
\n
1<\/div>\n
| <\/div>\n
2<\/a> <\/div>\n
Next Page \u00bb<\/a><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
The Facebook JavaScript (FBJS) framework allows you to incorporate Ajax into your Facebook applications, opening the door for more interactive user<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1384","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/comments?post=1384"}],"version-history":[{"count":1,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1384\/revisions"}],"predecessor-version":[{"id":3256,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1384\/revisions\/3256"}],"wp:attachment":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/media?parent=1384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/categories?post=1384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/tags?post=1384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}