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>
Related
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 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/
This is Sasikumar A, I created the app for Galatta and i added the following details in web page head section
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta property="fb:app_id" content="123225854445872"><meta property="og:type" content="galatta-new:news"> <meta property="og:url" content="http://v3.galatta.com/tamil/news/tamannaah-the-golden-girl/39536/"><meta property="og:title" content="Tamannaah: The golden girl"> <meta property="og:description" content="Tamannaah: The golden girl"> <meta property="og:image" content="http://v3.galatta.com/community/images/logo.png"> <meta property="og:site_name" content="Galatta.com" /><meta property="og:locale" content="en_US" /></head><body><div id="fb-root"></div>{literal}<script>(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#appId=123225854445872&xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js);}(document));</script>{/literal}<div class="fb-like" data-href="{$HTTP_REFERER}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"
data-font="tahoma"></div></body></html>
Link : http://v3.galatta.com/tamil/news/tamannaah-the-golden-girl/39536/
I created the Open Graph action type, object type, aggregations for Galatta App.
In action type i got the code for - See all your Read actions:, Create a new Read action:, Delete a Read action:
Please tell me how to use this code in my web page.
I need while i click the Like button I need result like below / or how to work for below result.
Sasi Arjun read "Tamannaah: The golden girl" on Galatta
Please guide me how to publish the page on Facebook like above line.
Here is a really nice tutorial on exactly that topic.
If you are asking about the "code" links next to the action types in the Open Graph Developer tool: These serve just as an example, as you can invoke your actions via curl.
Your website would have to send these requests, e.g. using PHP on your server, or in the client's browser using the Facebook Javascript SDK.
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 am trying to create a share button for links using the Facebook share button:
http://www.facebook.com/facebook-widgets/share.php
http://wiki.developers.facebook.com/index.php/Facebook_Share
However when I try to use the t value in my URL's they don't work.
I even tried using the example on the API page:
http://www.facebook.com/sharer.php?u=http%3A%2F%2Fdevelopers.facebook.com%2F&t=Facebook%20Developers
And it doesn't work... It sets the title as developers.facebook.com not Facebook Developers as specified by the URL
Anyone know how I can make this work correctly?
I want my share links to come up as... 'Title Of what I am sharing' and then... the url directly to that item.
The Facebook share link dynamically fetches the title and images from the page/website to share. The title specified in the link is only used while Facebook loads the page details. Check this link out:
http://www.facebook.com/sharer.php?u=http://www.rackspace.com&t=SOME%20TITLE
My solution to the title parameter is:
as url, add to the page url a variable (lik real_title):
http://www.facebook.com/sharer.php?u=http://mydomain.net/mypage?real_title=MyTitle
Then, in the index.php page:
< title>
<?php if (isset ($_GET['real_title']))
print ($_GET['real_title']);
else
print ("Default page title"); ?>
< /title>
Facebook crawls the given URL in search of Open Graph meta tags. It gives precedence to the contents of those tags, if they're present. Here's a sample of what the Open Graph tags look like:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
...
</head>
...
</html>
More info at http://developers.facebook.com/docs/opengraph/
Try Facebook Feed dialog http://developers.facebook.com/docs/reference/dialogs/feed/
Use direct URL example
I also met this problem, but i have found the problem because i didn't put facebook code in that file http://bannedadsense.com/banned-adsense-list/isbanned, i was very stupid with it and lost time to fix, but now i'm lucky, i have just fixed done now, simple only copy fb code to all pages you want to use fb share like button.
<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/sdk.js#xfbml=1&version=v2.8&appId=put_number_id_here";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>