Search code examples
javascriptfacebook-like

Liking Facebook fan page from within the app, reload the tab


The first issue that I'd like to highlight is that due to same-origin policy, Facebook restrictions and lack of variables in Facebook JS SDK, it is not possible to tell what is the URL of the page that is loading the present App. The solution is to generate URL using backend. However, there should be JS SDK variable holding this information.

http://www.facebook.com/pages/[any-random-string]/[page-id-got-from-signed-request]?sk=app_[app-id]

Now, to the error itself. I am using this URL to generate like button:

<div class="fb-like" data-href="<?=FACEBOOK_TAB_URL?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="lucida grande"></div>

And FB.Event.subscribe to detect when user likes the content. However, when user clicks the like button, the following response comes from Facebook:

{

    "__ar":1,
    "payload":{
        "requires_login":false,
        "success":false,
        "already_connected":false,
        "is_admin":false,
        "show_error":true,
        "error_info":{
            "brief":"An error has occurred.",
            "full":"There was an error liking the page. If you are the page owner, please try running your page through the linter on the Facebook devsite (https:\/\/developers.facebook.com\/tools\/lint\/) and fixing any errors.",
            "errorUri":"\/connect\/connect_to_node_error.php?title=An+error+has+occurred.&body=There+was+an+error+liking+the+page.+If+you+are+the+page+owner\u00252C+please+try+running+your+page+through+the+linter+on+the+Facebook+devsite+\u002528https\u00253A\u00252F\u00252Fdevelopers.facebook.com\u00252Ftools\u00252Flint\u00252F\u002529+and+fixing+any+errors.&hash=AQBOXfQcBTjYQ9b7"
        }
    },
    "jscc":""

}

Obviously, since this is Facebook fan page URL, Facebook debugger is not much of a use to me.


Solution

  • This issue is related with Facebook caching URLs. It appears when you like the content, then unlike and trying to like it again within short time span. The simple solution is to add random hash at the end of the data-href="", e.g. using uniqid().

    Note that OpenGraph tags scraper will follow the last og:url. Therefore, even if you have random hash appended to date-href parameter, as long as the URL being liked has its own og:url tag, counter is going to function properly.