I'm working on a facebook iframe which is basically a prize draw where the user enters his/her email in a form to participate. I have seen on some other similar facebook tabs that when you submit the form then the facebook feed dialog pops up so the user can post the their wall. Would anyone be able to share how that is done? I have it currently as a button on the page that loads after submit, but i really think this pop-up immediately after submit works more effectively in terms of social sharing. The task I have been set with this tab is to really drive fan acquisition so it's quite important that there is a low barrier to entry. Anyways, any help on the above would be greatly appreciated.
Thanks,
Nick
What you are looking for is the low-barrier of entry feed dialog.
https://developers.facebook.com/docs/reference/dialogs/feed/
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>My Feed Dialog Page</title>
</head>
<body>
<div id='fb-root'></div>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<p><a onclick='postToFeed(); return false;'>Post to Feed</a></p>
<p id='msg'></p>
<script>
FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});
function postToFeed() {
FB.ui({
method: 'feed',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
}, function (response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
});
}
</script>
</body>
</html>
Related
I tried to integrate facebook invite feature as follow! when I clicked on button click here it not shows me a dialog for me ( real is it shows about 0.1 second then it hiddens) ... Anybody can help me resolve this problem ! thank you!
this is my code:
<html>
<head>
<title></title>
</head>
<body>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'233108243711708',
cookie:true,
status:true,
xfbml:true
});
function InviteF()
{
FB.ui({
method: 'apprequests',
message: 'Welcome to 2my4edge',
});
}
</script>
<a href="#try" onclick="InviteF();">
Click Here
</a>
</body>
</html>
You should use the Send dialog to achieve what you want to do.
https://developers.facebook.com/docs/sharing/reference/send-dialog
I have an option to invite facebook friends on my website and I use the code given below. But problem is that it opens in a pop up and chrome and firefox do block the pop up. How can I make it appear in a new tab or window ? Or is there any way so that my pop up won't get blocked ?
<html>
<head>
<title>my website</title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'xxxxxxxxxxxxxxx', cookie:true,
status:true, xfbml:true
});
FB.ui({ method: 'apprequests',
message: 'Take a look at this new website.'});
</script>
</body>
</html>
You basically have 2 options;
Open the popup on a mouseclick event (since these are not blocked by the browser), or
Don't use a real popup, but instead use some cool DHTML widget like http://thickbox.net/
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 am developing a Facebook iframe application in JavaScript. The issue is if the user hit my Facebook application URL, I want to redirect the user to the Facebook login page if they are not logged in and after they enter their credentials they will be directed to my application, NOT their Facebook homepage. Here is my code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Psych-oh! Meter</title>
</head>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script>
FB.init({appId:'178012645616471', xfbml: true, cookie: true, oauth: true, fbconnect: false});
FB.Event.subscribe('auth.login', function(response) {
alert("response");
FB.api('/me', function(resp) {
alert('Your name is sub: '+ resp.name);
alert('Your email id is sub: '+ resp.email);
});
});
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// Logged in and connected user, someone you know
FB.api('/me', function(resp) {
alert('Your name is1111... ' + resp.name);
alert('Your email is1111.... ' + resp.email);
});
}
else {
// No user session available, someone you don't know.
top.location.href='https://graph.facebook.com/oauth/authorize?type=web_server&client_id='+178012645616471+'&redirect_uri=https://apps.facebook.com/palmchipprojecta/&display=page';
}
});
</script>
<body>
<h1>Welcome</h1>
</body>
So when I hit the URL while I am not logged into Facebook, I see the Facebook login page's blue header and the below page is saying Page not Found and when I log in on that page, it redirects to my home page of Facebook, not to my application's home index page.
Would you be opposed to using the function FB.login to prompt the user to sign in using a popup?
EDIT
I spoke too soon. From the FB.login docs:
FB.login opens a popup window, and therefore you should only call FB.login when bound to a user driven click. Most browsers block popups, unless they were initiated from a user event, such as a click on a button or a link.
I'm trying to use Facebook's fb:friend-selector FBML tag, but my application is running in an iframe. Is it possible to use this tag in an iframe? If so does anyone have any examples?
Yes, this is definitely possible, but you have to use Facebook Connect and XFBML. Specifically, you want to use the fb:serverfbml tag to get fb:friend-selector working. I have an iframe app whereby I use all of this and the fb:friend-selector in the standard "invite friends to your app" context, and it works great.
Here is the body of my template file, which gets output inside the body of my iframe:
<fb:serverfbml style="width: 650px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="http://example.com/invite/sent"
method="POST"
invite="true"
type="My App"
content="Try out my app!
<fb:req-choice url='http://your-facebook-canvas-url'
label='<?php echo htmlspecialchars("Accept button text",ENT_QUOTES); ?>'
/>
" >
<fb:multi-friend-selector
showborder="false"
actiontext="Invite your friends to try My App."
exclude_ids="<?php echo $excludeIds; ?>"
rows="3"
/>
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
In the footer of the page, I have the standard Facebook Connect code, which will load and render the fb:serverfbml contents:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
</script>
That should be all you need (fill in your own options where applicable, of course). You'll have to set up Facebook Connect to work with a cross-domain receiver file. I suggest following the rendering XFBML steps.
The question in this thread is still relevant but the answer is out of date. You should use the new javascript SDK. This should replace the second code snippet posted by zombat
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({appId: 'your app id',
status: true,
cookie: true,
xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out
}
});
</script>
more info here: http://www.clickonchris.com/2010/11/facebook-javascript-sdks/
Since that are a lot of questions about the friend-selector within an iframe.
Guys the correct sintax now is <fb:serverfbml width="650px">
one MAJOR and IMPORTANT point that gets missed is that many of you (including me) stick in scripts just about anywhere... but the "FB" load.js file needs to be loaded IMMEDIATELY after the body tag.
at least this is what I found to make everything work and humm accordingly. I found it on a post on some other site (wasn't sure if I should post it here or not...) but it came after spending countless hours, doing the above aforementioned - as well as following every other 1,2, 3 step punch into getting the iframe to size properly...
and now i've gotten it to work :)