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.
Related
I have this TWDC(tableau web data connector) app hosted on our company's private cloud.
Every app that are deployed there are accessed after the user logs in via a Single Sign On login page, then redirected to the app.
When I try to use my web data connector on my Tableau Desktop it gets stuck on an infinite loop, after i push the button which does tableau.submit().
I've set the debugger and found out, that when I push the button, the page that is loaded is not the index.html of my WDC but the redirect page from the SSO login.
I have no idea why is this happening, doesn't make much sense, because it loaded the index.html in the first place, but after i push this button it gets back to somewhere in the middle of SSO login and redirect page.
Just a note: It works fine on the simulator.
Any thougths on this?
Here's my code:
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TableauAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/tableauwdc-2.3.latest.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<button id="submitButton">Send</button>
<br />
<br />
<textarea id="log" style="border: 1px solid #000; width: 100%; height: 700px;"></textarea>
<br />
<div id="placeholder"></div>
</body>
</html>
JavaScript
$(document).ready(function() {
try {
$("#submitButton").click(function() { tableau.submit() });
var myConnector = tableau.makeConnector();
// these are function which are not important for this question;
myConnector.getSchema = fnGetSchema;
myConnector.getData = fnGetData;
tableau.registerConnector(myConnector);
} catch (e) {
logger("ERROR: " + JSON.stringify(e));
}
});
This isn't a problem with your code. With the WDC there is an interactive phase where the user is shown a screen and can interact (this is your first SSO sign-in) but then there is a non-interactive (Get Data) phase where Tableau will try to retrieve the data and never shows the SSO login to the user. See docs. Given this page is loaded without user interaction it can't/shouldn't have SSO security on it.
I got my code to validate with debugger but none of my properties are showing up on the new feed like I want them to. Instead it seems to show a Facebook default text:
Cosmetology & Spa Institute | Facebook www.facebook.com Facebook is a
social utility that connects people with friends and others who work,
study and live around them. People use Facebook to keep up with
friends, upload an unlimited number of photos, post links and videos,
and learn more about the people they meet.
How can I get it to display my og properties?
All code on my site is below.
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<script src="//connect.facebook.net/en_US/all.js#xfbml=1" id="facebook-jssdk"></script>
<meta property="og:title" content="Cosmetology Schools and Beauty Salons" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.cosmetologyandspainstitute.com/facebook-tabs/CSI_Logo_2012-square.jpg" />
<meta property="og:url" content="http://www.cosmetologyandspainstitute.com/" />
<meta property="og:site_name" content="Cosmetology and Spa Institute" />
<meta property="fb:admins" content="1540268369" />
<meta property="og:description" content="The Cosmetology and Spa Institute has 2 of the best cosmetology and esthetician schools in Chicago. Our Illinois beauty schools, cosmetology and esthetics programs, provide results that truly matter." />
</head>
<body>
<script type="text/javascript">(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 style="margin-left:25px" class="fb-like" data-href="http://www.facebook.com/CosmetologySpaInstitute" data-send="false" data-layout="button_count" data-show-faces="false"></div>
</body>
Just tested it – can’t find any problems, your description and image show up as in the meta elements.
It's because the data-href on your like button is pointed at a page on Facebook (http://www.facebook.com/CosmetologySpaInstitute) not the page the like button is on, so the opengraph tags never even get read. Instead Facebook scrapes what it can from the page on Facebook.
In effect, clicking like doesn't like your webpage, but your Facebook Page.
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'm trying to create a Washington Post-esque social reader for my self-hosted Wordpress site, so when someone reads a post of mine it's published on their Facebook newsfeed.
I've followed the Facebook Open Graph tutorial, but I continue to face a pop-up box saying "Error Occured" when I click "Read" on a post. I have used the debug tool and it reported that everything is okay.
Are there additional steps required to make an Open Graph app work on a self-hosted Wordpress site?
Below is the code I've used so far. I've replaced the actual Image URLs with defaults as I can't post images on Stack Overflow yet.
In the Meta Tag area I typed the following:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#
zeitlife: http://ogp.me/ns/fb/zeitlife#
<meta property="fb:app_id" content="308222752522151" />
<meta property="og:type" content="zeitlife:article" />
<meta property="og:url" content="http://www.zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould/>
<meta property="og:title" content="Cabana: Brazilian that Breaks the Mould"/>
<meta property="og:description" content="Restaurant Review" />
<meta property="og:image" content="[image URL]" /></a>[/caption]" />
</head>
</html>
And in the body of the post I typed the following:
<script type="text/javascript">
function postRead()
{
FB.api('/me/zeitlife:Read' +
'?article=http://zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould','post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'308222752522151', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="18" face="verdana" color="blue">
Cabana
</font>
</h3>
<p>
<img title="Cabana"
src="Image url here" </p>
<form> <input type="button" value="Read" onclick="postRead()" />
</form>
</html>
I would be eternally grateful if someone could help me out!
I look forward to your response.
Kind Regards,
You're making things a fair amount more difficult for yourself by creating a custom read action.
Facebook offers three built-in action types: reads, listens, and watches. (See https://developers.facebook.com/docs/opengraph/actions/builtin/)
If you use the built-in system:
It's much easier to avoid errors
Your articles appear in the "Trending articles" section of people's news feeds
Facebook does most of the work setting up actions for you
It's because you have a space in:
http://www.zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould /
It needs to be:
http://www.zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould/
I tried using this at:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.zeitlife.co.uk%2Fcabana-brazilian-food-that-breaks-the-mould%2F
And it worked.
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