I am trying to load the Facebook like box on my webiste and when I go to get my code, I get a message that says "this content can not be displayed, To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame."
<div class="fb-like-box" data-href="facebook.com/pages/Cohen-Nutrition/…; data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2??Fpages%2FCohen-Nutrition%2F153878864726298%3Fref%3Dtn_tnmn%23%21%2Fpages%2FCohen-Nutrition%2F153878864726298%3Fsk%3Dwall&width=292&height=290&colorsc??heme=light&show_faces=true&border_color&stream=false&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:290px;" allowTransparency="true"></iframe>
I then put the code into my website widget and I get the same message mentioned above on my website where the Facebook like box should be.
Please help, I have no idea what to do and how to change this!
I ran into this problem as well. In my case, I was testing a static HTML page, and I was loading it in my browser with file://. I spent a while trying to figure this out, and before I uploaded my file, I tried deploying it as part of a service on http:// localhost (no space, that was just to let the post get through). Then it started working. I guess there's some logic that makes this fail when not behind a server. I hope this helps.
Try using HTML5 version of the code and follow the instructions. Also important is the APP ID.
<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&appId=<YOUR_APP_ID>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="..." data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
I just had a weird problem with a client's facebook page. The script didn't run and it didn't give any reasons. After looking in the my client's facebook page settings, I noticed he had an extra option saying "18+ yrs old" because he was selling massage oil. And because of that, the facebook box never shows on the website unless you're logged in and 18+.
Hope this can help you
Related
I want to add a Facebook like button in my website.
If I use the following code like button is working but on log in the error message : "An error occurred with Facebook Platform Opt In. Please try again later" is displayed.
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<iframe src="http://www.facebook.com/plugins/like.php?href=guiuiu"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
</body>
</html>
Why this is happening. Do I need to create a fb API for successful login?
you must provide a valid url in order to work with the iframe method.
Anyway - you better use the xfmbl implementation of the like button
in order to do that you will have to open application (on http://developers.facebook.com/apps)
then paste this code after the <body> tag of your page (put the APP ID where it belongs)
<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&appId=APP_ID_GOES_HERE";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
add this namespace to your html node:
<html xmlns:fb="http://ogp.me/ns/fb#">
and put this instead of the iframe you used
<fb:like send="false" href="YOUR_PAGE_ABSOLUTE_URL" width="450" show_faces="true"></fb:like>
for any further information you may refer here:
http://developers.facebook.com/docs/reference/plugins/like/
The accepted answer is wrong.
You'll get the same error the OP described no matter what implementation you use. The issue is due to a bug on Facebook's side of things.
It's currently OPEN, ASSIGNED, and set to HIGH priority. See here for more details: http://developers.facebook.com/bugs/228506407275556
I have created a page "Education For All" in facebook. In my website i want to provide a like button to like this page not the url and also want to show the count of the Likes received for that page in website along with Like button. I have used "Add this", but it is showing the count of number of likes for the url. Can you suggest me any plugin ?
Any help will be appreciated...
generate your facebook like button from here,
http://developers.facebook.com/docs/reference/plugins/like/
Please provide proper informations to get the proper code, or you can use the code below by following the instructions, just replace http://www.yoururl.com with the desired URL of the page which needs to be liked:-
1. Include the JavaScript SDK on your page once, ideally right after the opening tag.
<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>
Place the code for your plugin wherever you want the plugin to appear on your page.
<div class="fb-like" data-href="http://www.yoururl.com" data-send="true" data-width="450" data-show-faces="true"></div>
Have you already tried to generate the like button through https://developers.facebook.com/docs/reference/plugins/like/ ?
It gives you this code for example:
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fedforall&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=35&appId=225116190942635" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
Any assistance will and is greatly appreciated. Thank you in advance!
I used code generated by Facebook Developer and inserted the code into this WordPress site page:http://www.stilehair.com/studio code is below. When I open the page it looks right, BUT when I click on the "Like" button a pop-up appears and asks me to log into FB (even though I am already logged into FB.)
The box shakes and asks me again and never excepts my correct log in info, Nor does it except the "like".
This happens on all my browsers, iphone and ipad.
All software is up to date.
I've cleared the Cache'.
Tried numerous attempts at altering the code and/or method of inserting box.
Ran it through the FB Debugger
Searched the boards for answers and no solution is working.
<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
(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-box" data-href="http://www.facebook.com/Stilehair"
data-width="292" data-colorscheme="dark" data-show-faces="false"
data-stream="false" data-header="false"></div>
I've researched several other questions with no results to help rectify my challenge.
Adding a like box seems like such an easy thing to do from all I've read on Facebook and Forums.
Thank you.
I used this code on my clients wordpress sites.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo get_permalink(); ?>" show_faces="true" width="450" send="true"></fb:like>
the above code is working fine on all of my clients wordpress blogs. For example view any post page [link]
I can't seem to get both scripts working. I am using the jssdk and fb.share to get facebook like box plus facebook share button. But they do not work together. Any idea why? How to fix this?
I have this in header:
<div id="fb-root"></div>
And this code in footer:
<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>
This is my Fb.share code:
<div class="shr-fb">
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
They make conflict with each other and I do not know how to resolve this situation.
Thank you.
Makes sense.
The facebook share is deprecated and no longer supported, as you can read in the docs:
The Share button has been deprecated in favor of the Like button, and
will no longer be supported. Please use the Like button whenever
possible to drive maximum traffic to your apps.
(reference: http://developers.facebook.com/docs/share/)
And:
What happened to the old Share button?
We deprecated the Share Button when we launched the Like button,
because the Like button improves clickthrough rates by allowing users
to connect with one click, and by allowing them to see which of their
friends have already connected.
(reference: http://developers.facebook.com/docs/reference/plugins/like/)
Instead, use the Like button and you won't run into conflicts.
Meanwhile, you can still combine both Like and Share buttons together with FaceBook JSSDK Api and the html snippet for that is;
<div class="fb-like" data-share="true" data-width="450" data-show-faces="true">
</div>
It will display both the Like and Share buttons functioning as required.
I have a question, how to put like button" on the application on facebook example:
<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/pl_PL/all.js#xfbml=1&appId=94784739294";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.facebook.com/teste?sk=app_09090909" data-send="true" data-width="450" data-show-faces="true"></div>
If you use this form http://www.facebook.com/teste?sk=app_09090909 this brings me to http://www.facebook.com/teste. Why ?
facebook gives three options, i tried the third one ,used an i-frame and worked for me easily..
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fapps.facebook.com%2FYOURAPPNAME%2F&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80&appId=XXX" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
It seems like the like button doesn't care about page's variables after the "?".
The hack I found is to use a data-href with another URL you own, and redirect it to your real app URL.
I don't like this so much, why facebook does not allow to like pages?
It's actually related to fact that page you're trying to like is Facebook Page (and the parameters you pass just indicate that Page Tab application should be displayed instead of default view).
Linter doesn't even try to fetch OpenGraph tags from your application. Once linter visit that page it'll discover that og:url for that page still pointing to the Facebook Page and not to your Application running in Page Tab, and this seems OK (you application doesn't own that page but Facebook Page does)...
The solution is to create intermediate page that will hold desired OpenGraph tags and doing client-side redirect to final page. URL of that page should be used for Like Button social plugin to provide correct details in stories published by liking but still drive users to correct final page.