I checked with the debugger and I have only one warning:
The og:locale property should be explicitly provided, even if a value can be inferred from other tags.
And by the way, I cannot find ANYTHING about that property, nor does the Like Button documentation say it's required.
I have the 6 required tags and everything else looks fine. I am using the iframe version of the Like button.
The Like Button displays, can be clicked, then it briefly shows a 1 count and disappears. It does nothing from there. The response from the server is:
for (;;);{"__ar":1,"payload":{"requires_login":false,"success":false,"already_connected":false,"is_admin":false,"show_error":true,"error_info":{"brief":"An error has occurred.","full":"There was an error liking the page. If you are the page owner, please try running your page through the linter on the Facebook devsite (https:\/\/developers.facebook.com\/tools\/lint\/) and fixing any errors.","errorUri":...
Try putting en_US as the locale meta value. I'm wondering if Facebook is having a hard time determining what language your page is in.
I switched to the HTML 5 Like button but I added it dynamically with jQuery instead before the script file is added.
var $likeButton = $('<div id="like-button" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="lucida grande"/>').addClass('fb-like').attr('data-href', window.location.protocol + '//' + window.location.hostname + '/');
$likeButton.insertBefore('.top-toolbar > .toolbar-links');
var js, id = 'facebook-jssdk';
if (document.getElementById(id)) {
return;
}
js = document.createElement('script');
js.id = id;
js.async = true;
js.src = '//connect.facebook.net/en_US/all.js';
document.getElementsByTagName('head')[0].appendChild(js);
Related
I have an 'Add To Timeline' button and I can already add posts to the timeline using another function, but now I want to be able to obtain the requestID of an action so that I can delete it from another javascript function I have. I been searching everywhere but can't find a good example so that I can learn how to obtain the ID, I'm still confused on how to do it. This is the code:
<script type="text/javascript">
function deleteRead(requestId)
{
FB.api(
requestId,
'delete',
function(response) {
if (!response || response.error) {
alert('error...');
} else {
alert('Successfully Deleted!');
}
});
}</script>
Adding the Action ID number of a post directly works and I'm able to delete the post on my timeline. But I have to make it where it automatically obtains the id for each post.
Do I have to use the PHP SDK in order to obtain the requestID? This is the other code I am using:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'I-have-my-app-ID-here', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk';
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Even better, Is there a way where I can grab the requestID through PHP and pass it into a variable? depending on the post (if it's added to timeline), so that I can replace it with "requestID" to something like:
<?php echo $requestID; ?>
This way I can use the php code inside of my javascript where the requestID is and plus incase you want to use that same requestID that is obtained for something else in that same page. Example: if the post is added to Timeline it will show it's request ID number on that post page, incase you want to show the delete button only if its added to timeline, if it's not added, then don't show the delete button using a conditional statement.
There are two ways of doing this:
Store the IDs in a database for each action. This is not ideas as actions can be deleted from Facebook and can make it out of sync with your database.
Query the user's actions in real-time and use that to show a list of actions to delete. This is preferred.
Sample code:
// get activity from Facebook
$actions = $facebook->api('/me/' . $action_id );
// get ID of last action
echo $actions[0]['id'] );
You can then grab the ID of the post from above (e.g. $actions[0]['id']) and pass it to your JavaScript function or create a PHP function to delete the action. Optionally, you can loop through $actions to search if a particular action already exists, matching by URL, e.g.
if ( $actions[0]['data']['article']['url'] == $current_url ) {
...
}
The initialization code:
window.fbAsyncInit = function() {
var bheight = $(document).height() + 50;
FB.init({
appId: appid,
frictionlessRequests : true,
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setSize({ width:760,height:bheight });
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
The following code is called with an onclick:
function sendRequestViaMultiFriendSelector(msg){
FB.ui({
method: 'apprequests',
message: msg
});
}
The popup is shown and the user can select some friends, but after submitting or cancelling, the window goes blank. The pop up is still there but white and empty. No errors logged in Firebug.
If I add a callback function it's never reached.
I've tried adding a self closing redirect_uri (redirect_uri: 'http://.../self_close.html') but after submitting the popup redirects to self_close.html and even when the content of that html is just <script type="text/javascript">window.close(); </script> the popup won't close nor send the request to the selected friends.
Strangely enough a couple weeks ago this was working, you could select some friends and send them invitations and the popup would close.
My app is running in localhost, is in Sandbox mode and I've tried inviting other App's admins, test users, normal users, etc. In the past it used to work.
What could be happening now?
Similar questions that I've check:
FB.ui popup window doesn't close
Facebook app request dialog not sending request
http://facebook.stackoverflow.com/questions/4646441/how-to-close-a-facebook-sdk-dialog-opened-with-fb-ui
Thanks in advance!
UPDATE
I've added a test method using method:feed instead of method:apprequests
function feed_test() {
// calling the API ...
var obj = {
method: 'feed',
name: 'Feed test',
caption: 'Test',
description: 'Test'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
When I call upon this method with an onclick the popup is shown, I enter my comment, submit it and the popup goes blank too. The popup is not closing but the post is published in my wall.
UPDATE 2
I've realized that if I open the app in the browser, outside Facebook (using http://facebookapp.localhost/) the apprequest works fine and it opens the popup without the disabled address bar. When I try to invite friends inside FB the popup is shown with a gray address bar containing this:
https://www.facebook.com/dialog/apprequests?api_key=XXXXXXXXXX&app_id=XXXXXXXXXX&display=popup&frictionless=true&locale=en_US&message=XXXX&next=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D5%23cb%3Df2b013bbfaa712%26origin%3Dhttp%253A%252F%252Ffacebookapp.localhost%252Ff3267a4c771122%26domain%3Dfacebookapp.localhost%26relation%3Dopener%26frame%3Df3ad1f46b651196%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey
I wonder what could be the difference in using the app inside and outside FB, may be there are some js problems.
FIXED
Today I tryied again and the problem was gone. Also even when the popup wasn't closing and the callback function wasn't being called the invitations were sent. My test users forgot to check it they were getting them... anyway, mysterious bug, mysterious fix.
Im trying to get all the feed from my facebook page whit the javascript api.
Does anybody have a working example?
I have tryed but I cant get it right, I can get photos from albums, but I cant get the feeds and I dont know what Im doing wrong.
Any input really appreciated. Thanks!
I have this code:
Edit
OK, I have the code inside the init code like below and it doesnt work, it is not executing the code and I get no errors:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<%=facebookAppId%>', // App ID
channelUrl : 'www.mypage.se/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
// get the wall - feed
var page_id = '<%=facebookPageId%>';
FB.api('/' + page_id, {fields: 'access_token'}, function(resp2) {
if(resp2.access_token) {
alert(resp2.access_token);
FB.api('/page id/feed?access_token='+resp2.access_token, function(response) {
var ul = document.getElementById('feed');
for (var i=0, l=response.data.length; i<l; i++) {
var
feed = response.data[i],
li = document.createElement('li'),
a = document.createElement('a');
a.innerHTML = feed.message;
a.href = feed.link;
li.appendChild(a);
ul.appendChild(li);
}
});
}
});
};//end window.fbAsyncInit
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
So why can I have for example:
FB.api('/facebook id', function(response) {
alert('Your name is ' + response.name);
});
inside the init code and not the other code?
I would still need some structure help writing the callbacks out on the page so it looks good as it does on facebook.
I like to write out "message, picture, link, name" and maybe something else?
As I test to get the messages in this example and some of the callback is displayed as "undefined" on the page? Does that mean that the message doesnt have a value when I get it?
If so how can I not write out emty values - undefined ones?
Thanks!
UPDATE:
If I use this code then it reads the feed, but only if Im logged in to Facebook?
Im starting to get confused, since I think that the above code should work:
I first ask for the access token in the first call, and when I get the access token, then using it in the second call, what Im I doing wrong?
FB.api('/my userid or pageid/feed?access_token=the acces token that I get from the Graph API Explorer', {limit:5} , function(response){
if (response && response.data && response.data.length){
alert(response.message);
var ul = document.getElementById('feed');
for (var j=0; j<response.data.length; j++){
var feed = response.data[j],
li = document.createElement('li'),
a = document.createElement('a');
a.innerHTML = feed.message;
a.href = feed.link;
li.appendChild(a);
ul.appendChild(li);
}
}
});
I get a couple of undefined responses, how can I not write them out on the page?
How can I get the above code to work even if the user that visit the webpage is not logged in to facebook?
I make other calls that gets the photos of an album with no problem displaying them on the webpage, I dont understand why this is different?
If I want to set this up for a customer(when its finished) what are the steps I need to take? Getting a bit confused... :-)
I would like to get the message, picture, likes etc with the call
and display it like it is on the feed-wall, any suggestions here?
Ok, finally I got it working :-)
I got the right acces token and now I can display the feeds.
I got the right token here:
https://graph.facebook.com/oauth/access_token?client_id=myapp_id&client_secret=myapp_secret&grant_type=client_credentials
And now I can use the below code both for getting user feeds and page feeds, just changing the page_id!
var page_id = '<%=facebookPageId%>';
var pageaccessToken='xxxxxxxxxxxxxxxxxxxxxxxxxx';
FB.api('/' + page_id + '/feed?access_token='+ pageaccessToken, {limit:5} , function(response){
if (response && response.data && response.data.length){
var ul = document.getElementById('pagefeed');
for (var j=0; j<response.data.length; j++){
var feed = response.data[j],
li = document.createElement('li'),
a = document.createElement('a');
a.innerHTML = feed.message;
a.href = feed.link;
li.appendChild(a);
ul.appendChild(li);
}
}
});
Ok, now it works, but I get the undefined in the response?
What is causing this, is it because it is a empty value that I get in the response?
What can I do so it is not displayed on the page?
I don't understand what it is you're trying to do, I have the feeling though that you took the wrong path..
Let's start with the fact that you don't need any special permission or a page access token to query for the page feed, it's public and so all you need (quoted from the docs) is: "any valid access_token or user access_token".
Which means that if a user authorized your application, you then acquired an access token for him and can get any page feed.
For example try the southpark page feed in the Graph API Explorer.
Another issue is that asking the user for the "manage_pages" permission and then asking the graph api for the access token of your own app would not work. When a user grants your app to manage his pages that's exactly what you get, the permissions to his pages, and so this request for example: /southpark?feilds=access_token won't get you the token since you are not the admin of this page (even if you grant the app with the "manage_pages" permission).
Last thing is the use of window.onload, which in your situation just does not address the problem.
You don't want to execute that code when the window is loaded but when the facebook sdk is loaded and intialized. That's why facebook tells you to use the fbAsyncInit event.
The code you had before the window.onload is the correct form, what exactly do you mean when you say "it didn't work"? Did you get any errors? It did not get executed?
Edit
From what I understand you want to display the content of a facebook Page feed in your website.
As I already told you, all you need in order to get the feed of a page is an active access token ("any valid access_token or user access_token").
If you follow the Authentication doc, the App Login section you'll see that you can issue an access token for your facebook app. With that token you can then get the feed of ANY PAGE you want on the server side.
On external website (not fb page) would like to put like button where once visitor click like button , it shows certain content.
Here is the code i might thinking it works if i'm not wrong but needs more help !
<div id="fb-root"></div>
<fb:like send="false" layout="button_count" width="100" show_faces="false"></fb:like>
<div id="hidden_content" style="display:none;">Thank You Dear</div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '185373538XXXXXX', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.Event.subscribe('edge.create', function() {
$('#hidden_content').show();
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
So any idea !
~Thanks a lot
Here's my idea (since you're looking for ideas and references).
edge.create will only fire when a user likes the link. You will need to account for what happens when a user comes to your page that previously liked it. I would suggest looking for a way to determine if the like has showed up.
Here's some documentation to read thru:
This might get you the graph id of your web page's url via the object_url table
SELECT url, id, type, site FROM object_url WHERE url = "http://developers.facebook.com/"
Then see if you can track it down in either a stream posting or in a like
in my website, for each blog entry I have a facebook like button. So on the index, there is multiple(more than 10 at the moment) like buttons.
These like buttons make my page a bit cumbersome to use. The total page time becomes several seconds and it's laggy/jumpy while loading(even though all the content is loaded) while it's loading. Is there anyway to fix this other than not showing the like button on the index? (a single like button on a page produces negligible lag)
For reference, my website is at http://lastyearswishes.com In firebug, you can see that the page load time is 20 seconds, of which about 200 milliseconds is tied back to my actual website. Each facebook like button appears to do three separate non-cacheable, unique requests.
Afterthought: Now (nearly 2 years later) I decided to give up on facebook. Even with asynchronous code it still enduced a noticable delay in page rendering time. It also uses some stange javascript that screws up my layout. When dropping in twitter buttons, my layout looked immediately the way it should (something with alignment and float that facebook did. I could never use margin or anything to get facebook to line up like I wanted)
Facebook Developers provides the javascript to create an asynchronous Like button
found here: Loading the SDK Asynchronously
c/p'd here:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(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>
Updated:
Try just this portion (and add #xfbml=1 at the end of the URL, should be the same result on your site but async loading):
<div id="fb-root"></div>
<script>
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js#xfbml=1';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Put this script at the bottom of your page