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.
Related
I have a web application which uses the Facebook Send button on a per campaign basis, we used the functionality as described below last about 4 weeks ago.
The full reproduction example is here:
<html>
<head>
<title>Your Website Title</title>
<!-- You can use open graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="https://managedhosting.partners/fb.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://managedhosting.partners/wp-content/uploads/2020/07/engineering.png" />
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '474334713680098',
autoLogAppEvents : true,
xfbml : true,
version : 'v10.0'
});
};
function fb(){
FB.ui({
method: 'send',
link: 'https://comp.aquila.com.au/',
});
}
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
click
</body>
</html>
When clicking the link to trigger the send button I get an error in the browser console:
I though at first this is some deprecation, as we were using v2.11 of the SDK, but its also reproducible with the v10.0 SDK. I've also made live our campaign page from 4 weeks ago which shows the same behaviour.
I've made sure our Facebook App is live and I have also created an App in a fresh account to make sure its nothing to do with the account.
The Facebook UI call now seems to require a callback function, this can be seen in the examples, but its not shown on the quickstart page initially
The complete working code example becomes then:
<html>
<head>
<title>Your Website Title</title>
<!-- You can use open graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="https://managedhosting.partners/fb.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://managedhosting.partners/wp-content/uploads/2020/07/engineering.png" />
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '474334713680098',
autoLogAppEvents : true,
xfbml : true,
version : 'v10.0'
});
};
function fb(){
FB.ui({
method: 'send',
link: 'https://comp.aquila.com.au/',
}
, function(response){}) //<!-------------
);
}
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
click
</body>
</html>
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 some trouble here, do you know Yahoo! News? I want to create a widget like that (when you read an article it is published on your Facebook).
I've just created the Facebook apps and the Open Graph, but I don't understand how to insert it into my website, I am using Wordpress, and I was searching on Google but I still don't understand, hope you can help me.
I still dont understand, i've just create the apps and also the opengraph, also insert the opengraph tag on my header and the function, but when i try to open the post page, i get "Error Occured" How? can you help me?
You need to understand how the concepts work by reading the documentation
User takes an action in the app, such as read an article
App invokes a HTTP POST to the Graph API end-point /me/action:object=Object_URL
Facebook will crawl the object webpage (your WordPress page), read its meta tags and connect the object to the user via the action.
Your action is news.reads, so you would call as follows
POST https://graph.facebook.com/me/news.reads?article=[article object URL in your Wordpress Blog]
In order to have this work you need to set up the built action type read in your app settings: https://developers.facebook.com/apps/YOUR_APP_ID/opengraph
Then you must have the article type for the object set.
Then you must set up an object url on your WordPress blog these are done by inserting meta tags
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#
article: http://ogp.me/ns/article#">
<meta property="fb:app_id" content="YOUR_APP_ID">
<meta property="og:type" content="article">
<meta property="og:url" content="URL of this object">
<meta property="og:site_name" content="Name of site hosting article">
<meta property="og:image" content="URL to an image">
<meta property="og:title" content="Name of article">
<meta property="og:description" content="Description of object">
<meta property="article:published_time" content="DateTime">
<meta property="article:modified_time" content="DateTime">
<meta property="article:expiration_time" content="DateTime">
<meta property="article:author" content="URL to Author object">
<meta property="article:section" content="Section of article">
<meta property="article:tag" content="Keyword">
</head>
<body>
<!-- main article body -->
</body>
</html>
So you would put these in your header.php or index.php file based on your theme setup. Then you would have to insert functions and if statements based on your theme setup such as
The URL of the post
<meta property="og:url" content="<?php the_permalink() ?>"/>
A single post title
<meta property="og:title" content="<?php single_post_title(''); ?>" />
Then you need to lint this url to ensure you have setup properly, you can do this via
http://developers.facebook.com/tools/debug
Once you are sure the meta tags are set properly you need to test the action as mentioned earlier
POST https://graph.facebook.com/me/news.reads?article=[article object URL in your Wordpress Blog]
If everything is set this should return the id of the action.
Then you must implement the logic for authentication using the JS SDK
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[YOUR_APP_ID]', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
and the login button plugin
<fb:login-button show-faces="true" width="200" max-rows="1" scope="publish_actions">
</fb:login-button>
Either in a functions.php file or directly within the single.php and index.php pages
From there you must create a function to call the action below on page load
<script type="text/javascript">
function readArticle()
{
FB.api(
'/me/news.reads',
'post',
{ article: 'http://yourwordpress.com/site/' },
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Article read was successful! Action ID: ' + response.id);
}
});
}
</script>
I'm attempting to create a Facebook Open Graph App similar to the Washington Post Social Reader, which will announce in a person's news feed when they read an article on my website, www.zeitlife.co.uk.
I have followed the Open Graph tutorial closely, identifying an action and an object, and creating several sample ones to test aggregation. I've created a button saying "Add to Timeline" , but I've been unable to publish an action (in this case "read") and receive an ID for the action.
One issue I encountered was the debugger tool telling me my Open Graph meta tags lay outside my tags, which aren't visible in a self-hosted wordpress site. However, I installed Meta SEO Pack plugin which allowed me to place the Open Graph meta tags in a post's meta description, and the debugger tool accepted this.
This raised the complication of which part of the full Open Graph code (action and object) to put in the meta description; I've tried placing the "head" part in the Meta description and the "body part in the main post body, which resulted in a non-functional button.
Perhaps you could take a look at the code I've used and see if there are any problems?
Code in Meta Description:
<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="http://www.zeitlife.co.uk/wp-content/uploads/2011/12/IMG_2435.jpg" />
</head>
</html>
Code in main body of post:
<html>
<script type="text/javascript"> function read()
{FB.api('/me/zeitlife:article' + '?article=zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould &access_token=AAAEYU7OsZC6cBAG0oRKggspR5xjr17Nlpntj2ylxOuN6o3Tztry2EKPWq3JO97yG9De1tlN1SEpqKarovmZAlNKLsEM3BdR4AZAIV6ARDEkQsVSMK3C','post',
function(response) {
var msg = 'Error occured';
if (!response || response.error) {
if (response.error) {
msg += "\n\nType: "+response.error.type+"\n\nMessage: "+response.error.message;
}
alert(msg);
}
else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
<body>
<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>
<form>
<input type="button" value="Post To Your Timeline " onclick="read()" />
</form>
</body>
</html>
Thank you very much for you help in advance, it's very much appreciated!
First off, you could have created a WordPress plugin to modify the head HTML code, e.g. hook into the wp_head function using hooks.
Secondly, it looks like you have a created a custom read action. Facebook will reject this when you try to get it approved. You should use the built in read action to make the approval process easier.
Finally, the JS function to make the read call is incorrect. The code is ok, but the data you pass into the call is wrong. You don't need to use the access token in the function and you must use the full URL to the article (i.e. include http(s)).
Change your code to something like this:
setTimeout( function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// publish action to facebook
FB.api( '/me/zeitlife:read', 'post', { article : 'http://zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould/' } );
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
}, 2000 );
Notice that the action is 'zeitlife:read' and not 'zeitlife:article' as your done in your code. Article is a parameter in the call. You should test your API calls using the API Explorer tool: https://developers.facebook.com/tools/explorer/
I'm implementing a like button but for some reason the info in the meta tags is not being transferred properly.
If I place the URL into the <fb:like></fb:like> tags then the correct URL is loaded into the wall post on FB. But the image and all the other items described in the meta tags doesn't post with it. If I leave the href out of the <fb:like></fb:like> tags then the link defaults to the page the like button is on. Unfortunately, I need to add some parameters to the link so when the user clicks through to the site from the FB post, it shows correctly.
I've run my link through the link linter and it still shows the same image and the basic site information in the wall post, not the image or the description in the meta tags that shows up in the linter.
Basically, it looks like some of my meta information is being ignored. What am I doing wrong? Is this a cache issue?
EDIT I just tested this in IE and I get an error where the like button should be that says the page can not be found...
The head of the document:
<?xml version="1.0"?>
<!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:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta property="og:title" content="Product Title" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://www.mysite.com/folder/folder/gateway.cfm?ifcn=1&fbx=true&type=product&product=771&page=gateway" />
<meta property="og:image" content="http://www.mysite.com/folder/folder/images/theImage.jpg" />
<meta property="og:site_name" content="My Site" />
<meta property="fb:admins" content="ADMIN_ID123" />
Just inside the body tag:
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
My Like button:
<fb:like href="http://www.mysite.com/folder/folder/product.cfm?pid=562&ifcn=1&fbx=true&type=product&product=562&page=gateway " show_faces="false" width="450" font=""></fb:like>
Facebook like buttons don't like query strings, they need to be encode and even that doesn't work in some browsers.
Try running the link your trying to like through the Facebook Linter. It can give you some useful information and even errors.