Send button display is strange - workaround?
I specify the Facebook like/send buttons like so:
<fb:like href="[URL]" show_faces="false" width="428" action="recommend" font="tahoma" send="true"></fb:like>
In the process of displaying these buttons, they go through these three visual states:
1) Send button and Recommend button displayed side-by-side with Send button first.
2) Recommend button and Send button switches places, but the Send button displays below the expected display position.
3) Recommend button and Send button are displayed side-by-side normally, as the Send button has moved back up.
Is this an anomaly I can do something about by how I specify the button, or do I need to wait for a fix from Facebook?
On edit, here's the code I'm using...
After the body tag, I have (site-specific info redacted with angle brackets)...
<div id="fb-root"></div>
<script language="javascript" type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '<appid>',
status: tr开发者_开发问答ue,
cookie: true,
xfbml: true,
channelUrl: '<siteroot>/channel.html',
oauth: true
});
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackEvent', 'facebook', 'like', href]);
});
};
(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>
The button code is as follows:
<fb:like href="<pageurl>" show_faces="false" width="428" action="recommend" font="tahoma" send="true"></fb:like>
I haven't seen this myself, but it sounds like something that could be caused by the fb:like tag being populated before the whole page is rendered. How are you calling the javascript that initializes the tag? You might try setting it up in the window.onload event so it doesn't get run until the page is fully loaded.
A few things to try:
Enclose the <fb:like> tag in a div styled with width:428px.
Change the async=true to async=false (temporarily just to see if it solves the problem).
Likewise, try chaning async=true to defer=true.
Change the code layout to this:
<head>
<script type='text/javascript' src='http://connect.facebook.net/en_US/all.js' defer='defer'></script>
</head>
<body>
<div id="fb-root"></div>
<script language="javascript" type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '<appid>',
status: true,
cookie: true,
xfbml: true,
channelUrl: '<siteroot>/channel.html',
oauth: true
});
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackEvent', 'facebook', 'like', href]);
});
};
</script>
Or maybe even this:
<head>
window.onload=function() {
d=document;
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('body')[0].appendChild(js);
};
</head>
<body>
<div id="fb-root"></div>
<script language="javascript" type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '<appid>',
status: true,
cookie: true,
xfbml: true,
channelUrl: '<siteroot>/channel.html',
oauth: true
});
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackEvent', 'facebook', 'like', href]);
});
};
</script>
加载中,请稍侯......
精彩评论