I'm using the Like Box code from Facebook and I noticed it hinders my page load. After looking in Firebug it loads a bunch of Javascript and CSS files. I'm wondering is there a way to cache the Facebook Like box? I did search Google but the only one I saw was for Wordpress. I'm using php.
I used #Martin link to find this link https://developers.facebook.com/docs/reference/javascript/
The following code was modified to fit my situation, but I am not sure how much quicker it is or if the cache is working properly.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.php', // Channel File
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
};
// 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>
My channel.php looks like this, also from the same page:
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
Hope that helps add to the solution.
There's a way to do this: Use channel file and cache it as much as possible. Read more about it here
Related
My widget works fine on condition that url of the site contains file name. f.e. It is working with
www.domain.com/subdomain/path/index.html and keeps showing blank when address of site is www.domain.com/subdomain/path/.
That's kinda weird behavior, i know that there were some issues with facebook's send-box, but i couldn't find one fitting into my bug.
I dynamically change url and make a call to FB.XFBML.parse();
Using such a code for facebook widget then
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'appID',
status : true,
cookie : false,
xfbml : true
});
fbApiInit = true; //init flag
};
(function(d, debug){
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 = "http://connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /debug/ false));
Please tell me what to do.
The important thing is that i'd rather prefer both of addresses to work, if it's not possible, it would be great to have opportunity to use addres with no filename.ext
Everything is working fine now.
I just realized facebook does not allow to use sending no-extension addresses.
I was using
$('.fbMenu :first-child').attr('href',document.location.toString()).attr('ref','text');where document location was just a path.
Such a simple code fixed the issue:
$('.fbMenu :first-child').attr('href',document.location.toString().indexOf('html')==-1?document.location.toString().replace('#','index.html#'):document.location.toString()).attr('ref','text');
I am trying to use javascript sdk for rendering a XFBML form on our site and i keep getting
Unable to load the registration form for . You may have previously blocked this app on Facebook. Go to your Facebook privacy settings to unblock this app. (Error: Invalid 'client_id'.)
my app is registered and with correct id.
the code looks like is:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '118446328234891', // App ID
channelUrl : '//www.sakshum.org/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
});
// Additional initialization code here
};
// 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>
<script src="https://connect.facebook.net/en_US/all.js#appId=118446328234891&xfbml=1"></script>
<fb:registration fields="name,birthday,gender,location,email" redirect-uri="http%3A%2F%2Fwww.sakshum.org%2FFbValidation" width="530">
</fb:registration>
just to add on if i use non xfbml version using just iframe then all works fine.
Looks like the issue was using encoded redirect_uri. changing it to normal url fixed the issue.
The redirect-uri must match with the setting "Site URL" in your Facebook app.
I have a logout page on my site, which looks something like this:
<div id="fb-root"></div>
<script>
// Load the Facebook 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));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : '[valid_app_id]' // App ID
});
FB.getLoginStatus(function(loginResponse){
// As soon as we get the login status... log out!
FB.logout(function(logoutResponse) {
// logged out!
});
});
}
</script>
The page functions perfectly well when accessed from a vanilla Chrome browser. However, if the
[x]Block third-party cookies and site data
option is checked under "Content settings..." for chrome, the page fails to logout users, and reports
FB.logout() called without an access token.
Is there a workaround to this problem? I'd like to be able to log users out, even when they have stricter-than-usual security settings.
I founded a solution that solved this problem, just define a empty value to your access token, and finaly redirect him to logout page using getLogoutUrl() mrthod:
$_SESSION['fb_YOUR_APP_ID_access_token'] = '';
$logout = $facebook->getLogoutUrl(array( 'next' => 'YOUR_LOGOUT_MESSAGE_PAGE'));
header("Location: $logout " );
Sorry for my bad english!
I was using the Facebook Comments for Wordpress plugin and had FB comments working perfectly for my posts. I switched to the new Facebook plugin and everything works but the comments.
When I check my HTML source of my post pages I find the comments section empty. I know I'm missing something just don't know what it is. My site is cops.com and there should be comments on every post.
The WordPress plugin includes the functionality for comments. So there could be a clash that is occurring with your personal implementation of the plugin.
Go to the settings and enable the comments and disable your implementation (unless it is custom).
/wp-admin/admin.php?page=facebook-settings
I believe only one admin can/should be in control of these settings, there is one variable holding this information in the WP database so if two admins are in, one can overwrite the settings of another.
Also you have two instances of the SDK
<script type="text/javascript">window.fbAsyncInit=function(){FB.init({"appId":"293125297449760","channelUrl":"http:\/\/www.cops.com\/?fb-channel-file=1","status":true,"cookie":true,"xfbml":true,"oauth":true});}</script>
and
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '293125297449760', // App ID
channelUrl : '//www.cops.com/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
});
// Additional initialization code here
};
// 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>
If anything else work for you you can try with this other plugin
http://mydibbler.com/fbGroupPoster.html
This will help you build up more likes and share of your page in FB
I had the same problem that the comments weren't appearing. First the comment about editing all Pages to 'Allow Comments' for all pages was very useful, which pointed in me in the right direction.
My problem was actually that the theme I was using wasn't including comments in the page.php in the theme.
In my theme the comments_template wordpress function was missing inside The Loop.
So I had to add <?php comments_template( '', true ); ?> to the following code:
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); // begin 'The Loop' ?>
<?php the_content(); ?>
...
<?php comments_template( '', true ); ?>
<?php endwhile; // End 'The Loop' ?>
How can I resolve the resize of facebook app on IE ?
the FB.Canvas.setSize() is not working.
Thanks!
Since there's very little to go on in your question. No example url, no code example. I can only guess. So here's where to start.
1) Be sure to include the Javascript SDK inside of script tags.
<script>
// 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>
2) Be sure to include the fb-root div inside of the body
<body>
<div id="fb-root"></div>
...your html here...
</body>
3) Be sure to do the FB.init() and FB.Canvas.setSize() after the javascript SDK has had a chance to load. Meaning do it inside of your window.fbAsyncInit
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/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
});
};
4) Make sure you have specified your APP ID and also the correct location for a valid ChannelUrl