In this page:
http://daytona.bg/model/damska-tunika-751-sreb-tsip_2702/
I have the following code inserted for facebook comments:
<head>
<meta property="fb:admins" content="1816718833"/>
<meta property="fb:app_id" content="443454829050436"/>
</head>
<body>
<div class="fb-comments" data-href="/model/damska-tunika-751-sreb-tsip_2702/" data-num-posts="5" data-width="960"></div>
</body>
But on moderation tool page I don't see any comments:
https://developers.facebook.com/tools/comments?id=443454829050436&view=queue
BTW, everything worked before I changed my application ID (I deleted my old app by mistake).
You should use the full URL on your "data-href". Something like:
<div class="fb-comments" data-href="http://www.exemple.com/model/damska-tunika-751-sreb-tsip_2702/">
Related
We are looking at allowing users to share a link via a few different social media networks. The Tweet, Pin it and LinkedIn share button are each working, but the issue we are encountering revolves around the Facebook Send button.
The button appears to load fine, but when clicked on it puts up a message that "The page at www.website.com/page1.jsp?order_nbr=123456 could not be reached".
When using the object debugger # the Facebook Developers site, something interesting happens:
Trying to debug www.website.com/page1.jsp?order_nbr=123456 the Response code of the scrape is a 502 error (URL returned a bad HTTP response code).
Trying to debug www.website.com/page1.jsp we get a 200 (normal response).
Trying to debug m.website.com/page1.jsp or m.website.com/page1.jsp?order_nbr=123456, both return the same 502 error.
It appears like there is an issue when there are parameters in the URL after the ?, but then we are wondering if there is something else that needs to be set, or if this might be a server configuration issue.
If there are technical explanations of how facebook scrapes a page, or why their send button might be getting a 502 error, while the others mentioned above are operating normally? Any insight would be appreciated.
Here is the bare bones code we have stripped things down to in order to test on the mobile site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Testing - Order #123456</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/icon.png" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<meta name="format-detection" content="telephone=no" />
<link href="/css/test.css" rel="stylesheet" type="text/css" />
<meta property="og:title" content="Test - Order #123456" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://m.website.com/page1.jsp?order_nbr=123456"/>
<meta property="og:image" content="../../images/mobile_files/logo.png" />
<!--asynchronous loader-->
<script src="../../js/init.js" type="text/javascript"> </script>
</head>
<body>
<DIV id="fb-root"></DIV>
<DIV id="menu">
<DIV style="float: left; padding:2px; "><fb:send ref="top_left_m" ></fb:send></DIV>
<DIV style="float: left; padding:2px;">Tweet </DIV>
<DIV style="float: left; padding:2px;"> <a data-pin-config="none" data-pin-do="buttonPin" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fm.website.com%2Fjsp%2Forder.jsp%3Fjob_order_id%3D%3C%25%3DjobOrderId%25%3E&media=http%3A%2F%2Fm.website.com%2Fimages%2Fmobile_files%2Flogo.png&description=Testing..."><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a> </DIV>
<DIV style="float: left; padding:2px;"><script type="IN/Share"></script> </DIV>
<DIV style="clear:both;"></DIV>
</DIV>
</body>
</html>
UPDATE: The output of debugger is different than it was the other day, I believe due to a redeploy and/or cached (server and/or local)previous tests, however two main issue remain.
.#1 - The main site is scraping fine (Return code 200). The mobile site returns a 502 and returns nothing.
.#2 - If I am not logged in to Facebook, a pop-up appears asking me to sign in. Once I do, the window disappears completely. If I am logged in to Facebook, a pop-up appears briefly and then disappears completely.
.#3 - Parameters in the URL have been ruled out as an issue.
Based on the nature of the biggest issue (#2)... I am going to change my question to be...
"Why does the Facebook Send button pop-up window close?"
(I will break #1 into a separate question if that's more appropriate, but I think the entirety of my problems are best served by leaving everything in one question )
Just in case it's relevant, here is the JS asynch loader:
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
add = function(url, id) {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
fjs.parentNode.insertBefore(js, fjs);
};
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk');
// Pinterest
add('http://assets.pinterest.com/js/pinit.js');
// Twitter SDK
add('//platform.twitter.com/widgets.js', 'twitter-wjs');
// LinkedIN
add('//platform.linkedin.com/in.js');
}(document, 'script'));
The issue is that Facebook sends a Range Request as part of the request. Fails if within the range (0-52K), however pages bigger than this range scrape fine. Seems older versions of Oracle have an issue dealing with the range, so you need to strip Facebook's range request out of the request headers.
I have a facebook app displayed on my page via an Iframe . I have included the following code on my page to generate the like and comment block .
<div class="my_page_footer">
<script src="https://connect.facebook.net/en_US/all.js"></script>
<div class="my_page_likes">
<fb:like href="<?=$canvas_url;?>" show_faces="true" width="570" font="verdana"></fb:like>
</div>
<div id="fb-root"></div>
<div class="my_page_comments">
<fb:comments href="<?=$canvas_url;?>" num_posts="5" width="570"></fb:comments>
</div>
</div>
Where the canvas url is the iframe src to my app.
However when anybody clicks on Like the iframe src url is posted on their wall instead of the name of the app or the link to the app
Any thoughts ?
Neil
Facebook figures out what to display for a URL using Open Graph headers. For example:
<meta property="og:title" content="..." />
<meta property="og:url" content="..." />
<meta property="og:image" content=""..." />
You can use the OG debugger tool to figure out if your headers are setup correctly.
I would like to embed the Facebook Comments plugin on my site.
Where should I place the meta tags in order to add moderators for the comment box?
I've tried merging the tags with the div and placing it between the div like this, but with no results:
<div class="fb-comments" data-href="http://example.com meta property="fb:admins" content="{12345678901234567890}"/" data-num-posts="1" data-width="600"></div>
<div class="fb-comments" data-href="http://example.com <meta property="fb:admins" content="{12345678901234567890}"/>" data-num-posts="1" data-width="600"></div>
<div class="fb-comments" data-href="http://example.com" data-num-posts="1" data-width="600"><meta property="fb:admins" content="{12345678901234567890}"/></div>
The comment box does work without the meta tags, though without the moderator support of course.
If it matters, my site is published on webs.com.
The meta does not go in the plug-in code. The meta tags go into the HTML of the site located at the data-href's URL. It is placed in the page's <HEAD> section.
I am facing problem in share button integration with my website.
When i click share it is only showing my website url.It is not showing image and description what might be the problem ???
Below is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Welcome Facebook Read Eval Log Loop</title>
<meta name="description" content="Examples for the Facebook Platform.">
<meta name="keywords" content="facebook, connect, facebook connect, javascript, examples, javascript sdk, javascript library, library, howto, tutorial, api, facebook apisdk">
<meta property="fb:admins" content="5526183">
<meta property="fb:app_id" content="123865001025929">
<meta property="og:image" content="https://fbrell.com/logo.jpg">
<meta property="og:type" content="website">
<meta property="og:url" content="http://fbrell.com/">
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '123865001025929',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<fb:share-button href="http://fbrell.com" type="button"> </fb:share-button>
</body>
</html>
You are missing the og:title so you need to add it, something like: <meta property="og:title" content="Welcome Facebook Read Eval Log Loop"/>
close the tags properly as mentioned by #dwarfy
Don't use the fb:share-button! use the Like plugin instead
It seems to work with the facebook linter :
http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Ffbrell.com%2F
Anyway it's best to always use the linter (in the link above) so that it gives you warnings and errors about your og tags, an ALSO it force facebook to REFRESH its cached information about your page, which in your case was not yet refreshed after you added tags, I suppose, so you were not seeing your last changes ... It's this information Facebook uses when you share something.
Does it work now ?
Btw it gives this :
Warning
Required Property Missing og:title is required
I am building a News section for a client website (in ExpressionEngine) and they have requested that each article have the Facebook like button. So I went to Facebook's developer site and found the necessary code to make it work.
The problem I have is that if I like one article, it counts that like for all of them! I'm using my ee tags for title and permalink in the OpenGraph meta tags, but to no avail.
Open graph code:
{exp:weblog:entries weblog="news" orderby="date" sort="desc" limit="1" disable="member_data|trackbacks"}
<meta property="og:title" content="{title}" />
<meta property="og:type" content="non_profit" />
<meta property="og:url" content="{title_permalink=news/article}" />
<meta property="og:image" content="http://dallascityhomes.net/_images/dch-logo-big.png" />
<meta property="og:site_name" content="Dallas City Homes" />
<meta property="fb:admins" content="--removed--" />
{/exp:weblog:entries}
The actual button (it is wrapped within a exp:weblog:entry tag):
<div>
Tweet
<fb:like href="{title_permalink=news/article}" layout="button_count" show_faces="false" width="80" font="arial"></fb:like>
</div>
And of course the JS script for FB like, I moved to the bottom of the doc:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Has anyone encountered this before? Know a solution?
Do the og:url meta property and the href property of the fb:like tag appear to be rendering correctly when you view source?