Facebook

From eBabel wiki
Jump to: navigation, search

Custom Facebook Like button

Documentation for a custom like: https://developers.facebook.com/docs/opengraph/guides/og.likes

To make a custom Like button, we would need to post like actions via the Open Graph API, which means users would need to first login and give permissions to “publish_action” for the website where we want to place custom like buttons.

The alternative is the standard button from Facebook which looks the same because it’s produced within a little iframe generated and populated by Facebook.

Standard Facebook Like button

Documentation for a standard like: https://developers.facebook.com/docs/plugins/like-button

The standard like only requires a login *after* clicking on the like button, and only if the user isn’t already logged in from an earlier session. There is no special permission required, whereas the custom button does require a “publish_action” permission, which means there’s a dialog where the user must explicitly agree to give that permission to the website.

Sample code for the standard like:

 <script>(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_GB/sdk.js#xfbml=1&appId=308221746019220&version=v2.0";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

 <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/"
   data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

Facebook canvas POST and GET in Node.js

When loading a web app inside a Facebook Canvas iframe, there is an initial POST request from Facebook that needs to be turned into a GET one if there is no handling for POST and the app is a static HTML5 web app.

// Intercept POST request and switch it to a GET one,
// because Facebook canvas (iframe) starts with a POST request.
app.post('/', function (req, res, next) {
   req.method = 'GET';
   next();
});