If I only run one of them, then it can show up properly.
If I run both of them at same time, the code who come first will show, the one who come up at bottom will not show.
I believe there's some conflict.
Anyone facing this issue?
<html doctype="XHTML 1.0 Transitional" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<div class="fbLikeButton">
<fb:like show_faces="false" width="300"></fb:like>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'XXXXXXXX', status: true, cookie: true,
xfbml: true});
};
(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);
}());
</script>
<br>
</div>
<!-- facebook code -->
<div align="center">
<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("de15667c632963d186082c258e3cc970");</script>
<fb:fan profile_id="XXXXXXXXXX" stream="0" connections="6" width="155" height="350"></fb:fan>
</div>
</body>
</html>
ok, it works now.
I believe it is javascript code redundancy.
Just need to remove one of the javascript reference.
I removed <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
Related
I am really struggling with how to get the scroll bars off of my tab. I am simply trying to create a Facebook tab for a company Facebook page and I have tried everything to get the vertical scroll to go away. Here is the code I am working with
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="facebookstyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.innerfade.js"></script>
<fb:share-button type="icon_link" class="url"></fb:share-button>
</head>
<body>
<table>
CONTENT
</table>
<p> </p>
<p> </p><div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '{{277868305571181}}', status: true, cookie: true,xfbml: true});
window.setTimeout(function() {
FB.Canvas.setSize({height:1500});
}, 250);
};
(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>
</body>
</html>
You may need to enable OAuth2 in your application settings.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '277868305571181',
status: true,
cookie: true,
xfbml: true,
oauth : true // enable OAuth 2.0
});
FB.Canvas.setAutoGrow();
};
(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>
I have created a facebook app that will be displayed on my companies fan page as a tab. The app renders at 951px so it doesn't fit in the default height of the fan page tab. I've read facebook's horrible documentation for their js sdk and have tried so many different variations - all of them not working at all. Here's my current attempt to resize the fan page tab to fit my app...
<head>
<!-- css / js / meta info here -->
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head>
<body>
<!-- content goes here -->
<div id="fb-root">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId:'xxxxxxxxxx',
status:true,
cookie:true,
xfbml:true,
});
</script>
</div>
</body>
I've also tried async init and using setAutoResize() with no luck.
Thanks for any and all suggestions...
B
<head>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.Canvas.setSize();
}
</script>
</head>
.
.
.
.
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: 'xxxxxxxx',
status: true,
cookie: true,
xfbml: true
});
/* Init fb Resize window */
/* Completly removed now in JS SDK*/
/* FB.Canvas.setAutoResize(7); */
/* As of Jan 2012 you need to use */
FB.Canvas.setAutoGrow(7);
</script>
</body>
</html>
I just spent over an hour trying to fix this in my app and I wanted to mention a couple of basics that you have to follow for this to work.
You have to include a div with an id of fb-root before you include the all.js file and before any JS code using the FB object.
The all.js file should be included below the fb-root div and above any actual JS code using the FB object
Finally, any JS code using the FB object should be below the fb-root div and the all.js include
There were no errors in my code, but it was refusing to work because I was including all.js and my JS code in the <head> element and my fb-root div was in the <body>. Here's what I had to change it to:
...
<head>
<!-- include jQuery so we can use window.load below -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
...
</head>
<body>
<!-- the div has to come first which forces the JS include and code to be put below it -->
<div id="fb-root"></div>
<!-- then we have to include the all.js file -->
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<!-- and finally we can use the FB JS SDK and it will actually work :) -->
<script type="text/javascript" charset="utf-8">
FB.init({
appId: '...',
status: true,
cookie: true,
xfbml: true
});
jQuery(window).load(function(){
//resize our tab app canvas after our content has finished loading
FB.Canvas.setSize();
});
</script>
...
Obviously the 3 elements I mentioned don't have to be right after each other, but they do have to show up in this order in your source code. This really threw me for a loop so hopefully this will save someone some time and frustration :)
It usually works if Facebook can calculate the height of your page. However if you have a responsive design this is not possible.
I am using a hack that does the job using jQuery to calculate the height of the wrapper div and then explicitly set it:
FB.Canvas.setDoneLoading( function(result) {
FB.Canvas.setSize({height: $('#wrapper').height() });
});
This should go in your FB.init() method.
if for some reason window.name is set the FB.setAutoSize wont work, http://bugs.developers.facebook.net/show_bug.cgi?id=19720
in my case its connected somehow to jquery $.data
window.fbAsyncInit=function(){
FB.Canvas.setSize = function(b) {
if (typeof b!="object")
b={};
b=b||{};
if (b.width==null||b.height==null)
b=FB.copy(b,FB.Canvas._computeContentSize());
b=FB.copy(b,{frame:'iframe_canvas'});
if (FB.Canvas._lastSize[b.frame]) {
var a=FB.Canvas._lastSize[b.frame].height;
if(FB.Canvas._lastSize[b.frame].width==b.width&&(b.height<=a&&(Math.abs(a-b.height)<=16)))
return false;
}
FB.Canvas._lastSize[b.frame]=b;FB.Arbiter.inform('setSize',b);
return true;
}
FB.init({
appId:APP_ID, //your app id (Numeric)
status:true,
cookie:true,
xfbml:true
});
FB.Canvas.setAutoResize()
};
I'm found the solution for fix issues when using jQuery and FB.setSize() - if you set vars definition before $(function(){}) (jQuery DOM ready) - setSize doesn't work. If all vars definition located inside $(function(){ all vars HERE }) - setSize starts working!
You might need to wait for images to be loaded. Otherwise the FB.Canvas.setSize(); might fire too soon and not include image sizes.
With jQuery use:
$(window).load(function(){
FB.Canvas.setSize();
});
Found a solution to reduce the height again if the content sites of your App have different heights. Usually the height increases easily but doesn't decrease to a smaller site again.
<head>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.Canvas.setSize({ width: 810, height: 920 });
/*{ set here the needed site height }*/
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: 'App ID', /*{ set here your App ID }*/
status: true,
cookie: true,
xfbml: true
});
/* Init fb Resize window */
/* Completly removed now in JS SDK*/
FB.Canvas.setAutoResize(7);
/* As of Jan 2012 you need to use */
FB.Canvas.setAutoGrow(7);
</script>
</body>
This is how I initialise my facebook applications:
<div id="fb-root"></div>
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() {
FB.init({
appId : appId,
status : true,
cookie : true,
xfbml : true
});
// Additional initialization code such as adding Event Listeners goes here
FB.Canvas.setSize({ width: 810, height: 620 }); // ******* THIS WORKS.
};
(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>
here is what I use:
<head>
...
<script type="text/javascript">
function facebookInit(appId) {
FB.init({
appId : appId,
status : true,
cookie : true,
xfbml : true
});
}
function increaseIframeSize(w,h) {
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
</head>
<body>
<script>
increaseIframeSize(720,800);
facebookInit(appId);
</script>
...
</body>
I also noticed the setSize call fails if the user's "Secure Browsing" setting is disabled. This may not be an issue for most, since the setting is enabled by default, but if you're running into this issue and now have an almost-bald head (like I do), check this setting on the account you're testing with.
I'm using jQuery 1.4.2 for a fixed bar on my site that scrolls with the site as you scroll.
But I'm also using 1.6.1 for a facebook thing I'm doing, and when I add them together, the bar breaks and the facebook thing works, but when I add the noConflict in, the bar works, but the facebook breaks, so if you could look at my code, and help me?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="themes/default/jx.stylesheet.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict();
</script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
mc$(document).ready(function() {
mc$("#floating-bar").jixedbar();
});
</script>
<style type="text/css">
body {
margin: auto;
background-image: url(template.png);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<div id="floating-bar">
<ul>
<li title="Home"><img src="icons/home.png" alt="" /></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Around The Web"><img src="icons/network.png" alt="Share" />
<ul>
<div id="fb-root"></div>
<!-- USE 'Asynchronous Loading' version, for IE8 to work
http://developers.facebook.com/docs/reference/javascript/FB.init/ -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '209445949091775',
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>
<li><a id="share_button" href="#"><img src="icons/facebook.png" title="Facebook" /> Facebook</a></li>
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'Atomic Star Studios',
link: 'http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829',
picture: 'http://www.atomicstarstudios.com/logo.jpg',
caption: 'http://www.atomicstarstudios.com/',
description: 'This is the content of the "description" field, below the caption.',
message: 'Visit Atomic Star Studios for excellent prices on great printg and professional design! We Have All Your Marketing Needs!!!'
});
});
});
</script>
<li><img src="icons/twitter.png" title="Twitter" /> Twitter</li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title"Top Pages">Top Pages
<ul>
<li title="About"><img src="icons/info.png" alt="About" /></li>
<li title="Products"><img src="icons/blogs.png" alt="Products" /></li>
<li title="Portfolio"><img src="icons/block.png" alt="Portfolio" /></li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<div class="text-container">Like us on Facebook!</div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829&layout=button_count&send=true&show_faces=false&width=100&action=like" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:30px;" allowTransparency="true"></iframe>
Follow #atomstars
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<span class="jx-separator-left"></span>
<ul>
<li title="Facebook"><img src="icons/facebook.png" alt="" /></li>
<li title="Twitter"><img src="icons/twitter.png" alt="" /></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Chat with us Live!"><img src="http://www.atomicstarstudios.com/livezilla/image.php?id=04&type=inlay"></li>
</ul>
<span class="jx-separator-right"></span>
</div>
</body>
</html>
There are two problems with your code.
First, you should call the noConflict in-between both jQuery requests, not after the second one. You need to load the modules you need with each version of jQuery with the version so that when you call noConflict, references to the plugins are moved with it. You should also add "true" to noConflict so that all references to jQuery are removed before loading the second one:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
For more information, see the jQuery.noConflict documentation.
With that said, you should really consider find a way to not have to do this. It is not an elegant way to use jQuery.
TO ANSWER #TGR: Try this for yourself and you'll see for yourself that my solution works perfectly fine:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jixedbar.googlecode.com/svn/trunk/src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
alert('jQuery ' + mc$.fn.jquery + ': ' + ( typeof mc$.fn.jixedbar ));
alert('jQuery ' + jQuery.fn.jquery + ': ' + ( typeof jQuery.fn.fixedbar ));
});
</script>
<title>6367968</title>
</head>
<body>
<p>6367968</p>
</body>
</html>
The first alert will show "jQuery 1.4.2: function" while the second one will show "jQuery 1.6.1: undefined".
load jQuery 1.4
load all plugins which need to use 1.4
use noConflict
load jQuery 1.6
The problem is that jQuery plugins tend to be written this way:
(function($) {
// plugin code using $ for jQuery calls
})(jQuery)
i. e. they have an internal copy of whatever window.jQuery was at the time the plugin loaded, and you cannot change that afterwards.
update: a little more detail on how noConflict works (was too long for the comments). When you load jQuery, it creates an object containing all its functions and data, and sets window.$ and window.jQuery to that object. The old value of window.$ and window.jQuery is saved in the object.
When you call noConflict, it restores the saved value (by default for $; if you call it with true, also for jQuery). This is useful if you had something in those variables before loading jQuery, and don't want it to be overwritten. E.g. if you loaded things like this:
load jQuery 1.6
load jQuery 1.4
call noConflict(true)
then the first step would put jQuery 1.6 into $ and jQuery, the second would overwrite them with 1.4, and noConflict would restore $ and jQuery to the 1.6 version.
But since you load 1.4 first, and call noConflict between the two, the old value for $ and jQuery which is restored is undefined, which is not particularly useful, and will be overwritten by 1.6 anyway, so the noConflict call does not do anything useful beyond returning the value of $ which then can be stored by some other name ($mc in this case). var $mc = $; would work just as well for that.
As for the plugins, the auto-executing function copies the value of window.jQuery at the moment the plugin is loaded, and it does not matter at all what happens to window.jQuery afterwards:
window.jQuery = 'foo';
(function($) {
window.fun = function () {
console.log($);
}
})(jQuery);
window.jQuery = 'bar';
fun(); // will log 'foo'
I've been trying to tackle this since last week and for the life of me I cannot seem to get this working on safari, all other browsers render the popup except Safari.
It seems straight forward enough, load up the javascript-sdk asynchronously, initiate it, and call FB.ui with method 'stream.publish'. The thing is I know this code should work in safari cause the example here does http://fbrell.com/fb.ui/stream.share.
I'm using this P3P header which we use that fixes a problem with IE7:
Response.AddHeader("P3P", "CP=\"NON DSP COR DEVa PSAa IVAo CONo OUR IND UNI PUR NAV DEM LOC\", " + "policyref=\"http://sweepstakes.mars.com/w3c/p3p.xml\"");
I'm hoping someone could offer the magic tip that's gonna get this working. Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function (){
FB.init({ appId: '<%= Common.appID %>', status: true, cookie: true,
xfbml: true
});
var publish = {
method: 'stream.publish',
message: 'test',
display: 'dialog'
};
FB.ui(publish);
};
(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>
</body>
</html>
After many tests and frustrations. A colleague pointed out that 'feed' is the new way of doing 'stream.publish'. This fixed the issue.
Edit: Outdated answer.
I've created a facebook connect application, iframe. I'm using it under apps.facebook.com/app-name.
It seems that after a refresh, the setSize() method simply fails. sometimes works, sometimes doesn't... (under latest Firefox and IE) is there a solution for that? would you recommend using the old API instead?
testcase:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>test</title>
<meta name="description" content="test">
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'XXXXXXXXX', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({ width:760,height:3000 });
};
(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);
}());
</script>
<div style="height:2000px;background:blue;width:760px;">
</div>
</body>
</html>
if for some reason window.name is set the FB.setAutoSize wont work, http://bugs.developers.facebook.net/show_bug.cgi?id=19720 in my case its connected somehow to jquery $.data
window.fbAsyncInit=function(){
FB.Canvas.setSize = function(b) {
if (typeof b!="object")
b={};
b=b||{};
if (b.width==null||b.height==null)
b=FB.copy(b,FB.Canvas._computeContentSize());
b=FB.copy(b,{frame:'iframe_canvas'});
if (FB.Canvas._lastSize[b.frame]) {
var a=FB.Canvas._lastSize[b.frame].height
if(FB.Canvas._lastSize[b.frame].width==b.width&&(b.height<=a&& (Math.abs(a-b.height)<=16)))
return false;
}
FB.Canvas._lastSize[b.frame]=b;FB.Arbiter.inform('setSize',b);
return true;
}
FB.init({
appId:"<?php echo FB_APP_ID; ?>",
status:true,
cookie:true,
xfbml:true
});
FB.Canvas.setAutoResize()
};