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.
Related
I'm using Facebook JavaScript SDK to post on different Facebook's users Pages, from my custom HTML form,
My HTML FORM contains Following fields
title=>textbox,
Link url=>textbox,
picture=>textbox,
message=>textarea
but the issue I'm facing is that when user did not entered LINK URL in field(blank), and entered Picture URL in picture URL fieldbox then facebook showing PICTURE HOST name in wall instead showing blank or no link URL / picture URL.
CODE which I am using for post my status on pages
FB.api('/' + d + '/feed', 'post', {
message: my_message,
link: url,
name: title,
picture: picUrl,
description: desc,
access_token: b.access_token
}, function (a) {
if (!a || a.error) {
alert('Error occured')
} else {
alert('Message Posted Successfully.')
}
})
link: url
picture: picURL
I tried to submit by comment "link" parameter but still facebook showing picture host URL address on wall.
so i need to know how to stop showing picture host URL address on wall if user did not submit link URL
In the Facebook post you can refer this link as an Caption you just need to keep some space into the Caption Parameter. If you are using string.empty then it will print the you IP Address/Domain Name.
Here i am providing you the sample Code for that...
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
FB.init({
//Get your Facebook API Key from Web.config
appId: '<%=ConfigurationManager.AppSettings["FB_API_KEY"].ToString() %>',
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>
you need to create div to add the script into it.
Now, I am Calling the postToFacebook() function from the ServerSide, you can do that as per your requirement. So, Here is the function of that.
function postToFacebook() {
var POST_NAME = "Post Name";
var POST_DESCRIPTION = "Post Description";
var POST_MESSAGE = "";
//Here I am Leaving some space in the Caption to avoid link name
var POST_CAPTION = " ";
var body = 'Reading Connect JS documentation';
FB.login(function (response) {
if (response.authResponse) {
FB.api('/me/feed', 'post', { body: body, message: POST_MESSAGE, caption: POST_CAPTION, name: POST_NAME, description: POST_DESCRIPTION, picture: document.getElementById('hfImageURL').value }, function (response) {
if (!response || response.error) {
//alert(response.error);
alert('Image is not posted.');
} else {
alert('Image is posted.');
}
});
}
}, { scope: 'offline_access,publish_stream' });
}
I am storing the Image URL into the HiddenField having ID hfImageURL, and give that to the picture property of the Post.
So that's it you can check that code... Working fine for me...
Have a Nice DAY...
I'm trying to implement the Facebook news.reads App - I'm just missing one final step - executing the POST to FB. When I look at the Firebug console, it appears that the POST is in fact working...or at least there are no errors. Check out the output below:
Post:
__a 1
__user myID
app APPID
fb_dtsg AQBi1J4k
href http://www.around-around.com/today-show/
phstamp 1658166105497452107119
ref
Source
fb_dtsg=AQBi1J4k&href=http%3A%2F%2Fwww.around-around.com%2Ftoday-show%2F&app=183125741799131&ref=&__user=63802158&__a=1&phstamp=1658166105497452107119
(I've validated that the meta data from the URL is correct).
But the response I get from FB is strange:
for (;;);{"__ar":1,"payload":null}
No idea what to do with that. The referrer also seems to be the recommendation bar (which I'm using):
https://www.facebook.com/plugins/recommendations_bar.php?action=like&api_key=APPID&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D11%23cb%3Df274495fd8bd4fc%26origin%3Dhttp%253A%252F%252Fwww.around-around.com%252Ff2b573e1404fec4%26domain%3Dwww.around-around.com%26relation%3Dparent.parent&href=http%3A%2F%2Fwww.around-around.com%2Ftoday-show%2F&locale=en_US&num_recommendations=2&read_time=30&sdk=joey&side=right&site=around-around.com&trigger=onvisible
So, I'm also using this code to try to automatically force a POST news.reads action.
<script type="text/javascript">
function readArticle()
{
FB.api(
'/me/news.reads',
'post',
{ article: '<?php the_permalink(); ?>' },
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Article read was successful! Action ID: ' + response.id);
}
});
}
</script>
(you won't see this code on the site, as it's only firing for admins as of now)
I'm not getting any alerts so something is causing this to misfire...but using the recommendation bar would be preferable to us.
Anyways, any help would be appreciated.
Luke
Im new to facebook posting but have had some success with posting offline with a user account but cannot post offline with a company page.
I have created my own "Facebook App" called "Nicks Poster App" via my own personal facebook account. I have granted three permissions (offline_access,read_stream,publish_stream) to the app for both my personal page and my company page.
i did this by following these steps for each account...
Creating the app...
1. Login to facebook with the account you want linked to the app
2. Follow this link http://www.facebook.com/developers/apps.php#!/developers/createapp.php
3. Create your app and take a note of you App Id and your App secret Id.
Giving the correct rights to the app and getting the access_token..
Method 1:
1. Get the account in question to login to facebook
2. However you like, direct the user to this link (replacing <App-Id> with the App Id of the created app) https://graph.facebook.com/oauth/authorize?client_id=<App-Id>&scope=offline_access,read_stream&redirect_uri=http://www.facebook.com/connect/login_success.html
3. Take a note of the result of the “code” querystring.
4. Goto this url (replace “<APP-ID>” with you appId and “<APP-SECRET>” with your apps secret id and “<code>” with the copied code)
https://graph.facebook.com/oauth/access_token?client_id=<APP-ID>&redirect_uri=http://www.facebook.com/connect/login_success.html&client_secret=<APP-SECRET>&code=<code>
5. Copy what you see, minus the expires querystring. That is your access_token.
After i had the access token for both accounts i used this code to make the post.
<!-- FACEBOOK -->
<div id="fb-root"></div>
<script>
(function () {
var e = document.createElement('script');
// replacing with an older version until FB fixes the cancel-login bug
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
//e.src = 'scripts/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
<!-- END-OF-FACEBOOK -->
<script>
//initialise
window.fbAsyncInit = function () {
FB.init({
appId: '351023398277068',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML
oauth: true // Enable oauth authentication
});
};
function sendPost(inMessage) {
var opts = {
message: inMessage,
access_token: '<SAVED-TOKEN>'
};
FB.api('/me/feed', 'post', opts, function (response) {
if (!response || response.error) {
alert('Posting error occured');
}
else {
alert('Success - Post ID: ' + response.id);
}
});
}
</script>
When executing the "sendPost" command with the perameter 'Test post', it will work for my personal account (providing i put my access_token in place). This does not work for my company page, and im at a loss as to why(i do put my acess_token in place).
Facebok also havent documented this very well and it makes it hard to make progress, does anyone understand why this doesnt work for company pages?
Thank you in advance.
You can set the "to" parameter to target the page you wish to post to, "manage pages perms will be needed if you wish to post as your page to your page as the application.
<div id="msg"></div>
<script>
// uid is the id of the page or user you wish to post to.
function feedthis2(uid) {
// calling the API ...
var obj = {
method: 'feed',
to: ''+uid+''
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
feedthis2('AnotherFeed'); // to http://facebook.com/anotherfeed
//feedthis2('135669679827333');
</script>
I have a difficult problem. Difficult means I searched through the net and StackOverflow as well the whole FBJS SDK documentation and haven't find answer.
I am building a Page Tab application where I'd like to let fans to rsvp events. So I have to check if the user is logged in and if it doesn't I have to login. That sounds pretty easy, but FB.getLoginStatus doesn't fires callback function. This is the code excerpt:
FB.init({
appId: window.appID,
status: true,
xfbml: true,
cookie: true,
oauth: true,
channelUrl: 'http://example.com/fb/channel.html'
});
and then I simply - of course after the user clicks on a button - call FB.getLoginStatus, but it seems it doesn't do anything.
I've already checked sandbox mode, FB.init success, URLs in application settings and developing environment. I can call FB.ui, although FB.ui with method: 'oauth' I get an error message saying " The "redirect_uri" parameter cannot be used in conjunction with the "next" parameter, which is deprecated.". Which is very weird because I didn't used "next" parameter. But when I set next to undefined, it works fine, I get the window, but it says "Given URL is not allowed by the Application configuration.". Expect from that, I can login, then I've got the access_token. But in the new window, getLoginStatus still doesn't do anything.
So any advices are welcome.
Thanks,
Tamas
UPDATE:
function onBodyLoad() { //on body onload
FB.init({
appId: window.appID,
status: true,
xfbml: true,
cookie: true,
oauth: true,
channelUrl: 'http://example.com/fb/channel.html'
});
}
...
function getName() { // on button onclick
FB.getLoginStatus(function(response){
if (response.authResponse)
{
window.loggedIn = true;
debugString('Logged in');
} else
{
window.loggedIn=false;
debugString('Not logged in');
}
}, true);
if (window.loggedIn === undefined) {
debugString('getLoginStatus did not exec'); // I always get this message
}
}
UPDATE 2: I created a new App on a different URL, which is configured as a standalone website. There these codes work perfectly, I can getLoginStatus, I can login, etc. Is there any difference working in the context of FB, and in a standalone website, using FB JavaScript SDK?
FB.getLoginStatus does not fire the callback when you are running the website on a different domain than the one that you registered the app with. I usually find myself in this situation when I am developing locally or on a staging server.
For example, if you registered the site with example.com and your staging server is example.mystagingserver.com, the callback wont fire. In this case, you need to create a second application in Facebook and use the Application ID and Secret for the new app.
I just had the same problem, though it only happened to some users.
I finally found out that if your app is sandbox mode, none-developer users can still see your app as a pagetab. But calling getLoginStatus will fail silently (even logging turned on).
Took a while to figure that one out, I hope this can save someone else some time.
I'm using this code, successfully. I'm not quite sure where the differences are.. but I'm using the ASYNC FB Loader.
window.fbAsyncInit = function() {
FB.init({ appId: 'XXXXXX', //change the appId to your appId
status: true,
cookie: true,
xfbml: true,
oauth: true});
function authEvent(response) {
if (response.authResponse) {
//user is already logged in and connected
FB.api('/me', function(info) {
login(response, info);
});
} else {
//user is not connected to your app or logged out
button.onclick = function() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(info) {
login(response, info);
});
} else {
//user cancelled login or did not grant authorization
}
}, {scope:'email,rsvp_event,status_update,publish_stream,user_about_me'});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
function login(response, info){
if (response.authResponse) {
accessToken = response.authResponse.accessToken;
userid = info.id;
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + info.name+"<br /> Your Access Token: " + accessToken;
}
}
You can use the following code to check if the user is logged in:
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
} else {
// no user session available, someone you dont know
}
});
From FB JS SDK Documentation.
You can wrap the whole code in jQuery ready :
$('document').ready(function(){
... above code
})
Also you may want to check this question StackOverflow.
I had the same problem. I was working on the facebook login process of our website. During development the "FB.getLoginStatus" did not return a response. I fixed it in the settings of the app on facebook:
-In facebook go to "manage apps"
-Go to the "facebook login" settings of your app
-Add your development url (for example "https://localhost") to the "Valid OAuth Redirect URIs"
(Don't forget to remove the "https://localhost" from the OAuth Redirect URIs when you are finished with developping.)
Something common that causes this is that a browser is blocking cookies, this will cause the event not to fire. Also, make sure that if you or your user have and ad blocker that it is not blocking third party cookies.
Example of warning:
For me after extensive testing can confirm the dialog to log the user will not show unless you use a valid Application ID
These can be found in
https://developers.facebook.com/apps/{{Application__Id}}/settings/
Just make sure you call the api with the correct ID.
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;