When using Facebook's Embedded Posts API, any post that has multiple photos on it is not rendering correctly when the user is logged in to Facebook. Everything shows up fine if no user is logged in. I have tested this in both Firefox (v43.0) and Chrome (v47.0.2526.80 m) and it happens in both places.
Here is the html I'm testing with, in the body (I obviously replaced the app-id with my app-id. The first post has multiple images, the 2nd only has one. When not logged into facebook both posts render correctly. After logging into facebook, the first post fails to render and leaves a blank space on the page, the second still renders correctly.
<div>
<div class="fb-post" data-href="http://facebook.com/106536536125/posts/10153158906711126" data-width="400"></div>
<div class="fb-post" data-href="http://facebook.com/106536536125/posts/10153157143376126" data-width="400"></div>
</div>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'your-app-id',
xfbml: true,
version: 'v2.5'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Is this a bug in the embed code for Facebook posts, or is there something I can do to fix it?
I filed a bug report with Facebook and they confirmed this is a bug and they're starting to work on it.
Related
I have been trying to add FB Messaging Widget to my site. All works fine on MS Edge but I have to hard (CTRL + F5) refresh the page when viewing the page on Chrome and my Android Phone. If I leave the page and come back to it again I have to once again hard refresh the page for it to show up. Your help would be appreciated.
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '2107772995957885'
xfbml : true,
version : 'v3.2'
});
};
(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/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat" attribution=setup_tool page_id="123456789" logged_in_greeting="Hi, Thanks for visiting our site. If you have a question, please ask here." logged_out_greeting="Hi, Thanks for visiting our site. Log into FB to ask a question." greeting_dialog_display="fade" greeting_dialog_delay="10" theme_color="#ff7e29"></div>
I set up Facebook comments on a staging site we have, however can't get the Moderation Link to show up:
http://telegram_com.wtstage.sx.atl.publicus.com/article/20150426/NEWS/304269695?nocache=1
I have confirmed that I'm an administrator on the Facebook app account.
I have this in the header:
<meta property="fb:app_id" content="1393680337622798" />
I have this in the 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/sdk.js#xfbml=1&version=v2.3&appId=1393680337622798";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://telegram.com/article/20150426/NEWS/304269695/101116" data-numposts="25" data-version="v2.3" data-colorscheme="light"></div>
I have tried using the live telegram.com url as well as the staging url.
If I swap the url (data-href) for another site I am an administrator on, the Facebook comment moderation link shows up in the comment widget. However if I use any url that is the telegram.com's, the Moderation link does not show up.
Is there a setting or something in Facebook's backend that I could be missing? It seems to me the code would be correct, if it works when I use the same app id, but a different data-href url.
Any suggestions?
I seem to have the same issue using the data-href attribute, however, switching to the init version of the comments plugin sorted my issue.
So now, I'm using the following towards the top of the page:
<script>
window.fbAsyncInit = function () {
FB.init({
appId: '516991728450336',
xfbml: true,
version: 'v2.3',
num_posts: 5,
width: '100%'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
And I've got a
<div class="fb-comments"></div>
Further down the page. This way, I don't even need the <meta property="fb:app_id"... either, as that only overrides the appId in the FB.init script.
You can specify the href attribute in the script to modify the URL, but if you don't, it'll just default to your page URL. Further parameters here
I hope it helps.
I am trying to start with facebook development, following this link: https://developers.facebook.com/docs/javascript/quickstart/v2.2?locale=en_GB
so I pasted this code inside the body tag:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '12323432423',
xfbml : true,
version : 'v2.1'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then I added this as mentioned in the walkthrough:
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
My question is, is the appId the same as page Id? I am trying to deal with my page on facebook, and to get people to like it or post to iT. Am I going the right way?
This code is not working, I am getting nothing on my page.
No, App ID is an App ID, you need to create one here: https://developers.facebook.com/apps
Btw, dont forget to add the data-href parameter with your Page URL in the Like Button div.
I added Facebook Comment Box to my site manually. I created an app and pasted the code on my template files.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '730627806953221', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then I added this:
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="430" style="max-width: 100%;"></div>
It seems to work, when a user comments it displays correctly. However when I try to reply to someone who left a comment it doesn´t stay there. I´m trying to reply as a brand not as myself.
Why could this be?
<body>
<script>
// Facebook Init
window.fbAsyncInit = function() {
FB.init({
appId : '...MYID...', // App ID
channelUrl : 'channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
};
</script>
<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=...MYID...";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="player"></div>
<div id="main">
<div id="facebook" style="height:30px;">
<div class="fb-like" data-href="http://www.MYURL.com/about" data-send="true" data-width="450" data-show-faces="true"></div>
</div>
Can somebody help? I am php programmer myself and just stuck with JS... I also considered the Php api, but actually it used to work, now it hangs all of sudden.. not sure what I did :(
Thanks!
Please see the Facebook developer site. It would be a good place to track as this is possibly not you. I'm having the same issue and I'm using FBML tags and not iFrame or HTML5.
https://developers.facebook.com/bugs/347759798609016
Something else to try is to try logging in, kill that window, then refresh the page. For me at least the "Like" button works after the refresh. So the login is successful, but the response from Facebook isn't.