I'm developing a site implementing "facebook comments". One particular feature of the site is that I plan to have many pages implementing "facebook comments", which are generated automatically through server-side programming.
In theory this should be no problem... I included the following javascript code that was generated for me:
(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=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
The Html tag I included is the following:
<div class="fb-comments" data-href="www.myurl.com/user/{{user.id}}" data-num-posts="20" data-width="500"></div>
Regarding the above, you'll note that I'm using python-django, so there is a server-side variable within the double curly brackets. This allows me to have the same functionality on many automatically generated pages.
Everthing seems to be working perfectly. Every individual page has its own respective implementation of facebook comments.... EXCEPT, I'm getting this annoying warning message "Warning: (MY URL) is unreachable." Obviously it IS being reached because it's working properly! So, why is it showing the warning message, and how do I get rid of it?
I tried adding the whole slew of meta properties, but no effect:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml" version="XHTML+RDFa 1.1">
<head>
<meta property="fb:admins" content="<MY_FB_ID>" />
<meta property="og:site_name" content="bowlofgoals" />
<meta property="fb:app_id" content="<MY_APP_ID>" />
<meta property="og:title" content="Bowl of Goals"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="<URL>"/>
<meta property="fb:moderator" content="<MY_FB_ID>" />
Also, please note that I have also implemented facebook connect in the root folder of the site. So, my "Site URL" in my app setting is the root folder, not the sub-pages where the facebook comments is implemented.
All the functionality is working perfectly.... so what should I do to get rid of that annoying warning message?
Thank you very much for any guidance you can offer on this.
Mark
Consider checking your page for javascript errors. I had the exact same problem as you did and no matter what tags I added, no matter what I did, the plugin wouldn't work.
After taking a closer look in Firebug I noticed I had one javascript error caused by some slider script in my template. Removed that script and everything works like a charm now.
I assume that error was breaking all my javascript including Facebook's and that's why the plugin didn't work.
I got rid of that error by changing the data-href to the value that I set in Website with Facebook Login Site URL. So I have http://domain.org/contest/ in my Site url and my data-href to http://domain.org/contest
But I do have the same issue as you where my comments plugin is in a bunch of pages where the url is dynamic so something like http://domain.org/contest/id/13131 or http://domain.org/contest/id/4848 but I cant put either one of those urls in my data-href. I have to put http://domain.org/contest instead in order to get rid of that error.
Related
I am trying to add comments to my Website.
I have followed basic instructions at https://developers.facebook.com/docs/plugins/comments/ and comments box appears..
I want to enable Moderation, so followed instructions at https://developers.facebook.com/docs/plugins/comments/#moderation-setup-instructions but I am not able to get the moderation tool to work.. I expect to see comments appearing at https://developers.facebook.com/tools/comments/ or see the moderation link on each page with comments, but neither are happening..
I have included the fb:app_id and og:url and have no issues when viewing on https://developers.facebook.com/tools/debug/sharing and tried including the fb:admins (but the guide above suggests i should not include both)
I've been searching for answer for 2 days. In my case problem was with data-url attribute. I have publications in multiple languages and I set data-url value without language info, so that comments in other languages be seen in each language. But as I see now facebook does not allow that kind of data-url value. I set that value same as exact url in browser and everything works, also I will suggest adding og:url value same as exact url.
Hope this will help somebody!
You just need to add og alternate languages meta tag like below
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ka_GE" />
First is the current language (example: domain.com/en/item/1)
Second is the alternate language url (example: domain.com/ka/item/1)
How it worked for me...
1º Step - Find your user ID:
On Facebook Interface:
Click in the top right of Facebook.
Select Settings & Privacy, then click Settings.
Click Apps and Websites in the left menu.
Click View and edit next to an app or game.
Scroll down to Learn more. Your user ID is in the paragraph below.
Facebook doc about that: https://www.facebook.com/help/1397933243846983
2º Step - Find your APP ID or create one here:
https://developers.facebook.com/tools/comments/
3º Step - Add these tags inside HEAD of your page (NEEDS TO BE IN HEAD ONLY):
<meta property="fb:admins" content="[YOU FACEBOOK USER ID]"/>
<meta property="fb:app_id" content="[YOUR APP ID]" />
4º Step - Set this script where you want to show the comment box:
<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/pt_BR/all.js#xfbml=1&appId=[YOUR APP ID]";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="[URL OF YOUR PAGE]" data-num-posts="5" data-width="815" data-colorscheme="light" data-mobile="false" data-order-by="reverse_time"></div>
I am trying to implement the Like button on my pages.
Those pages represent the review page for a product. When a user Likes the page, it shows up in Facebook (not as a link, but as liking an entity), however when you click on the entity in Facebook it links through to a facebook.com hosted page representing the page. I want the user to be redirected to the og:url page?
This happens for example when you Like an artist page on Grroveshar: http://grooveshark.com/#!/artist/Elbow/4795
I am clearly "doing it wrong".
I am using the following markup to include the SDK. MYAPPID is included by the code generator Facebook provides so I assume it is required.
<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=MYAPPID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then my code to render the Like button.
<div class="fb-like" data-send="false" data-width="450" data-show-faces="true"></div>
And finally my og tags:
<meta property="og:title" content="My product" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://site.com/product_1/" />
<meta property="og:image" content="http://site.com/image1.jpg" />
<meta property="og:site_name" content="My-Site-Name.com" />
<meta property="fb:admins" content="MYFACEBOOKID" />
<meta property="fb:app_id" content="MYAPPID" />
Thanks!
It sounds like you're confusing the Admin Page for that URL with the URL itself, but i could be wrong because the admin page has a message at the top explaining this which looks like this:
Only the admins will see the on-Facebook admin page, and other users will be brought back to the og:url value defined on the URL which was liked. If you're not specifying a data-href parameter in the HTML5 Like plugin, this will be the current page or whatever the og:url value is on the current page's meta tags
Check what Facebook's Debug Tool says for the URL you're trying to like and make sure the tags are being read correctly
The problem with the grooveshark example is the fact they are using #! urls. If you wereto like http://grooveshark.com/artist/Elbow/4795 instead it would work correctly. If you are using such URL patterns than you will run into problems, and you would need to override the like button to hit the url without it.
Thank you in advance for any help. I have a website which has OpenGraph embedded code, which validates without error in the linter. I have the Javascript SDK called and the XFBML Like button, plus Comments and Recent Activity plugins. They all seem to be working quite nicely. Next to my Like button is the "Admin Page" link, as expected.
The problem is that clicking the Admin Page link just opens a new window with my website in it.
I thought it would pull up some kind of page where I could publish stream updates, as described on this reference page:
https://developers.facebook.com/docs/opengraph/#publishing
But this doesn't happen. May I have some help on why this is happening and how to fix?
Details that may help:
When I go to the Pages I Admin area on Facebook (http://www.facebook.com/bookmarks/pages) the page is in fact listed.
I have linked the page to my Insights and am receiving data there.
The Admin Page link does appear next to my Like button.
The URL if you need to see the components working in place: http://mansbestfriendcommercial.com/
The code on my page:
<meta property="og:title" content="MY TITLE"/>
<meta property="og:site_name" content="MY SITE NAME"/>
<meta property="og:description" content="MY DESCRIPTION"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="MY URL"/>
<meta property="og:image" content="MY IMAGE URL"/>
<meta property="fb:admins" content="MY FACEBOOK USERNAME"/>
<meta property="fb:app_id" content="MY APP ID"/>
And the Javascript SDK call:
<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=MYAPPID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I'm facing the same issue and didn't find any solution so far about it :(
Until recently i was able to use the facebook admin page of mu liked pages on my site but don't know what happened i have the same problem like you, i can access the insights but when i visit the admin page link it open a new windows with the same website in it here is a link if someone could check it out: http://www.lajkuvaj.com/44964
This was definitely a bug rather than a programming or setup issue. The bug has been marked fixed by Facebook as of 1/18/2012 and everything now works as it is supposed to! Bug report:
http://developers.facebook.com/bugs/308356579205492?browse=search_4f0f1475c470b2076799347
I'm implementing Facebook's "Like" option in one of my websites as a voting tool. Users will be able to vote on a specific team by Liking the team's individual page. I have a number of teams and for some reason when I "Like" some of the teams, refresh my browser, my Like count refreshes as if I never "Liked" the page at all. However, on some of the other teams pages, when I "Like" and refresh, the count is accurate and keeps track.
I can't seem to find what is differentiating between the team pages that work and don't work. Code is identical but some keep the Like count and some don't. I was hoping someone may have experienced this before?
Below is the HTML5 Like option I used:
<div class="votePanel">
<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#appId=262057453824946&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="120" data-show-faces="false" data-font="arial"></div>
</div>
Below are my Open Graph tags:
<meta property="og:title" content="My Page Title" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="<% response.write("http://" & Request.ServerVariables("SERVER_NAME") & Request.ServerVariables("URL")) %>" />
<meta property="og:image" content="PATHTOMYIMAGE" />
<meta property="og:site_name" content="Site Title" />
<meta property="og:admins" content="MYADMINID" />
<meta property="og:description" content="DESCRIPTIONHERE" />
Ah, I've got it working with a few resources.
First, I used Facebook's Debugger to check my open graph tags and make sure they were valid. I noticed that my Like button required an admin ID. Also, on the Debugger page you can actually demo your Like button and it will display an error message if necessary.
I received the message:
"The page failed to provide a valid list of administrators. It needs to specify the administrators using either a "fb:app_id" meta tag, or using a "fb:admins" meta tag to specify a comma-delimited list of Facebook users."
What I noticed was that I had my fb:admins tag mixed up with og:admins. I switched the letters up and all was fixed!
However, I'm still not sure why a few of my pages allowed the Like button to work prior to the fix.
I've noticed this happen on my sites before too. There's usually a missing or incorrect open graph tag that's required. It's really strange how it works anyway on some pages but not others. I highly recommend using the debugger tool too. It points out what is wrong.
I have used the following code to implement the like - button:
Header
<!-- Facebook Metatags -->
<meta property="og:image" content="http://mysite/logo.gif"/>
<meta property="og:locality" content="mycity"/>
<meta property="og:country-name" content="Germany"/>
<meta property="og:latitude" content="52.xxxxxxx"/>
<meta property="og:longitude" content="9.xxxxxxx"/>
<meta property="og:type" content="product"/>
<meta property="og:site_name" content="mypage.com"/>
<meta property="og:url" content="http://mypage.de/myproduct/myproductkey"/>
<meta property="og:title" content="Myproduct Description"/>
Body on mypage.de/myproduct/myproductkey
<div id="facebook-likebox">
<script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>
<fb:like href="http://mypage.de/myproduct/myproductkey" width="450" height="90" show_faces="false"></fb:like>
</div>
The result is inconsistent: Most of the time it works, but sometimes I get this error:
You failed to provide a valid list of
administators. You need to supply the
administors using either a
\"fb:app_id\" meta tag, or using a
\"fb:admins\" meta tag to specify a
comma-delimited list of Facebook
users.
This error makes no sense because when I call the page later or somebody else calls the page it works again. Any idea what is wrong here.
EDIT
I updated the site with these meta tags
<meta property="fb:admins" content="xxx"/>
<meta property="fb:app_id" content="xxx"/>
I rechecked the ids on https://graph.facebook.com/xxx
But I still get get errors sometimes. The new error is:
The app ID "xxx" specified
within the "fb:app_id" meta tag was
invalid.
But most of the time everyrthing works. Does anybody have any idea on how to solve this issue?
EDIT 1
Our site uses a load balancer and has a lot of external scripts (E-Tracker and other tracking solutions)
EDIT 2
We used LINT https://developers.facebook.com/tools/lint/ to check the page
It gives sometime an error (invalid app_id )and sometimes returns as valid. But the app-id from the meta-tags is allways parsed correctly and it is the valid app-id.
The Facebook Like Plugin requires six attributes when using the open graph meta tags:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
So just add your facebook ID:
<meta property="fb:admins" content="your_FB_ID"/>
I spent a good couple of hours on this blasted Like button, but it is finally working for me! I had added the admin_id and app_id properties and it still flagged the same error.
Here is a check list to make sure you have what you need.
1) Your Doc type is probably wrong. I can't remember where I got this information, but use this instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
2) You need to import the XML namespaces. Change your HTML tag to something like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
I used the HTML5 script on my website. So here's a copy-pasta for your reference.
<?php $current_url = "http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]; ?>
<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/all.js#xfbml=1&appId=YOUR_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="<?php echo $current_url; ?>" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false"></div>
Also, it takes a couple of minutes to propagate. I waited 15 minutes and suddenly... it worked.
It turns out that the reason for the inconsistent behaviour was the loadbalancer. We deactivated loadbalancing and LINT always showed consistent results.
I have no idea what the Load balancing changed. The meta-tags are similar.
I used the admins- metatag. I did not have to use the app-id tag. Thats how it is written in the specification.
I found the solution!
the problem is in the URL address,
it has to be:
<meta property="og:url" content="http://www.yoursite.com/index.php" />
I used this and it works