Menu
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]&send=false&layout=button_count&width=100&show_faces=false&font&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:
However, after you clicked it, it will say "Error" in red:
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.)
Any idea on how to fix this?
826
//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")
167
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>
<!-- 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>
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.
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 : )
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
