Like button not working in a Chrome extension

Question

I have implemented a simple Facebook "Like" button in my extension. However, it does not appear to be working.

I am using the iframe version of the "Like" button just because I won't need any extra scripts.

<iframe src="//www.facebook.com/plugins/like.php?href=[dummy_text]&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font&amp;blah..." scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

At first, the button does show up nicely and correctly:

enter image description here

However, after you clicked it, it will say "Error" in red:

enter image description here

So I am thinking maybe it is because of the ^{_{(kind of stupid and)}} restricted policies added in manifest version 2?; since it works if I put it on a regular webpage. (It says "Confirm" after I click the like button.)

enter image description here

Any idea on how to fix this?

@MostafaShahverdy Since it's in an `iframe` I don't really need to add any permission, but nonetheless I do included Facebook in the permission list. — Derek 朕會功夫, Mar 02 '14 at 20:31

score 6 · Answer 1 · answered Mar 02 '14 at 20:51

//www.facebook.com/... is a protocol-relative URL. When you embed such a URL on a normal http(s) site, then the URL resolves to http(s)://www.facebook.com/.... However, in a Chrome extension, it resolves to chrome-extension://www.facebook.com/......

To fix this issue, prefix the URL with https:, i.e. use https://www.facebook.com/....

After doing that, the button will still not show up because of the Content Security Policy. To get the desired result, you have to allow Facebook to be embedded, by relaxing the CSP via the manifest file:

"content_security_policy": "script-src 'self'; object-src 'self'; frame-src https://www.facebook.com",

(you can also whitelist http sites, e.g. using
"script-src 'self'; object-src 'self'; frame-src http://www.facebook.com" or
"script-src 'self'; object-src 'self'; frame-src http://www.facebook.com https://www.facebook.com")

To the downvoter: Before you claim that this is not working, make sure that you **reload** the extension to make sure that the content security policy takes effect. This can be done by clicking on Reload at your extension at `chrome://extensions/`, or by uninstalling then re-installing the extension. — Rob W, Mar 04 '14 at 15:32

score 2 · Answer 2 · edited May 23 '17 at 12:06

Other than Rob W's recommendation - A few more points to cover others who might be facing the same error, but using facebook app (i.e. you are logged in on fb and during the generating of iframe code, you see 'This script uses the app ID of your app:' above with a dropdown to select fb app):

Head in html

<head>
    <!-- for Facebook --> 
    <meta property='og:image' content="http://example.com/logo.jpg"/>
    <meta property='og:url' content="http://example.com"/>
    <meta property="og:title" content="Example"/>
    <meta property="og:description" content="Description"/>
    <meta property="fb:admins" content="<admin name>" />
    <meta property="fb:app_id" content="<app id>" /> 
    <meta property="og:type" content="article" /> 
</head>

Do make sure the url in the above og:url is tied to the exact same url in your facebook app.
app id has to match that of your facebook app id for tracking purposes (you can even 'transfer' likes to another page with a different domain if the above parameters are the same)

Do the url set in FB app has to match the one in your html, as well as the url you use to access the page.

Debug

If that doesn't work out, I would use facebook 'debugger' -

https://developers.facebook.com/tools/debug

Just type in your url and let facebook do the advising : )

Like button not working in a Chrome extension

2 Answers2

Head in html

Debug