i am making some Facebook "stuff" for my client and he wants that after clicking like cookie is set and for 24 hours this like box wont be seen. Don't ask my why :)
So i have made function liked():
<script type="text/javascript">
function liked(){
days=1;
myDate = new Date();
myDate.setTime(myDate.getTime()+(days*24*60*60*1000));
document.cookie = 'liked=button; expires=' + myDate.toGMTString();
}
But what I do not know is how to force facebook like button to call this function. I found some code on FB developers and this site too, but i dont know where to use it.
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
} );
Could anyone please help me? Thank you in advance!
It works for me:
<script>
window.fbAsyncInit = function() {
FB.Event.subscribe("edge.create", function(response) { alert("You liked the URL: " + response); } );
};</script>
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.
For a few days i was trying to use a custom button to invoke login
$(".join").live("click", login);
function login(){
FB.login(function(response) {
if (response) {
console.log('Login success.');
FB.api("/me", handleMe);
}
else {console.log('Login cancelled.')}
});
}
function handleMe(response) {
$.ajax({
async: 'false',
type: 'GET',
url: 'www. address.com',
data:
"uid=" + response.id +
"&name=" + response.name,
success: function(){
console.log('Ajax successful.');
console.log("<?php echo $this->session->userdata('fb_uid'); ?>");
window.location = "www. address.com";
},
error: function(){console.log('Ajax failed.');}
});
}
$(".join,.log,.biggie-btn").live("click", login);
However it was always buggy, the login window would not close (oddly, most of the times) and after I closed it, I would not get the user FB.API details, and I had to refresh the page to get them.
As soon as I switched to the bugs were gone (having exactly the same functionality), however I can't control now the style of the login button.
Is there a solution, to have a fully functional custom login button?
You can use the Facebook javascript SDK and easily build your own login button. Just have the button class FB.login and pass it a callback function and optionally any extended permissions you need. Upon success, this will set a cookie that has an access_token that you can use from server code if needed. Otherwise, you can just call javascript sdk functions.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
Custom Login Button
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: 'your app id', status: true, cookie: true, xfbml : true });
function doLogin() {
FB.login(function(response) {
if (response.session && response.perms) {
FB.api('/me',
function(response) {
alert('User: ' + response.name);
alert('Full details: ' + JSON.stringify(response));
}
);
}
} , {perms:'user_about_me'});
}
</script>
</body>
</html>
//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">
I recently upgraded to open graph and implemented some of the facebook social plugins on my website like fb:friendpile fb:like-box etc
Ever since I implemented these new features, I'm seeing some random behavior with these plugins.
Like on my home page, when you type in the URL and go for the first time, none of the facebook social plugins are rendered - no login button, no friendpile no like - nothing.
But when you hit CTRL F5 - they appear. First I thought it probably has somethin to do with my machine but yesterday two of my users reported the same issue.
I googled around and it seems to have something to do with where you place your connect code. Right now, I have this relevant portion of the script placed in my head tag - I even tried placing it right before the end of body tag - but it made no difference.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<?php echo Zend_Registry::getInstance()->configuration->facebook->appid;?>', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function login(){
document.location.href = "<?php echo $this->baseUrl(); ?>/login/log";
}
function logout(){
FB.init({appId: '<?php echo Zend_Registry::getInstance()->configuration->facebook->appid;?>'});
FB.logout(function(response) {
// user is now logged out
});
document.location.href = "<?php echo $this->baseUrl(); ?>/login/logout";
return false;
}
</script>
Any insights in trouble shooting this will be appreciated
Thanks
Your logout logic seems problematic (you call FB.logout() in logout() -- but also call logout() on the 'auth.logout' event, which seems circular). You should also remove the FB.init() call inside your logout() function. The lack of xmlns:fb on the <html> tag is often the cause of XFBML not rendering in IE, so I'd double check that. You could also try replacing the async loading with sync loading using a normal script tag like:
<script src="http://connect.facebook.net/en_US/all.js"></script>
But a live repro case would be more helpful since your code looks fine for the most part.
EDIT: You can also checkout http://fbrell.com/xfbml/fb:login-button for examples.
I want to check if my users are fans of my facebook page. I think something like this should do it:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("my api key","xd_receiver.htm");</script>
<script type="text/javascript">
//<![CDATA[
FB_RequireFeatures(["Api"], function(){
var api = FB.Facebook.apiClient;
api.pages_isFan(PAGE_ID,gigyaUser.FACEBOOK_USER_ID,function(response){
alert(response);
});
});
//]]>
</script>
However, for some reason I keep getting null even though the user is in fact a fan of the page. Am I missing something?
I think you almost had that correct.
This snippet works great for me.
assumes:
1. fanPageUID = the fan page's uid
2. and user UID is the UID of the user
3. (and you have an active session)... this may be the hard part, but not part of this question.
function checkifFan() {
FB_RequireFeatures(["Api"], function(){
var api = FB.Facebook.apiClient.pages_isFan(fanPageUID,userUID,function(response){
if (response==false) {
setTimeout('checkifFan()', 300); //every 300ms check if they have pressed fan
}
else {
location.reload();
}
});
});
}
You can also check that a user is a fan of your website by the following script:
<fb:login-button scope="user_likes">
Grant Permissions to Allow access to Likes
</fb:login-button>
<button onclick="checkDoesLike()">Check if user Likes the Page</button>
<h1>Like this Application's Page</h1>
<fb:like-box profile-id="your_page_id"></fb:like-box>
<script>
window.checkDoesLike = function() {
FB.api({ method: 'pages.isFan', page_id: 'your_page_id' }, function(resp) {
if (resp) {
Log.info('You like the Application.');
} else {
Log.error("You don't like the Application.");
}
});
};
</script>