edgeless
02-01-2015, 08:56 PM
The other day I asked about a problem with Showthread running code for Facebook JS that's independent from code I place in the footer. Well I more or less figured out what's going on (I think) and I've come up with a solution. But it's not a perfect one in all ways (yet). As such, I'd very much appreciate some expert opinion, or even just some ideas on how to make it better. Allow me to explain...
If you read my previous post you may recall that I was unable to get Showthread to run a JS timer string for an FB plugin, despite that the timer string worked everywhere else on my vB site. It just wouldn't work on the Showthread pages. So I figured out that Showthread pulls the FB appID from the global vB FB config settings (set in FB Options); while other vB components don't seem to do the same thing. At least that's what happens when the FB Like Button is enabled for threads.
This means that my FB plugin content loads on Showthread pages without needing a presence of an all.js/sdk.js call on the footer template. But conversely, the FB plugin content will NOT load on any non-Showthread pages without that all.js/sdk.js call's presence on the footer template. However, Showthread seems to always get the remote jQuery library calls that I place on the footer template just fine... just as the other vB components do.
So, vB's Facebook Like Button integration for Showthread pages seems to be structured to call and load all.js or sdk.js independently from anything I may include on or omit from the footer template.
I found the source location of the all.js call for the thread Like Button. it's in Facebook Templates > facebook_likebutton.
Here's the original code:
<vb:if condition="$show['loadfbroot']">
<span id="fb-root"></span>
<script type="text/javascript" src="//connect.facebook.net/{vb:rawphrase facebook_language}/all.js#appId={vb:raw appid}
&xfbml=1"></script>
</vb:if>
<fb:like href="{vb:raw href}" font="tahoma" layout="standard" show_faces="false" width="260" action="like" colorscheme="light"></fb:like>
When I change it to the following, my JS timer string works on Showthread pages:
<vb:if condition="$show['loadfbroot']">
<span id="fb-root"></span>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js.async=true;
var myTimer = setTimeout(function() {
js.src = "//connect.facebook.net/en_US/sdk.js#appId={vb:raw appid}&xfbml=1&version=v2.0";
}, 7500);
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</vb:if>
<fb:like href="{vb:raw href}" font="tahoma" layout="standard" show_faces="false" width="260" action="like" colorscheme="light"></fb:like>
The problem I would like help with is this. Now, once the FB Like Button and the FB plugin content are fully loaded (and they load quite nicely after whatever delay I set), the page no longer goes back to perfect vertical alignment in the browser window. It jumps downward the exact distance of the height of the Like Button. With the original code it would jump downward briefly, but then realign so the post header bar was perfectly against the top of the browser window. Does anyone have an idea on how I might fix this?
Thank you in advance :)
--------------- Added 1422870705 at 1422870705 ---------------
Well, never mind. Sometimes for me the simplest things are the most evasive ones. I merely added a return false; and it solved the problem.
If you read my previous post you may recall that I was unable to get Showthread to run a JS timer string for an FB plugin, despite that the timer string worked everywhere else on my vB site. It just wouldn't work on the Showthread pages. So I figured out that Showthread pulls the FB appID from the global vB FB config settings (set in FB Options); while other vB components don't seem to do the same thing. At least that's what happens when the FB Like Button is enabled for threads.
This means that my FB plugin content loads on Showthread pages without needing a presence of an all.js/sdk.js call on the footer template. But conversely, the FB plugin content will NOT load on any non-Showthread pages without that all.js/sdk.js call's presence on the footer template. However, Showthread seems to always get the remote jQuery library calls that I place on the footer template just fine... just as the other vB components do.
So, vB's Facebook Like Button integration for Showthread pages seems to be structured to call and load all.js or sdk.js independently from anything I may include on or omit from the footer template.
I found the source location of the all.js call for the thread Like Button. it's in Facebook Templates > facebook_likebutton.
Here's the original code:
<vb:if condition="$show['loadfbroot']">
<span id="fb-root"></span>
<script type="text/javascript" src="//connect.facebook.net/{vb:rawphrase facebook_language}/all.js#appId={vb:raw appid}
&xfbml=1"></script>
</vb:if>
<fb:like href="{vb:raw href}" font="tahoma" layout="standard" show_faces="false" width="260" action="like" colorscheme="light"></fb:like>
When I change it to the following, my JS timer string works on Showthread pages:
<vb:if condition="$show['loadfbroot']">
<span id="fb-root"></span>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js.async=true;
var myTimer = setTimeout(function() {
js.src = "//connect.facebook.net/en_US/sdk.js#appId={vb:raw appid}&xfbml=1&version=v2.0";
}, 7500);
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</vb:if>
<fb:like href="{vb:raw href}" font="tahoma" layout="standard" show_faces="false" width="260" action="like" colorscheme="light"></fb:like>
The problem I would like help with is this. Now, once the FB Like Button and the FB plugin content are fully loaded (and they load quite nicely after whatever delay I set), the page no longer goes back to perfect vertical alignment in the browser window. It jumps downward the exact distance of the height of the Like Button. With the original code it would jump downward briefly, but then realign so the post header bar was perfectly against the top of the browser window. Does anyone have an idea on how I might fix this?
Thank you in advance :)
--------------- Added 1422870705 at 1422870705 ---------------
Well, never mind. Sometimes for me the simplest things are the most evasive ones. I merely added a return false; and it solved the problem.