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...
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.
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've got the following script:
<script>
window.fbAsyncInit = function () {
FB.init({ appId: '<%: Facebook.FacebookApplication.Current.AppId %>',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
function FBLogin() {
FB.login(function (response) {
if (response.authResponse) {
ConnectFacebookUser(response.authResponse.accessToken);
} else {
alert('User cancelled login or did not fully authorize.');
}
}, { scope: 'email' });
}
$('#fb-button').live('click', function (e) {
FBLogin();
e.preventDefault();
});
function ConnectFacebookUser(at) {
var postdata = "at=" + at;
alert('This is the access token : ' + at);
$.ajax({
type: "POST",
dataType: "json", // what data type to expect from the server
url: "/FBConnect.ashx",
data: postdata,
success: function (data) {
// do nothing
alert('all good');
},
error: function (xhr, status, error) {
alert('error occured in FBConnect.ashx');
}
});
alert('finished');
}
};
(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);
} ());
</script>
And for the html fragment:
Login with facebook
<div id="fb-root"></div>
When the link is clicked, a popup window for facebook shows up and when i enter my login details, i only see an alert to say "This is the access token..." but the rest of the code don't get processed. If I click the "login with facebook" link one more time, then everything gets processed as normal.
What could be the problem?
It works for me. I get the message 'this is the acccess code' and then i get a 'finished' alert. Check your Chrome debugger tools to look for any script errors that may be occuring silently.
Check out https://github.com/xocialhost/jquery.xocialCore.js/blob/master/jquery.xocialCore.js to see a jQuery specific way of doing this. One thing I noticed is that the jQuery click function when calling the FB.login was triggering the popup blocker in a few browsers I was testing with. I set this up to work around that issue but it's also a way to add a callback that is run properly during the init sequence.
I am using the code below to send an app request to someone.
It works fine; it displays in Facebook notification.
when I click that notification, it redirects to the facebook app page.
I'm unable to make it redirect to the page which exists list of facbook app requests.
How do I make it redirect there?
is there any need to do changes in my facebook app setting ?
<div id="fb-root"></div>
<script>
function FacebookIframeAuthenticator(){
window.fbAsyncInit = function() {
FB.init({
appId: '123456789',
status: true,
logging: false,
cookie: false,
xfbml: true
});
FB.Canvas.setSize({height: 2000});
FB.Canvas.scrollTo(0,0);
FB.Canvas.setAutoResize();
};
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);
}
new FacebookIframeAuthenticator();
function sendInvReq ( friendUid, event ){
FB.ui({
method: 'apprequests',
message: 'I\'d like you to join my professional network on SITE NAME .- DB',
to: friendUid,
data: ''
}
, function(r){
if (r != null && typeof(r) != 'undefined'){
if (r.request_ids){
FB.api('/me/apprequests/?request_ids='+toString(request_ids));
$.ajax({
url: 'http://exapmple.com',
cache:false,
type:'POST',
data:({requestIds: r.request_ids.join(','), x_csrf: csrf}),
dataType: 'json',
complete: function(transport){}
});
}
}
}
);
}
</script>
in your developers page (https://developers.facebook.com/apps/your_app_id/advanced) you must change your application advanced settings "Upgrade to Requests 2.0" to disable
If I understood your question right: you can't control the notification url. It will always automatically redirect to your app url with one or more request_ids as paramter. The only possibility to redirect to your prefered destination is to look for this parameter and react properly.
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;