i want to redirect users to a specific page after they share on facebook, i have found a good answer here at:
redirect user after facebook share and publish
here's the script
<script type="text/javascript">
FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});
function share_me() {
FB.ui({
method: 'feed',
app_id: 'YOUR_APP_ID',
link: 'SHARE_URL',
picture: 'PIC_URL',
name: 'SHARE_NAME',
caption: 'SHARE_CAPTION',
description: 'SHARE_DESCRIPTION'
},
function(response){
if(response && response.post_id) {
self.location.href = 'SUCCESS_URL'
}
else {
self.location.href = 'CANCEL_URL'
}
});
}
</script>";
<div onclick="share_me()">Share</div>
but when i used the script ,there's no redirect at all, even if the user click "cancel"
please help me with this as am searching for a method like this since 1 week!
Try using another javascript function for redirecting like window.location = "YOUR_PAGE"
Related
Following directions here https://developers.facebook.com/docs/javascript/quickstart
I started with a mostly blank HTML page, just the HTML, Body tags, and a simple Hello World.
I copied and pasted directly from the quickstart page but get nothing (but Hello World does Load).
I have an app ID (I wasn't sure if I should include the {} or not, tried both ways, no change.
I added the code from section "Using the SDK to add Social Plugins", "Using the SDK to trigger a Feed dialog" etc and nothing. Running on CentOS/Apache, server is fine. Not sure what I'm missing. Thoughts?
Thank you for your time.
PS page is here to view source: http://nex916.elementfx.com/purity3.html
Maybe something like the following will be of help?
<div id="fb-root"></div>
<!-- Load the Facebook JavaScript SDK -->
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
// Initialize the Facebook JavaScript SDK
FB.init({
appId: 'YOUR_APP_ID',
xfbml: true,
status: true,
cookie: true,
});
// Check if the current user is logged in and has authorized the app
FB.getLoginStatus(checkLoginStatus);
// Login in the current user via Facebook and ask for email permission
function authUser() {
FB.login(checkLoginStatus, {scope:'email'});
}
// Check the result of the user status and display login button if necessary
function checkLoginStatus(response) {
if(response && response.status == 'connected') {
//alert('User is authorized');
// Hide the login button
document.getElementById('loginButton').style.display = 'none';
// Now Personalize the User Experience
//console.log('Access Token: ' + response.authResponse.accessToken);
} else {
//alert('User is not authorized');
// Display the login button
document.getElementById('loginButton').style.display = 'block';
}
}
FB.ui(
{
method: 'feed',
name: 'The Facebook SDK for Javascript',
caption: 'Bringing Facebook to the desktop and mobile web',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
link: 'https://developers.facebook.com/docs/reference/javascript/',
picture: 'http://www.fbrell.com/public/f8.jpg'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
</script>
<input id="loginButton" type="button" value="Ligin with Facebook" onclick="authUser();" /></div>
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
You have a syntax error in your JS
SyntaxError: syntax error purity2.html:26
To fix it, remove }; from line 19
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
console.log('Logged in');
} else {
FB.login();
}
});
}; // this
it should be like
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
console.log('Logged in');
} else {
FB.login();
}
});
Now your code should work
I'm just trying to load the facebook sharer page into an iframe which is in a positioned div with no success.
Here is the code I'm using for the iframe,
<iframe src="http://www.facebook.com/sharer.php?u=http://www.website.com&t=Title Hoes Here"></iframe>
When I view the page its blank and the iframe source is
<iframe src="http://www.facebook.com/sharer.php?u=http://www.website.com&t=Title Hoes Here">
<html>
<body></body>
</html>
</iframe>
If I view the url directly, everything appears properly.
Does facebook block loading the sharer in an iFrame? and what are my alternatives to have the facebook sharer appear in a modal window?
Thanks
Yes, Facebook pretty much blocks all loading of screens inside of iFrames.
If you are using Facebook connect there is some simple javascript methods you can execute to get a dialog on your page, and to boot Facebook will take care a lot of the work it takes to make the screen look nice.
See this link ( http://developers.facebook.com/docs/reference/javascript/FB.ui/ ) or use the code below:
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
If you are not using Facebook connect then really your only option to get that exact screen is to throw a pop-up.
Another option would be to use the like/send button plugin, this isn't quite the same functionality but is easier to integrate. http://developers.facebook.com/docs/plugins/
Cheers!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
The above line in the head.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '',
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>
<script>
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: '',
link: '',
picture: '',
caption: '',
description: '',
message: ''
});
});
});
</script>
I'm creating an iFrame app on Facebook which is basically just a Mailing List sign up page. However, when people click Sign Up, the FB:ui "Post To Your Wall" pops up and gives the user the option to share what they have just signed up for if they want to. It works fine.
However, I want to find a way to display the FB:ui ONLY to users who are logged into Facebook. My app shouldn't require any permission from users as it is simply a landing page that gives people an option to share if they want to. There's never any automatic sharing done.
I'm using the below code currently:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'my app id', cookie:true,
status:true, xfbml:true
});
FB.getLoginStatus(function(response) {
if(response.session) {
sharethisnow();
} else {
// no user session available, someone you dont know
if(response.status == "notConnected") {
// But user is logged into facebook
sharethisnow();
} else {
// User is not logged into facebook
}
}
});
function sharethisnow() {
FB.ui({ method: 'feed',
link: 'my link',
name: 'my page name',
caption: 'my caption',
description: 'my decription',
picture: 'my picture',
message: 'my message'});
}
</script>
As you can see, I'm attempting to run the FB:ui (sharethisnow function) only to users who are either logged into Facebook AND my app, or logged into Facebook only. But for some reason the code above is only working for page-admins. When I log in as an admin, I sign up and the FB:ui pops up as it should do. However, when I view the page as a non-admin (just a general logged in Facebook user), the FB:ui pops up but says that there is an error and to "please try again later".
It's working fine for me, maybe check the Page settings (private/public). Also try this simpler code first:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'APP_ID', cookie:true,
status:true, xfbml:true
});
FB.getLoginStatus(function(response) {
if(response.status == "unknown") {
return;
}
sharethisnow();
});
function sharethisnow() {
FB.ui({
method: 'feed',
message: 'my message'
});
}
</script>
I am using Facebook's Javascript SDK "FB.ui" to pull up an OAuth dialog. Once you click allow, I need to capture the session object, extract the user id and use it further in my script. For some reason I cannot get this working properly, I keep getting undefined, even though the session does exist.
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : '***************',
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.session) {
//do something
} else {
FB.ui({
method: 'oauth',
display: 'page',
scope: 'email',
perms: 'email'
},
function(response) {
alert(response.session.uid); //returns underfined
});
}
});
</script>
To get the userID:
FB.getLoginStatus(function(response) {
alert(response.authResponse.userID);
});
When you login from login button of facebook then it stores cookies in your system that contains your access token that is also unique. That cookies contains your facebook id also.
Check your response. I bet it says something like "display" must be one of "popup", "iframe" or "hidden". Apparently the oauth dialog cannot be called with the default "page" display. And display: 'iframe' requires that you include an access_token, which is why you're calling the oauth dialog in the first place >:l .
I don't think FB.ui can currently be used to get the oauth dialog, unless you want to use a popup, which most everyone has blocked nowadays.
So I got this to work as I would like. This may not be the best way, but after much digging around and frustration I hope this could help somebody with the same question get on the right track.
JS source:
FB.getLoginStatus(function(response) {
if (!response.session) {
//initiate FB OAuth js popup dialog
FB.ui({
method: 'oauth',
display: 'page',
scope: 'email',
perms: 'email'
},
function(response) {
if (response.session) { //if permission Allowed
var thesession = response.session;
var thesession = eval('(' + thesession + ')'); //decode json
//POSTing to local file get.user_graph.php, to fetch user info
$.ajax({
type: "POST",
url: "get.user_graph.php",
data: "client_id=<?php echo $appId; ?>&client_secret=<?php echo $secret; ?>&sessions="+thesession.session_key+"&type=client_cred&uid="+thesession.uid,
dataType: "text",
success: function(user_graph){
var user_graph1 = eval('('+user_graph+')');
alert(user_graph1.name); //users name
alert(user_graph1.id); //users id
alert(user_graph1.email); //users email
alert(user_graph1.link); //users profile link
}
});
} else {
//if permission Not Allowed
}
});
}
});
get.user_graph.php source:
//exchange our session for an access_token
define('POSTURL', 'https://graph.facebook.com/oauth/exchange_sessions');
define('POSTVARS', 'client_id='.$_POST['client_id'].'&client_secret='.$_POST['client_secret'].'&sessions='.$_POST['sessions'].'&type=client_cred');
$curl_token = curl_init(POSTURL);
curl_setopt($curl_token, CURLOPT_POST,1);
curl_setopt($curl_token, CURLOPT_POSTFIELDS,POSTVARS);
curl_setopt($curl_token, CURLOPT_FOLLOWLOCATION,1);
curl_setopt($curl_token, CURLOPT_HEADER,0);
curl_setopt($curl_token, CURLOPT_RETURNTRANSFER,1);
$token = curl_exec($curl_token);
$token_decoded = json_decode($token,true);
//get the user graph (personal info)
$user_graph = file_get_contents("https://graph.facebook.com/".$_POST['uid']."?access_token=".$token_decoded[0]['access_token']);
echo $user_graph;
I have a bit confusion using facebook API. I am using a code that is working out side of facebook but not in facebook application canvas page.
I have bit idea but not sure. Can anybody let me know the reason behind this and the code that will run in facebook application.
What is difference you run code using application like
http://apps.facebook.com/exampleAPP/test.php
or normal url
http://www. example.com/example/test.php
http://www. example.com/example/ is the canvas URL
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '115454544334343454',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.ui(
{
method: 'stream.publish',
attachment: {
name: 'JSSDK',
caption: 'The Facebook JavaScript SDK',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
href: 'http://fbrell.com/'
},
action_links: [
{ text: 'fbrell', href: 'http://fbrell.com/' }
]
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
</script>
I'm fairly sure stream.publish is deprecated and unsupported. What you want instead is the Feed dialog.