I don't want to use the FB like button and apparently "share" has been deprecated.
What I am trying to do is have users click "share"/"post to wall" from my website, and it then places a post on their newsfeed/profile with information on my website/url.
I can't seem to find any code around that will do this- does anyone have an example?
And do they have to connect first? Or can it check if they're logged in, if not, login and it shares automatically?
Thanks!
This is possible in two ways:
You can use the facebook Javascript SDK if you have an app:
FB.ui({
method: 'feed',
link: 'absolute url',
name: 'testtitle',
caption: 'testcaption',
description: 'testdescription',
picture: 'absolute picurl',
message: ''
});
Note that "message" MUST be empty, you can also just remove it.
Without an app (no user can block the app and never get anything from the app anymore, but only possible with popup):
open a popup window with Javascript for the facebook sharer:
http://www.facebook.com/sharer.php?u=<url to share>&t=<title of content>
Note that everything needs to be urlencoded. Of course you can also just use it as a link. And don't forget the og tags in this case.
Edit: Please be aware that "auto sharing" is not allowed on facebook. you have to present the user what you want to share in his name and he has to be able to accept it and add his personal message. would only be possible with an app and an authorized user anyway.
Btw, both methods explained here work without user login/authorization.
Edit2: There is also a "share" method with FB.ui now, to post a link or use Open Graph Actions/Objects.
If you have a dynamic web site as I do, you may strongly want my code.
Note 1: You can't do that if you don't have an app! If you don't have
an app you can simply go to https://developers.facebook.com/apps and
create one.
Note 2: Read my code comments!
Code:
<?
$redirect = "http://www.SITE.com/thanks.html"; //After sharing, you redirect your visitor to thanks.html or just to the home page. Note that the URL given is the URL you set for your app!
$link = curPageURL(); //URL to the shared page (I will give you the function curPageURL() later).
$title = Title(); //Title of the shared page (Note If you don't have a dynamic website you can simply ignore the PHP part)
$descriptionTag = Description(); //Description of the shared page
$pic = Img(); //Image of the post or the logo of your website
echo "<script>
FB.init({appId: \"YOU_APP_ID_HERE\", status: true, cookie: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
redirect_uri: '".$redirect."',
link: '".$link."',
picture: '".$pic."',
name: '".$title."',
caption: '".$descriptionTag."',
description: 'You_May_Want_To_Say_Something_About_Your_Web_Site_Here!'
};
function callback(response) {
document.getElementById('msg').innerHTML = \"Post ID: \" + response['post_id'];
}
FB.ui(obj, callback);
}
</script>"; ?>
<a href="#" onclick='postToFeed(); return false;'>Share To Facebook</a>
Note:
Don't forget to set YOUR APP ID in the code!
You need to use the function curPageURL() in order to share the current PHP page!
Code:
<?
function curPageURL() {
$pageURL = 'http';
if (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}
?>
Don't forget to declare the function curPageURL() at the beginning of the code I'm giving to you!
Related
I am using Nick Baker's (webtechnick) CakePHP / Facebook plugin which is awesome and works great, however I have a question that I can't seem to even come close to answer for.
How would I bypass the use of a share button and share directly through an action?
For instance, I make a post through my site and the post adds to the DB as it should, it also shoots a post to the logged in users Twitter account through the action. How can I also have this action handle sharing it to my FB account (connection has already been made).? I tried the first thing I think anyone would obviously try $this->Facebook->share() directly in the action, too no avail...
Any thoughts or solutions would be of great help...
UPDATE AFTER ANSWER
Thx for the help spooney. I voted your answer up because you are 100% spot on from what I can tell. I am loading the JS SDK.
function init($options = null, $reload = true) {
if (empty($options)) {
$options = array();
}
if ($appId = FacebookInfo::getConfig('appId')) {
$session = json_encode($this->Session->read('FB.Session'));
if ($reload) {
$callback = "FB.Event.subscribe('auth.login',function(){window.location.reload()});";
} else {
$callback = "if(typeof(facebookReady)=='function'){facebookReady()}";
}
$callback .= "FB.Event.subscribe('auth.logout',function() {window.location = '/bastards/users/logout'});";
$init = '<div id="fb-root"></div>';
$init .= $this->Html->scriptBlock(
<<<JS
window.fbAsyncInit = function() {
FB.init({
appId : '{$appId}',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true // use Oauth
});
{$callback}
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/{$this->locale}/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
JS
, $options);
return $init;
} else {
return "<span class='error'>No Facebook configuration detected. Please add the facebook configuration file to your config folder.</span>";
}
}
I have no problem pulling in the user information and working with all that. I have accomplished posting to FB from my site, but it was only through a link, using FB.ui...
<br><font style="color:#FFF; text-decoration:none;padding-left:27px;">post to wall</font><br>
<script>
function publishStory() {
FB.ui({
method: 'feed',
name: 'message name',
caption: 'message caption ',
description: 'description goes here',
link: 'the url current page',
picture: 'if you want to add an image'
},
function(response) {
console.log('publishStory response: ', response);
});
return false;
}
</script>
I have tried replacing the code above with...
<br><font style="color:#FFF; text-decoration:none;padding-left:27px;">post to wall</font><br>
<script>
function publishStory() {
var body = 'Reading JS SDK documentation';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
}
</script>
But it errors everytime.
I should also throw in there that the post on the users FB wall isn't really coming from the site persay, it's a post from the user on their own wall basically stating, "I made a post on ladala.com, you should go check it out at ."
So now I'm at the point that I need to figure out how to run FB.ui through the action that submits the post.
Based on our conversation, I figured I would just put a more complete description in an answer.
You can fire a share call using the JavaScript SDK.
First, you would need to load the JavaScript SDK as described in the Loading section of https://developers.facebook.com/docs/reference/javascript/.
Once loaded into your page, the two calls you want to look at are FB.getLoginStatus, and FB.api. FB.getLoginStatus will give you back a response telling you if the user is logged in to facebook, and if they have approved your application. This link will describe the functionality of getLoginStatus, but in short, you need to check for response.connected(and then possibly do another call to confirm a user's permissions, if required).
If the user is logged in and has approved your app, you can then attempt to make an API call using FB.api. Keep in mind to do this, you will likely need the user to have allowed the publish_stream permission.
Your code would look something like this:
//Do FB initialization
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
//Post was successful
}
});
}
});
This can be triggered any way you want. On page load, on click, on completion of some other event, etc.
Keep in mind this is just one way to implement this. Also, if you are trying to share something with your FB application, and it is not working, you should confirm that you have all the permissions required to do so.
I have added facebook share button to my webpage using this code:
<a name='fb_share' border="0">Share</a>
<script type='text/javascript' src='jquery.js'>
</script>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script>
The above code shares the current webpage properly but when I included a session check at the start of the webpage where I redirect the user to the login page if valid session doesn't exist the above code always shares the login page instead of the current page. I am using PHP header function for redirect. Please advice.
To share content from not publicly accessible page use Feed Dialog
i use {} you can uncomment features as needed. Keep in mind all share button features where deprecated for the like / recommend button.
<div id="msg"></div>
<script>
function feedthis() {
var obj = {
method: 'feed',
//to: ''+tobe+''
//link: 'https://developers.facebook.com/docs/reference/dialogs/',
//picture: ''+pic+'',
// name: 'Facebook Dialogs',
//caption: 'Reference Documentation',
//description: ''+msg+''
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
Help please! I'm creating a Facebook tab/app on facebook for a contest, part of the contest is to have a user have the option to share the contest on their wall. This is the error I'm receiving -
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application.
This is my facebook auth code:
<div id='fb-root'></div>
<script>
FB.init( {
appId : 219691398094935,
status : true,
cookie : true,
xfbml : true
}
);
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>
<script src='http://connect.facebook.net/en_US/all.js'></script>
This is my FB.ui Code:
<script>
function showStreamPublish() {
FB.ui(
{
method: 'feed',
name: 'I signed up to win an iPad 2 from Upillar.com',
link: 'http://www.facebook.com/pages/udev/121216321302968?sk=app_219691398094935',
picture: 'http://static.upillar.com/fb/images/logo.png',
description: 'I entered the iPad 2 Sweepstakes from Upillar.com which only requires you to create a listing to enter! Enter the contest now by by clicking this link.',
app_id: '219691398094935'
},
function(response) {
if (response && response.post_id) {
$('#main-screen').css('display','none');
$('#step2').css('display','block');
}else{
$('#main-screen').css('display','none');
$('#step2').css('display','block');
}
});}
</script>
This is the information in my app:
Site/App Domain: upillar.com
Site URL: http://fb.upillar.com/contest.php
Page Tab URL: http://fb.upillar.com/contest.php
Secure Tab URL: https://fb.upillar.com/contest.php
Please tell me what am I missing! Thank you so much.
Got same problem - solution is simple, but not even mentioned by Facebook Dev DOCS. Take a look at this:
FB.ui(
{
method: 'feed',
redirect_uri: 'http://www.yourdomain.com', // that caused the problem
message: 'getting educated about Facebook Connect',
name: 'Connect',
caption: 'The Facebook Connect 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.'
),
link: 'http://www.yourdomain.com',
picture: 'http://www.yourdomain.com/f8.jpg',
actions: [{
name: 'yourdomain',
link: 'http://www.yourdomain.com'
}],
user_message_prompt: 'Share your thoughts about RELL'
},
function (response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
site URL should not be a file, try to set this as your domain only, without contest.php
if that does not work, set the canvas URL as your domain, with "/" at the end too.
Sorry to bump an old post, first I should say i'm relatively new to facebook development but i've been getting the same problem, basically it seems like facebook does some fairly nifty detection in terms of what qualifies as a redirect when you land on your page.
For example I was detecting if it was a new user and then displaying a colorbox, whose onclick event redirected to a newuser creation form. That gave me error 191 redirect_uri not owned. It seems because the javascript was in the <HEAD> element it qualified as a redirect.
I simply changed the login process to fully render the main page and display a normal div telling them to click here to login.
Sorry for grave-digging!
I just had the same problem and found the solution. You do not have to change anything on your sources.
Just head over to http://developers.facebook.com open your app and navigate to "Settings" and "Basic".
There is a textfield that says "App Domains" - enter the domain name where the app is currently hosted at there, save the settings and you are done.
I am building an Facebook IFrame App. I am using the below javascript code to request user to login and allow permissions for the application, after which they are supposed to be redirected to the iframe app. The code works correctly. But, I have two issues with it.
a. as soon as the app loads in IFrame, it redirects to a page (http://www.facebook.com/connect/uiserver.php?app_id=......) and displays a large facebook icon. When I click this icon it redirects to facebook login page. I want my app to redirect to the login page directly instead of showing the inbetween facebook icon page.
b. When the user clicks 'Allow' button for the requested permission in facebook, the page redirects to my main site (http://www.mysite.com) instead of the iframe application(http://apps.facebook.com/myapp).
I have pasted my javascript below, this works with above quirks.
var api_key = 'xxxxxxxxxxxxxxx';
var channel_path = 'xd_receiver.htm';
FB_RequireFeatures(["Api"], function () {
FB.Facebook.init(api_key, channel_path);
var api = FB.Facebook.apiClient;
// require user to login
api.requireLogin(function (exception) {
FB.Connect.showPermissionDialog("publish_stream");
});
});
Help much appreciated.
I have remembered something!
You must use target="_top" in all your links and redirections in a iframe application!
Hope I help you.
Thanks for your answers.
I used the solution posted by McKAMEY(Facebook API: FB.Connect.requireSession issues) with few changes, and it works as intended, without showing the intermediate facebook icon page, and also it redirects after authentication to the iframe app correctly.
I have posted below the working solution in case someone needs it.
var api_key = 'xxxxxxxxxxxx';
var channel_path = './xd_receiver.htm';
var canvas_url = "http://apps.facebook.com/myappxxxx/"// ensure your canvasurl has a '/' at the end!
function Initialize() {
FB_RequireFeatures(["Api"], function () {
FB.Facebook.init(api_key, channel_path);
FB.ensureInit(function () {
FB.Connect.ifUserConnected(
function () {
var uid = FB.Connect.get_loggedInUser();
if (!uid) {
authRedirect();
return;
}
},
authRedirect);
});
});
}
function authRedirect() {
//This is the Sample URL Structure for redirecting to facebook
//http://www.facebook.com/connect/uiserver.php?
//app_id=XXXXXXXXXXXXX&
//next=xxxxxxxxxx_success_url_here_XXXXXXX&
//display=page&
//perms=XXXXXX_comma_seperated_permissions_list_hereXXXXXX&
//fbconnect=1&
//method=permissions.request
window.top.location.href = "http://www.facebook.com/connect/uiserver.php?app_id=" + encodeURIComponent(api_key) + "&next=" + encodeURIComponent(canvas_url) + "&display=page&perms=publish_stream&fbconnect=1&method=permissions.request";
}
Initialize();
Note on redirecting within a frame to the Facebook login page. You have to use javascript to redirect the entire page since the login page passed the X-Frame-Options:DENY header and modern browsers will prevent you from sending the user to the URL if that header is present. Solution is to use javascript::window.top.location = ''; to redirect the whole page
I'm not sure on the middle page between redirection but what does your apps canvas and connect url point to?
The redirection after login should go to that page unless you have this overridden somewhere in your code.
Change the urls in the settings on fb to apps.facebook.com/myapp if that's not what its set to.
You may use the new Facebook Graph API (http://developers.facebook.com/docs/api) to handle authentication. First, you must check if you have the access_token:
$access_token = $_REQUEST['access_token'];
if($access_token != NULL) {
...
}
else {
// the following javascript
}
And the javascript is:
<script type="text/javascript">
top.location.href = '<?= "https://graph.facebook.com/oauth/authorize?client_id=".$appid."&redirect_uri=".$appurl."oauth_redirect" ?>'
</script>
You must have a file oauth_redirect.php like this:
<?php
$code=$_REQUEST['code'];
$url = "http://graph.facebook.com/oauth/access_token?client_id=".$appid."&redirect_uri=".$appurl."oauth_redirect&client_secret=".$appsecret."&code=$code";
$curl = curl_init();
// SET URL FOR THE POST FORM LOGIN
curl_setopt($curl, CURLOPT_URL,$url);
curl_setopt($curl, CUPROPT_SSL_VERIFYPEER, true);
curl_setopt($curl, CUPROPT_SSL_VERIFYHOST, true);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION ,1);
curl_setopt($curl, CURLOPT_HEADER ,0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER ,1);
// EXECUTE 1st REQUEST (LOGIN)
$response = curl_exec ($curl);
?>
<script type="text/javascript">
top.location.href = '<?= $appurl."?".$response ?>';
</script>
Finally, you can return to your index page (the $appurl variable) and test if the user has permission testing access_token presence.
Hope it helps!
//if user is logged in - do this
function login() {
FB.api('/me', function(response) {
document.getElementById('fb-info-block').innerHTML =
"Welcome, " + response.name + ".<br /><br />" +
"<fb:like href = 'www.whitbreaddesign.com' show_faces = 'false' width = '100' action = 'like' colorscheme = 'light'></fb:like>";
});
}
Can someone tell me how I can add the facebook users profile pic to the above code...After someone connects to my site they will get a Welcome, (their name) to my site....How can I also add there profile picture after Login along with the Welcome note?
I hope by now you've solved this but if not you need to use the access token supplied by the getLoginStatus response.
Check out: http://developers.facebook.com/docs/api
The example links for Users, Pages, Events etc are misleading. If you hover over the links you'll see that Facebook adds "?access_token=%TOKEN%" to each link. That's what you'll need to do.
You function will probably look something like this depending on how you work it.
Hope this helps.
window.fbAsyncInit = function()
{
FB.init({ appId: 'Your App Id', status:true, cookie:true, xfbml:true });
FB.getLoginStatus(function(response){
if(response.session){
/* Fetch Access Token Data Here and set to Global Var */
var access_token = response.session.access_token;
/* Other Init Functions */
}
});
function login()
{
FB.api('/me', function(response){
/* Use Access Token Data Here */
document.getElementById('fb-info-block').innerHTML = (
"Welcome, " + response.name + ".<br /><br />" +
'<br/><img src="https://graph.facebook.com/me/picture?access_token='+ access_token +'"/><br/>'+
"<fb:like href = 'www.whitbreaddesign.com' show_faces = 'false' width = '100' action = 'like' colorscheme = 'light'></fb:like>"
);
});
}
}
<img src="http://graph.facebook.com/me/picture">
Why don't you use fbml tags:
fb:profile-pic and fb:name
(http://developers.facebook.com/docs/reference/fbml/)
And once, you put that FBML inside your div, you may need to call
FB.XFBML.Parse() javascript function.
(It pre-exists as I assume you must have included facebook's javascript by now)
The me shortcut will only work if the person is logged in to fb. You can also use their facebook Id:
<img src="https://graph.facebook.com/220439/picture">