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/
Related
Here's what I tried for Facebook Debugger tool:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fdevstmaws.linesofphp.com%2Fvideo%2Findex%2F52f0fd544eab99ae28000106
Scrape Information:
Response Code 401
Fetched URL http://devstmaws.linesofphp.com/video/index/52f0fd544eab99ae28000106
Canonical URL http://devstmaws.linesofphp.com/video/index/52f0fd544eab99ae28000106
Warning
Critical Errors That Must Be Fixed
Bad Response Code URL returned a bad HTTP response code.
Warning
Errors That Must Be Fixed
Missing Required Property The 'og:type' property is required, but not present.
Notice
Open Graph Warnings That Should Be Fixed
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
URLs
Graph API https://graph.facebook.com/1419346681640654
Scraped URL See exactly what our scraper sees for your URL
The URL that I would like to share is: http://devstmaws.linesofphp.com/video/index/52f0fd544eab99ae28000106
What could be the reason? It's not scraping my site anymore.
Scraper response: Document returned no data
Meta tags:
<meta property="og:image" content="http://devstmaws.linesofphp.com/static/img/logo_facebook.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:title" content="Check out my awesome video!" />
<meta property="og:site_name" content="Check out my awesome video!" />
<meta property="og:description" content="SearchTheMusic gives you the ability to legally add music to your videos and share them with the world!" />
<meta property="og:url" content="http://devstmaws.linesofphp.com/video/index/52f0fd544eab99ae28000106" />
Facebook has to be able to access the URL for the Open Graph tags to work, and your URL is protected by a password. Only public URLs are possible. You get the same error as if you cancel the authorization popup.
I give you other way also. Here I remove javascript SDK.Other are all same
Taken intermediate step.
So I take this steps:
I have created folder , outside of project folder(password protected).i.e. outerface.And create a file,say projectfront.php
First:
defined a outside url
Here, I have used aforesaid file path. So now Facebook can't abuse me.
<?php
$faceproject_url='[your servar path]/outerface/projectfront.php';
?>
<div class="fb-share-button" data-href="<?php echo $faceproject_url; ?>" data-type="button_count"></div>
Second:
In outerface/projectfront.php-
I have written(with proper doctype) as:
......
........
<script>
function xyz()
{
url=[Give your target link];// it will your project page, which you want to share.
window.location=url;
}
</script>
</head>
<body onload="xyz()">
<?php
ob_start();
?>
Please wait....
</body>
</html>
[please do proper html]
So now if any user click on your share button, share'll be successfully done and Facebook will not obstacle us. Also If you click on link on Facebook(in wall) after share, you will redirect successfully to your link defined in projectfront.php.
Thanks
Atanu Mitra
You usually receive this error when the fetched URL to the page and the OG:URL do not match.
Using javascript SDK for Facebook
I have overcome with intermediate step.
My project url is also password protected.
So I take this steps:
I have created folder , outside of project folder(password protected).i.e. outerface.And create a file,say projectfront.php
Call a function using Facebook sdk and use FB.ui({ with method:feed. And I have taken a tricks. In link, I have used aforesaid file path. So now Facebook can't abuse me.
<div>share</div>
<script>
function sharesend()
{
FB.ui({
method: 'feed',
link: '[your servar path]/outerface/projectfront.php',
picture: [give picture, if you can],
caption: [give any caption],
description: [give any description],
.....................,
..............
},
function(response){}
);
}
</script>
In outerface/projectfront.php- I have written(with proper doctype) as:
......
........
<script>
function xyz()
{
url=[Give your target link];// it will your project page, which you want to share.
window.location=url;
}
</script>
</head>
<body onload="xyz()">
<?php
ob_start();
?>
Please wait....
</body>
</html>
[please do proper html]
So now if any user click on your share button, share'll be successfully done and Facebook will not obstacle us. Also If you click on link on Facebook(in wall) after share, you will redirect successfully to your link defined in projectfront.php.
Thanks
Atanu Mitra
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 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'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.
I have a set of pages in my site that are using the FBML method of inserting a FB Recommend button. My problem is that every page on my site shows the exact same recommend count ("557 people recommend this page" even though I just installed the button), and when I've tried to Recommend it myself, it shows up in my news feed with the wrong page title, the wrong URL, and of course, every recommend button on the site is incremented. Here is my code:
og tags (I replaced these with anonymous values to protect my client from looking like they have an idiot developer) ;) :
<meta property="og:title" content="XXX page title"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://abc.xyz.com/path/to/my/page/"/>
<meta property="og:site_name" content="XXX site name"/>
<meta property="fb:admins" content="xxx my facebook id"/>
<meta property="og:description" content="xxx short description"/>
...then just inside the body:
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
...and then later on in the page (the only reason I'm using the FBML method is so I can track the recommend events in google analytics -- this should be unrelated, but for the purposes of full disclosure, I'm including that code here too)...
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackEvent', '<?php echo $item->type ?>', 'Facebook Recommend', '<?php echo $item->title ?>']);
});
</script>
<!-- FB LIKE BUTTON INSERTED HERE -->
<fb:like href="<?php echo urlencode('http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'] )?>" show_faces="false" width="450" action="recommend" font="arial" colorscheme="dark"></fb:like>
The link that shows up in my feed is http://abc.xyz.com/path/to/my/ (the last segment of the URL is missing), and the title is an old one; I realized that all the pages had the same title when I was setting this up, and so I gave them different titles since. I have run several of my URLs through the URL linter and there are no errors, and all the data looks correct.
Here are two notes:
Since you checked several URLS using the URL Linter and the result came up as expected this means it's a caching problem, read this.
If you are not using Facebook Graph API...or any Facebook related services other than the Like Plugin, then the first Facebook Javascript initialization snippet is not needed but if it's used then (<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>) is not needed.
EDIT:
Based on the comments, some of the pages have more than 50 likes this means you can't change the title anymore:
You can update the attributes of your
page by updating your page's
tags. Note that og:title and og:type
are only editable initially - after
your page receives 50 likes the title
becomes fixed, and after your page
receives 10,000 likes the type becomes
fixed. These properties are fixed to
avoid surprising users who have liked
the page already. Changing the title
or type tags after these limits are
reached does nothing, your page
retains the original title and type.
source [Editing Meta Tags].
BUT if you really need to change the title and you are okay of probably losing the likes' count, then you can add a fake parameter to the end of the URL meta tag so that Facebook thinks it's a new page:
http://www.domain.com/page.php?123
Please note that I've never used this technique with the new Like Plugin.