I have tried to follow the sample tutorial of facebook : developers.facebook.com/docs/opengraph/tutorial/#debug
But after i made it and clicked on cook button , it is showing "Error Occured".
You can see the app here : http://www.akashbc.com/facebookapp/index.html
The following is the page source for the app:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/abcrecipelist#">
<meta property="fb:app_id" content="258611890922127" />
<meta property="og:type" content="abcrecipelist:recipe" />
<meta property="og:title" content="Oreo Stuffed Cookies" />
<meta property="og:image" content="http://1.bp.blogspot.com/-92sA7pC51pg/T9CKdHHeDzI/AAAAAAAACbg/MRq4PR2P5QQ/s1600/jQuery_Cookies.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://www.akashbc.com/facebookapp/index.html">
<script type="text/javascript">
function postCook()
{
FB.api('/me/abcrecipelist:cook&recipe=http://www.akashbc.com/facebookapp/index.html','post', function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'258611890922127', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>>
<h3>
<font size="30" face="verdana" color="grey">Stuffed Cookies
</font>
</h3>
<p>
<img title="Oreo Stuffed Cookies" src="http://1.bp.blogspot.com/-92sA7pC51pg/T9CKdHHeDzI/AAAAAAAACbg/MRq4PR2P5QQ/s1600/jQuery_Cookies.jpg" width="550"/><br />
</p>
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
<fb:activity actions="YOUR_NAMESPACE:cook"></fb:activity>
</body>
</html>
Also here is the screenshot from basic settings of the app :
Please tell me whats wrong..
Thanks in advance :)
Your API call is incorrect:
FB.api('/me/abcrecipelist:cook&recipe=http://www.akashbc.com/facebookapp/index.html' ...
Should be
FB.api('/me/abcrecipelist:cook?recipe=http://www.akashbc.com/facebookapp/index.html' ...
I.e. The & should be a ?.
Related
I am trying to create a script that authenticates facebook users and posts on their wall every post they open from my site.
I have already built the authentication part. However, on the part when it automaticly posts on a user's wall, I can't get it to post the URL of the post that they are reading but only a static URL
This is My Watch.php
<?
include"func/ob_get_clean.php";
require 'config.php';
require_once 'inc/lib/facebook.php';
require_once 'inc/fb.php';
$string = get_include_contents('func/db_info.php');
include("admin/settings".".php");
$surl = $_SERVER['HTTP_HOST'] ;
$getid=$_GET['v'];
if(is_numeric($getid)){
mysql_query("UPDATE videos SET views=views+1 WHERE id='$getid'");
} else {
include"func/404.php";
}
$vi=mysql_query("SELECT * FROM videos WHERE id='$getid' LIMIT 1");
$v = mysql_fetch_object($vi);
$vidID = "$v->videoid";
$url = "http://gdata.youtube.com/feeds/api/videos/". $vidID;
$doc = new DOMDocument;
$doc->load($url);
$title = $doc->getElementsByTagName("title")->item(0)->nodeValue;
$des = $doc->getElementsByTagName("description")->item(0)->nodeValue;
$key = $doc->getElementsByTagName("keywords")->item(0)->nodeValue;
//$token is the access token from the URL above
$post = array('access_token' => $token,
'link' => 'www.mywebsitelink.com');
try{
$res = $facebook->api('/me/feed','POST',$post);
print_r($res);
} catch (Exception $e){
echo $e->getMessage();
}
?>
<head>
<html xmlns:fb="http://ogp.me/ns/fb#">
<title><?=$title?></title>
<meta property="og:url" content="http://<?=$surl?>/watch.php?v=<?=$getid?>"/>
<meta property="fb:app_id" content="<?=$fbappid?>"/>
<meta property="og:title" content="<?=$title?>"/>
<meta property="og:type" content="video" />
<meta property="og:image" content="http://img.youtube.com/vi/<?=$v->videoid?>/hqdefault.jpg"/>
<meta property="og:description" content="<?=$des?>"/>
<meta property="og:site_name" content="YourVidz"/>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">
<META NAME="ROBOTS" CONTENT="INDEX">
<META NAME="AUTHOR" CONTENT="Menti">
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="en-US">
<META NAME="COPYRIGHT" CONTENT="© 2011 Galeria Shqip">
<META NAME="title" CONTENT="<?=$title?>">
<META NAME="DESCRIPTION" CONTENT="<?=$des?>">
<META NAME="KEYWORDS" CONTENT="<?=$key?>">
<link href="img/favicon.ico" rel="icon" type="image/x-icon" />
<link type="text/css" rel="stylesheet" href="css/watch.css" />
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</head>
<body>
<div class="banner"><?=$banner?></script></div>
<img src="img/logo.png" border="0">
<div align="center"><h3><?=$title?></h3><br>
<iframe src="vid.php?v=<?=$getid?>" height="378px" width="562px" frameborder="0" scrolling="no"></iframe><br>
<table border="0" cellpadding="3" cellspace="0" width="562px"><tr>
<td width="400px"><?=$v->views?> Views</td>
<td>
<div class="addthis_toolbox addthis_default_style addthis_16x16_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_6"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
</td></tr></table>
<br>
<fb:comments href="http://<?=$surl?>/watch.php?v=<?=$getid?>" num_posts="5" width="562" data-colorscheme="dark"></fb:comments>
</div>
<div style="display:none">
<?=$online?>
</div>
</body>
I have a facebook application where the user choose 4 of his friends and then it creates a video (swf) with the pictures of your friends in it (loaded via xml). So I need to share this video on the user timeline. Everything works fine but the video is not embedded in the post on his timeline, there is only a post with the link to the page in it.
The weird thing is, if I post the url directly on my timeline, the video is embedded, but not if the same link is posted via the application.
here is my code called by the share button in js :
function postToFeed() {
var obj = {
method: 'feed',
link: 'https://mysite.com/flash/share-page.php?id=22',
picture: 'https://mysite.com/images/video-preview.jpg',
name: 'Name',
caption: 'Caption',
description: 'Description'
};
function callback(response) {
//some code here
}
FB.ui(obj, callback);
}
and the code in my share-page.php
<?php
$id_inscription = $_GET['id'];
$video_url = 'https://mysite.com/flash/share-page.php?id=22';
$video_preview_image = 'https://mysite.com/images/video-preview.jpg';
?>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta property="og:video" content="<?php echo $video_url; ?>"/>
<!-- Open grah tags for Facebook -->
<meta property="og:title" content="Test video player" />
<meta property="og:description" content="A video player interface experiment." />
<meta property="og:type" content="video" />
<meta property="og:url" content="<?php echo $video_url; ?>"/>
<meta property="og:image" content="<?php echo $video_preview_image; ?>"/>
<meta property="og:site_name" content="Site name"/>
<!-- Video specific open graph tags -->
<meta property="og:video" content="<?php echo $video_url; ?>" />
<meta property="og:video:secure_url" content="<?php echo $video_url; ?>" /> <!-- Required for people on Facebook who have secure browsing enabled! -->
<meta property="og:video:width" content="325" />
<meta property="og:video:height" content="180" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<script src="js/swfobject.js"></script>
<script>
var flashvars = {
xmlUrl:"xml/data-<?php echo $id_inscription; ?>.xml",
policyFileUrl:"http://profile.ak.fbcdn.net/crossdomain.xml"
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "",
wmode: "opaque"
//wmode: "direct" // can cause issues with FP settings & webcam
};
var attributes = {
id:"content"
};
swfobject.embedSWF(
"app.swf",
"altContent", "480", "270", "10.0.0",
"expressInstall.swf",
flashvars, params, attributes);
</script>
</head>
<body>
<div id="altContent">
<p>Get Adobe Flash player</p>
</div>
</body>
</html>
Found it, in the javascript you have to add
source: 'https://mysite.com/flash/app.swf'
DOesnt work for me .
Also facebook says ,It is NOT supposed to work By Design .
https://developers.facebook.com/bugs/589975484398226?browse=external_tasks_search_results_526fc388b99e18881434478
Please share here your code snippet if you could make it work . I have the meta tags taking care for the secure video Url as well .
i used this tutorial https://developers.facebook.com/docs/opengraph/tutorial/ to make my first App but i want to use php variable for my og:title like this <meta property="og:title" content="<?php echo $title; ?>" /> . This php variable is changing constantly every time the page loads but when I post my action in the facebook appears with the old title!
Here's the code:
<?php
$title = ' Hello world';
// <---- This php variable is changing every time
the page loads but the title is not being recognised
?>
<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# fitnessgod: http://ogp.me/ns/fb/fitnessgod#">
<meta property="og:locale" content="en_US" />
<meta property="fb:app_id" content="My app Id" />
<meta property="og:type" content="fitnessgod:news" />
<meta property="og:url" content="https://www.fitness-god.com/share-facebook.php" />
<meta property="og:title" content="<?php echo $title; ?>" />
<meta property="og:description" content="let's do sport" />
<meta property="og:image" content="https://www.fitness-god.com/images/sport dinamic.png" />
<script type="text/javascript">
function postCook()
{
FB.api('/me/fitnessgod:share' +
'?news=https://www.fitness-god.com/share-facebook.php','post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'My App id', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="30" face="verdana" color="grey">
Stuffed Cookies
</font>
</h3>
<p>
<img title="Sports News"
src="https://www.fitness-god.com/images/sport dinamic.png"
width="550"/><br />
</p>
<form>
<input type="button" value="Share news" onClick="postCook()" />
</form>
<fb:activity actions="fitnessgod:share"></fb:activity>
</body>
</html>
You need to correct the meta tags definition. Use attribute name, not property:
E.g.:
<meta name="og:title" content="<?php echo $title; ?>" />
You can use the debugger to test your code:
http://developers.facebook.com/tools/debug
Also note that when you click share, the content of your page might be cached. But, the debugger, always gets the latest content.
It appears you are experiencing "freezing" of og:title that Facebook performs after a number of actions – 50 likes, shares and/or comments – were performed with that link.
One of the main reasons why Facebook does this, is to prevent many people sharing a seemingly safe link and then having the site owner replace the title with offensive content and have it display on people's timelines.
For additional information, see this link.
I'm trying to implement step two of the Recipe Box Facebook app tutorial. I have followed the instructions in step one to set up my app on Facebook and have uploaded the code pasted below to my server as per the instructions in step two of the tutorial. When I load the web page and click the add-to-timeline link I get a Facebook error stating:
Given URL is not allowed by the Application configuration.
Any insight would be greatly appreciated.
Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<head/>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'328617653826422', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="30" face="verdana" color="grey">
Stuffed Cookies
</font>
</h3>
<p>
<img title="Stuffed Cookies"
src="http://example.com/cookie.jpg"
width="550"/>
</p>
</body>
</html>
In your app settings, be sure that domain you specify is the same domain as where this code lives. Also in the example code, their <head> tag looked like <head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/YOUR_NAMESPACEx#">. Also you appear to be missing the og: tags in your head section as well.
Here's the example code I just downloaded from their site, did I grab the wrong link? Or are you basing yours on old example code?
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/YOUR_NAMESPACEx#">
<meta property="fb:app_id" content="YOUR_APP_ID" />
<meta property="og:type" content="YOUR_NAMESPACE:recipe" />
<meta property="og:title" content="Oreo Stuffed Cookies" />
<meta property="og:image" content="http://YOUR_URL/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://YOUR_URL/cookie.html">
<script type="text/javascript">
function postCook()
{
FB.api('/me/YOUR_NAMESPACE:cook&recipe=http://YOUR_URL/cookie.html','post', function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>>
<h3>
<font size="30" face="verdana" color="grey">Stuffed Cookies
</font>
</h3>
<p>
<img title="Oreo Stuffed Cookies" src="http://YOUR_URL/cookie.jpg" width="550"/><br />
</p>
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
<fb:activity actions="YOUR_NAMESPACE:cook"></fb:activity>
</body>
</html>
Im trying to add a facebook like button to a website im working on, but none of the meta attributes i add show up.
I have the following in my html, (irrelevant parts not included)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
...
<meta property="og:site_name" content="My Site" />
<meta property="og:title" content="Some Product"/>
...
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPIKEY',
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#xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
...
...
<fb:like layout="button_count"></fb:like>
...
Any pointers on what im doing wrong would be much appreciated.
I realised, the problem was that i was testing the machine on my local computer. It started working once i put the website online.
Believing the Facebook page
http://developers.facebook.com/docs/guides/web
it should look like this :
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
You're missing a number of the required open graph tags. They're defined here. At a minimum you're looking for -
<meta property="og:title" content="Title of page"/>
<meta property="og:type" content="CONTENT TYPE"/>
<meta property="og:url" content="URL of PAGE"/>
<meta property="og:image" content="URL of IMAGE"/>
<meta property="og:site_name" content="SITE NAME"/>
<meta property="fb:admins" content="USER_ID"/>