I kindly ask you to advise why Facebook Comments sometimes do not appear on my site.
I use standard code generated from Facebook Developers site.
Please note that the Comments box is located under the colored frame. Usually, it appears after reloading the page. Real site examples:
http://wakemovies.com/?ND201206190204
http://wakemovies.com/?BL201206190157
If I recall correctly Facebook comments require a bit of customization to the dock-type they have special format.
You should add this line tou your dock type
xmlns:fb="http://www.facebook.com/2008/fbml"
One more thing you are overloading your page with Facebook like buttons. I think one is more than enough considering most people have sharing plugins installed int they browsers.
I solved this by adding a setTimeout with a delay of 1 second
example:
setTimeout(function() {
// Your Facebook Comments JavaScript Code Here
}, 1000);
Related
When going to the set up pages for all the Social Plugins, they now provide example code using an APP ID.
http://developers.facebook.com/docs/plugins/
Is an APP ID now required for the Like Button and other plugins? What happens if an APP ID is not included when using the plugins?
I've checked the Facebook developer blog and read about the Like Button Migration. I haven't been able to find a straight answer for this either there or in the FB Like Reference.
Notice:
This is an old dated information, the official facebook's behaviors are changed.
Simply, the answer is No, just look at the following official Facebook resource.
Notice: To do it without need to the app id, you have to visit the above page when you are signed out from Facebook. Look at the following screen shot.
As semsem said, the simple answer is "no it is not required"... there are ways to get around having an appId associated with the "like" button. Here's my experience working with this. I'm not a Facebook or Open Graph expert, so YMMV.
Why we avoided using the appId on the button:
We're providing an service where we have one website (the engine, as it were) that provides a service distributing online courses to students (customers). Instructors (also customers) who what to use our service to disseminate courses to students can brand the site how they wish, and map their domain to their section of our website that serves those course(s).
As a simplified example: we serve from http://courses.example.com/instructor_name, but we want students to access the content through http://www.instructors-domain.com/. Any courses would be sub-directories off the base URL.
Associating the "like" button with our Facebook App disallows any cross domain shenanigans. While there are valid reasons for doing so, it doesn't work for where we're at in our company and product evolution. So we needed to find a workaround.
We wanted to allow folks to "like" a course, have the "story" point to the appropriate places on the net, as well as get some customization (e.g. "NAME likes an online course on FBAppName"). We basically achieved this. We lost some functionality which we deemed acceptable at this point in our evolution.
The short of it
I used the iframe version of the Facebook "like" button as dictated by the appropriate Facebook developer's page (for the link see semesm's answer for the link, I got no rep). I took their code snippet and manually removed the appId query string in the iframe's src.
In the "liked" page itself (which was the same page that had the "like" button) I used the Open Graph meta tags including specifying the appId. (These tags were specified: fb:app_id, og:type, og:url, og:site_name, og:title, og:description, og:image.)
The og:type was our custom type of the form 'namespace:app_custom_object_name'.
A failed approach
My first attempt was to use what I understand as the preferred method, the "HTML5" tab in the "Get Code" section of the developer's "like-button" page. I tried their method stripping the appId from the appropriate places. This method proved ineffectual.
If the domain doesn't match that in the Facebook App, there will be no "like" button.
If the domain does match, the "like" button will appear. However, it takes 3 clicks to actually "like" something. The first click changes the "thumbs-up Like" icon to a normal anchor with one word that didn't make obvious sense (I forgot what the word was). The second click will brings up the login/authorization window for using our app. The third actually bring up the modern fancy "like" box where you can type in a comment. I didn't find a way around this behavior.
Note that when I specified the appId in this approach on the appropriate domain, it worked as one would expect (though inconsistent with our desired behavior).
I did not try the other two options in the "Get Code" section of the "like-button" page.
Informed speculation and rumor
In my research around this, my overall impression is that requiring an appId is the way of the future for Facebook. Who knows if the old way will be depreciated, probably never, though I didn't find anything in the docs talking about this "legacy" behavior. This makes sense to me with their newer offerings and the advanced tracking that becomes available with this method.
I've seen suggestions that the "likes" used in this manner are akin to second-class citizens... treated as inferior in some respects. In my own experimentation I found the behavior of the fully specified appId (in the "like" button itself) to be different and more accessible and predictable (in terms of Open Graph queries and visibility on my limited Facebook tests) than the partially specified appId. (Again, I've found no solid documentation on this, and did not endeavor to full grok the differences.)
May this info help someone else along. Good luck!
So, I just tried the sємsєм method, as comments say: Facebook want you to login to get the code, and if you have an app, you have to choose one.
But if you don't, it gives you a code without any app reference.
So when you get a code – no matter any app you choose –, you just need to remove the appId parameter in the .js URL (&appId=##############), and you got (for the latest HTML5 code, 6th line):
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
The code for the div element does not change.
I simply use the URL code inside an iframe tag without an appID and it seams to work,
here is an example:
<iframe src="http://www.facebook.com/plugins/like.php?href=<%=request.original_url%>&width&layout=button_count&action=like&show_faces=false&share=false&height=35&appId=" frameBorder="0" width="150" height="25">
</iframe>
According to Facebook's Social Plugins FAQ
Web: If you are using Social Plugins on the web, you do not need to create a Facebook app for integrating a Social Plugin.
iOS/Android: If you are using Social Plugins within a iOS or Android app, you need to create a Facebook app and tie it to your app identifier.
It seems that the official answer is that they are only required for iOS/Android.
I deleted WordPress and started afresh and even created another new app on Facebook but still the issue remains.
I have set up a Facebook app which points to my WordPress site.
All parts of the site work, except I cannot click the register or login buttons.
If I log in from outside Facebook and refresh the Facebook app/page then I appear logged in and can do what I want, including log out.
Any ideas please? Unfortunately, most Google searches think I am talking about third party Facebook connect plugins, which I'm not.
The page in question is here, which is just looking at www.costablancaclassifieds.com.
You can also do this without modifying any of the core code. Just put these 2 lines in your functions.php
remove_action( 'login_init', 'send_frame_options_header', 10, 0 ); // main site
remove_action( 'admin_init', 'send_frame_options_header', 10, 0 ); // admin
From what I can tell Brad, this seems to be less of a FB problem and more of a WP cookie issue. I tried framing your site in with an iframe and it reacted similarly to the problem you're experiencing. Looked around a bit and found others with similar problems; issue being that when you're serving a WP site to another domain via an iframe the cookies aren't able to be set properly.
Here's one forum topic I found: http://wordpress.org/support/topic/running-wordpress-in-an-iframe-cross-domains
It's not good news, but hopefully it helps you find a solution or at least get some level of closure. I'll try to think of a creative solution for your situation.
Thank you very much, Mike. I didn't know it was because of iFrames. Because of what you wrote I was able to change what I was searching for and then found, albeit perhaps not so desirable, a solution that now works. (Perhaps you could test on your end too?) I modified a few lines in the Wordpress code base:
open wp-includes/default-filters.php
find "frame"
you'll get two lines:
add_action( 'login_init', 'send_frame_options_header', 10, 0 );
add_action( 'admin_init', 'send_frame_options_header', 10, 0 );
comment those lines out, save and clear cache.
I implemented facebook comments across a legacy, custom CMS. I used the XFBML implementation. Everything works as expected except when clicking the links back to the article page from a commenter's facebook feed the comment box does not show any comments. The link is of this form:
{Article URL}?fb_comment_id={comment_id_string}
And if I remove the comment parameter and only go to the article url the comment box renders correctly with the comment and all other comments on the article. So, it's some issue with the fb_comment_id parameter. One weird thing about how I had to implement the comments is, because of how the routing on the site works, I could not use server side code to set the the URL parameter in the <fb:comments> object. So I had to use this jquery code in the <head>:
<script>
// assign current page to comments url
$(document).ready(function() {
$('fb\\:comments').each(function(){
$(this).attr('href', window.location);
});
});
</script>
And used this for the actual <fb:comments> code:
<fb:comments href="{site's root URL}" num_posts="8" width="570"></fb:comments>
So, I figure doing this client side may be causing the issue. Not doing this server side is a hard constraint though, and everything else works so I'm hopeful there may be some way to make this work. If making the comment link work correctly is impossible, a reasonable hack would be to rewrite the link in the facebook feed so that it just points to the article url without adding the comment parameter. Any suggestions? Thanks!
NOTE: I've also tried using the html5 comments implementation and there is the same issue.;
Once facebook has rendered the iframe based upon your fb:comments tag, does it have the correct url? I am thinking it does not. You may have to call FB.XFBML.parse() after you inject the complete
I'm working on a Facebook (canvas) app where I'd like to show the user a FB-style dialog box. I'm trying to do this with FB.ui(), using the fbml.dialog method. My every attempt at this today has yielded a dialog box that shows loading bars, but nothing ever happens.
Subscribing to log events shows nothing.
The code below is the simplest version I've tried, and is lifted straight from Facebook's sample code, which I've seen working (http://fbrell.com/fb.ui/fbml.dialog).
function sendToFriends(){
var dialog = {
method: 'fbml.dialog',
display: 'dialog',
fbml: '<fb:header icon="false" decoration="add_border">Hello World!</fb:header><fb:profile-pic uid="5526183"></fb:profile-pic>'
};
FB.ui(dialog, function(response){alert(response);});
}
As usual, Facebook's documentation is incomplete and all over the place. I'd appreciate any help you could offer.
The answer to your question lies probably in a buggy behaviour as documented here
FB.ui dialog for apprequest hangs forever in iframe mode
Did you try the popup mode already? Maybe this temporarily fixes the issue. Hopefully there will be a fix in the facebook api soon.
This has been answered elsewhere on stackoverflow, but I can't remember where; actually I was searching for it when I found this question.
Very approximately, you need to construct your html, put it somewhere inside the JS library for facebook (I can't remember where: possibly as a user-created element of XFBML or something), and THEN call the dialog box.
It's complicated. If I find the post I was looking for, I'll link to it here.
I'm currently developing a Facebook application which will eventually end up on a Facebook Page. The problem is that I don't know how to remove the box header (handle?) with the application name and the close-button.
I've seen other applications on Pages being able to remove the header. Look at Apples Page here: http://www.facebook.com/home.php#/pages/Apple-Students/11147074409
Is it because they use an IFrame? I've tried that as well but I still need to call setFBML and embed an IFrame inside it.
I think you're right about the IFrame in the Apple page. It looks like the entire left column is a single IFrame. Still, it's not clear how they managed to get rid of the handle bar. Now I'm curious too...
Is is possible that Apple paid facebook to remove the header you are talking about?
Maybe it's a special case and they have a special API/UI for people who are willing to give them cash money?
I wrote a Facebook application a while back and I do not believe it has what you are calling a box header on it: http://apps.facebook.com/photoisland/. The application is configured to run entirely in an IFrame and I am not using FBML at all.
I've finally found out how to get an IFrame without a header just like Apple does.
You have to sign a special deal with Facebook to get it... however this deal doesn't come cheap so it's out of question for most companies. :(