I am developing a facebook application using IFrame. how to add share option in my application.
You need to use XFBML in an Iframe application.
This should work. Put your Facebook application's API Key in and reference your cross-domain receiver file (xd_receiver)
<fb:share-button href="http://apps.facebook.com/your_app" type="box_count"></fb:share-button>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function() {
FB.init("api key goes here", "path to your xd_receiver file goes here");
});
</script>
Related
I am trying to build a widget that other websites can include via an iframe. The plugin contains the Facebook Checkbox Plugin.
Consider the following code for the iframe:
<!DOCTYPE html>
<html>
<head>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '3297885870227646',
autoLogAppEvents : true,
xfbml : true,
version : 'v4.0'
});
};
</script>
<script async crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<body>
<div class="fb-messenger-checkbox"
origin="https://fb-marketing-widget.herokuapp.com/widget-iframe"
page_id="110054573751247"
messenger_app_id="3297885870227646"
user_ref="<%= userRef %>"
allow_login="true"
size="standard"
skin="light"
center_align="true">
</div>
</body>
</html>
The above code works when opening the iframe URL directly in the browser. However, when I include the same iframe in another website with a different domain, I'm getting Refused to display 'https://www.facebook.com/v4.0/plugins/messenger_checkbox.php?... in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://my-iframe-domain.com".
Please note that the iframe works when being opened directly, so this is clearly not a problem with whitelisting the domain, having the wrong app id etc.
Any input on how I can the above code as an iframe to be included in other websites would be greatly appreciated!
Facebook restricts which sites are able to frame their content, the error you see comes from your site not being allowed to frame the content from Facebook. Implementation step 1 (https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin/) for Facebook Checkbox plugin is to whitelist your domain(s): https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting. This is not something you can change on your page.
I am Using the following code to use Fconnect in my website:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" ></script>
<div id="fb-root"></div>
<script type="text/javascript" language="javascript">
FB_RequireFeatures(["XFBML"], function () {
FB.init(MY_App_ID, Domain_Path + "xd_receiver.htm");
});
</script>
<fb:login-button length='short' size='medium' onlogin="facebook_onlogin_ready()" ></fb:login-button>
previously the following code was returning the Session Key but now its not.
FB.Facebook.apiClient.get_session()
its giving Undefined error
How i can get User SessionKey using the Facebook Jascript Api.
That code is using a deprecated API which is no longer supported and could be removed at any time as it's scheduled for deletion.
The current Javascript SDK uses OAuth access tokens, not session keys.
I am not able to fire the edge.create event in the Like box. However, it works with a normal like button. Is there a restriction?
Here is my coding:
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'ID12456',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<p>Like Box:</p>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box href="http://www.facebook.com/apps/application.php?id=163685566990893" stream="false"></fb:like-box>
<br/><br/>
<script>
FB.Event.subscribe('edge.create', function(response) {
alert("Ok");
});
</script>
</body>
</html>
Mabe because you're linking your Facebook JavaScript code (all.js) two times.
I tried that code on FB Rell, and it's working.
<h1>Platform like-box Plugin with Defaults</h1>
<fb:like-box name="platform"></fb:like-box>
<script>
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
</script>
Yes this is a known FB bug. See http://developers.facebook.com/bugs/378710432185222/
It seems to work sometimes in some situations and not in others. One solution is to swap in the regular like button instead. If you use the Facebook JS API and an FQL call, you can get access to all the info you need (page name, url, square pic) to recreate a similar looking widget. Not ideal, but it works...
I am trying to find a walk through on how to register users via facebook onto my site.
The facebook developers site keeps confusing me and I was hoping there where easier tutorials to follow.
Stephen,
It can be a little complicated.
You have to combine the documentation at:
http://developers.facebook.com/docs/guides/web/
http://developers.facebook.com/docs/plugins/registration/
Boiling it down to the simplest case:
<html>
<head>
<title>My Facebook Registration Page</title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'yourAppID', cookie:true,
status:true, xfbml:true
});
</script>
<fb:registration
fields="[{'name':'name'}, {'name':'email'},
{'name':'favorite_car','description':'What is your favorite car?',
'type':'text'}]" redirect-uri="Your processing URL">
</fb:registration>
</body>
</html>
Facebook will return an encrypted form field with all the user data called "signed Request" You will need to decrypt this field with your secret key. There is an PHP example at the bottom of http://developers.facebook.com/docs/plugins/registration/
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 :)