I am working on a Facebook Instant game and facing some errors.
Here are the errors in the console:
Refused to frame 'https://staticxx.facebook.com/' because it violates
the following Content Security Policy directive: "frame-src 'self'
blob: zynga.com *.zynga.com".
Refused to frame 'https://www.facebook.com/' because it violates the
following Content Security Policy directive: "frame-src 'self' blob:
zynga.com *.zynga.com".
Image
All the code used is from Facebook's documentation.
The first error comes with the JS SDK code:
(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 = "https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.0&appId=CENSORED&autoLogAppEvents=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
The second error comes with the share button code. The button doesn't show up at all.
<div class="fb-share-button"
data-href="https://gdpalace.wordpress.com/"
data-layout="button"
data-size="large"
data-mobile-iframe="true">
<a
target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fgdpalace.wordpress.com%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">
Share
</a>
</div>
So, I can't implement a share button at all because it throws that error and doesn't show up. What can I do about this?
Related
I have implemented the Facebook share button as follows:
<div id="fb-root"></div>
<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&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.facebook.com/bookf1" data-layout="button_count" data-share="false" data-width="180" data-show-faces="false" data-font="tahoma"></div>
<div class="fb-share-button" data-type="button"></div>
It appears on my website as expected and clicking it brings up the sharer.php with the expected display. However, when I click the 'Share Link' button it shows the 'thinking' animation for a second then nothing happens. The sharer.php pop-up just remains on-screen.
If I try and share the link via a private message I get an error saying "The Attachment Could Not Be Found".
This is running on a publicly accessible URL.
Any suggestions would be greatly appreciated as I can't seem to find this issue anywhere else.
Thanks!
I ran into a similair issue with exactly the same symptoms and wasted some time here.
After clicking my share-button the expected popup opened. In the url it was visible that sharer.php was called with an unknown (to me at least) app-id as parameter. After creating a facebook app for the website in question and putting the newly created app-id as parameter ..
<div id="fb-root"></div>
<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/de_DE/sdk.js#xfbml=1&appId=MY_APP_ID&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
.. it worked.
For debugguing purposes it could be helpful to put another source for js.src:
[...]
js.src = "//connect.facebook.net/de_DE/sdk/debug.js[...]
[...]
This will log debugging messages to the js-console. (As can be read up here: https://developers.facebook.com/docs/javascript/quickstart/v2.0#advancedsetup)
i have included a facebook login button like this
<div id="fb-root"></div>
<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/de_DE/all.js#xfbml=1&appId=592370847463963";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-width="200"></div>
but i don't want the default behaviour on click.
is it possible to define my own onclick function for the button?
Well... Please consider that you cannot create custom Facebook Login Page due to security reasons.
Let's assume that this works as you wanted. It means that you can hijack FB user's name & his password within your page. Nobody will be pleased with this behavior.
I have a js fiddle that demonstrates the issue
http://jsfiddle.net/RLQUR/
<div id="fb-root"></div>
<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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.flickr.com" data-send="true" data-width="450" data-show-faces="true"></div>
The code in the fiddle is directly from the facebook like button generator.
If you change the url to something like "http://www.google.com" it works just as it should. However, when using a flickr url and trying to click "Post to Facebook" it makes an AJAX request and returns with a status of 200 OK but does not post the comment to the profile or close the popup.
I believe this is likely a bug with the facebook like button, however I am unable to create a bug on the developer page for an unknown reason. I do not see a "Create" button on the page.
Any help is appreciated.
Im creating a like button for the web page using
<div id="fb-root"></div>
<script type="text/javascript">(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_US/all.js#xfbml=1&appId=252715718165799";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="<?php urlencode(the_permalink()) ?>" data-send="true" data-layout="button_count" data-width="125" data-show-faces="false"></div>
Which when clicked creates a nice link with an image etc on the users facebook feed, however it links to the page's url with a large querystring appended
http://example.com/the/page?fb_action_ids=10200196914349100%2C10200196796266148%2C10200196791466028%2C10200196788705959%2C10200196713104069&fb_action_types=og.likes&fb_source=other_multiline&action_object_map=%7B"10200196914349100"%3A10151018009412671%2C"10200196796266148"%3A438799629541199%2C"10200196791466028"%3A336640529795478%2C"10200196788705959"%3A145466598973304%2C"10200196713104069"%3A10150401503152524%2C"10200196704543855"%3A466461563437987%7D
This url is arriving at the wordpress powered site and generating 303 forbidden errors.
How do i fix my code / game facebook into linking to pages without the massive querystring?
I looked at previous asked questions about the facebook like button and didnt see anything that was wrong with my code. Here is what I have:
<body>
<div id="fb-root"></div>
<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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);}
(document, 'script', 'facebook-jssdk'));</script>
</body>
After adding the code for initializing the Facebook's Javascript SDK you also have to add the code to display the Like button at the required place. The generic code for it is
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true">
</div>
If you want you can further customize it by checking documentation here.
Had the same problem, once I published the page, the like buttons showed up
facebook page : settings : Page Visibility : Page published
(the page was "unpublished" by default even after I did publish it for the first time)
I know topic is old but still coming up in searches.
Here's the initialization code I used:
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Important:
By default Facebook auto-configuration tool (https://developers.facebook.com/docs/plugins/follow-button) does not prepend "HTTPS" when exporting the js.src element.
If testing this on localhost host you will run into problems with the button visibility (c.f. v2.9) Either use a https tunnel service such as ngrok or deploy to valid https server.
Adding version to the url js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11"; helped in my case.