So today I found this awesome piece of code that instantly made my website faster. Actually, any link clicked became almost instant. It's called InstaClick (http://instantclick.io/). I installed it and everything worked great ..except that Facebook Like and Twitter Tweet buttons suddenly didn't show up anymore.
I searched their documentation on http://instantclick.io/scripts for a solution and found out it might be possible by changing the .on('change') code. But the problem is, the Facebook script:
<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.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=XXXXXXXXXXXXXXX&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and the Twitter script:
<script type="text/javascript">
window.twttr = (function (d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src= "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
don't seem to use these codes to initiate it. Has anyone found a way to get this working? InstantClick seems like a wonderful way to speed up websites and if it worked with Twitter and Facebook it might just revolutionize the way the internet works.
UPDATE #1:
I found out how to fix Twitter by including it like this:
<script type="text/javascript" async defer src="//platform.twitter.com/widgets.js"></script>
But including Facebook sdk.js the same way doesn't work. Any ideas?
UPDATE #2:
Just a thought, maybe a fix would be to check if Facebook or Twitter .js are loaded and if not, load them again?
Related
I'm attempting to implement a Facebook like button on a web page on a domain which was recently upgraded to SSL. The sample code Facebook provides doesn't work for me. I keep getting this error when attempting to use Facebook's like button code:
Failed to execute 'postMessage' on 'DOMWindow': The target origin
provided (http://mywebsite.com) does not match the recipient window's
origin (https://mywebsite.com)
I completely cleaned out all http:// references throughout my project, so I'm a bit stumped. I did find a post which suggested the problem I'm encountering might have to do with the code running before the page is fully loaded. With that in mind, I'd like to delay running JavaScript until the page is loaded.
So let's say they want me to put this code just inside the <body> tag:
<div id="fb-root"></div>
<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.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then I put my button somewhere on the page:
<div class="fb-like" data-href="https://www.facebook.com/MyPage/" data-width="100" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
How would I move the JavaScript they want me to embed inside the body of the <body> tag into my script.js file? I tried this, but I'm kinda rusty on jQuery, so I wanted to see if I'm fouling up what I'm attempting to do (spoiler: I probably am):
(function($) {
$(".fb-like").loaded(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
// also tried adding https: in front of it, like so
// js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'))
})
Update
Based on comments, I created an App on the Facebook developer portal, classified it as "Business" and enabled it publicly.
I put the following JavaScript code inside the <body> tag, per Facebook's instructions.
<div id="fb-root"></div>
<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.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=XXXXXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I also cleaned out the code I put in my scripts.js file so that all the code for the like button is on the html page.
I put the button inside a visible portion of the markup inside the <body> tag. I checked that the width of the button isn't set to zero. I refreshed the page, I nuked the browser cache (Safari and Chrome).
If I type https://mywebsite.com/my-page-with-like-button.html in the browser, I still get this error:
Failed to execute 'postMessage' on 'DOMWindow': The target origin
provided (http://mywebsite.com) does not match the recipient window's
origin (https://mywebsite.com)
...and nothing appears.
If I type in http://mywebsite.com/page-with-like-button.html in the browser, the page loads without an error, but the like button doesn't appear.
Any ideas re: what I'm mucking up are greatly appreciated. The last time I did this, it was a 5 minute project. Now, I'm on day 2 of fiddling with it.
To somewhat answer your question on how to add the FB script to an external js file. This is a best guess scenario; You could try and add it as it is in the example:
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I believe this would still need to be included before your <div> holding the like button. If you have other js inside that file, this should be at the top and outside of any other JS you have. for example:
(function(d,s,id){ /* FB script */}(document, 'script', 'facebook-jssdk'));
(function($){ /* your other JS */ })(jQuery);
This is purely a guess, and not the recommended 'FB official' way. So as long as you can add what you need in a js file just after the <body> element, that should work. I also assume you would need the correct markup for this in the HTML file(s) for this also, meaning:
<body>
<div id="fb-root"></div>
<script src="yourJsFileWithFB.js"></script>
....
.....
<div class="fb-like"></div>
...
.....
</body>
Plus all the data attributes referenced on the like button mentioned in the example HERE
Gfycat has a javascript library that enables embeding on my website written in Rails with a div like this:
<div class="gfyitem" data-autoplay=false data-id="BestYellowishElephantseal"></div>
To do this it tells me to add their script after the opening body tag.
<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.src = "https://assets.gfycat.com/gfycat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'gfycat-js'));
</script>
However, when adding it inside the body tag it only loads when hard refreshing the page. I tested this by adding a console.log("Gfycat Loaded"); inside the function.
After some googling it seems like this has to do with turbolinks, and I have had some issues with this before.
The solution to this has been to add the JS inside:
ready = ->
# Code here
$(document).on "page:change", -> ready()
$(document).on "page:restore", -> ready()
So I tried adding the gfycat function inside the document ready, but get exactly the same result.
Anyone know what is causing this and how to fix it?
So this is what the code I'm testing with at the moment:
https://jsfiddle.net/99f6soxy/
On hard refresh I get:
Page loaded
Library got called
On clicking a link I only get:
Page loaded
Have you tried, like this ?
<script>
function gfycatInit(){
function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://assets.gfycat.com/gfycat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'gfycat-js');
}
}
$(gfycatInit);
$(document).on("turbolinks:load", gfycatInit);
</script>
Why services like Facebook Like Button, Disqus comments.. tell us to add this code to our document
<div id="fb-root"></div>
<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.src = "//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
And not simply to add this code that is the same thing?
<div id="fb-root"></div>
<script id="facebook-jssdk"src="//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.5"></script>
When the browser finds the <script src="..."> tag, it blocks further rendering of the page until the javascript has loaded (or the loading fails). Obviously, it's not what you want for your website, to be stuck due to external javascripts.
Facebook gives you a code that will load the javascript asynchronously, without interfering with your page loading.
Starting from HTML5, you also have the "async" attribute for the script tag that gives you a similar behaviour. <script src="..." async></script>
You can find more informations about javascript loading, in this article: http://www.html5rocks.com/en/tutorials/speed/script-loading/
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0]; //line 1
if (d.getElementById(id)) return;//line 2
js = d.createElement(s); js.id = id;//line 3
js.src = "//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.5"; //line 4
fjs.parentNode.insertBefore(js, fjs);//line 5
}(document, 'script', 'facebook-jssdk'));
</script>
just observe at line 1 and line 5 - it is just trying to ensure that
1) facebook's script should be the first script in the page.
2) facebook's script is loaded lazyly. That is, document.ready() event will not wait for this script to be loaded.
I used the following script in my web page
In body tag i used the following code
<div id="fb-root"></div>
<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.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
In my blog listing I used the following in each blog:
<div class="fb-share-button" data-href="http://test.com" data-layout="button"></div>
Its displayed fine. After 10 blogs while scroll the remaining data are loaded dynamically by using the ajax file.
Here also I used the above script and Div share button. But it is not displayed with the ajax loaded file.
I googled a lot and I couldn't find a right solution. Please help me to fix this.
after ajax, call function FB.XFBML.parse(); to force the refresh/rendering FB share buttons
I want to sync FB posts to my own website, which is Drupal site.
I found this embed code that allow me to embed posts to any website.
<div id="fb-root"></div>
<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.src = "//connect.facebook.net/zh_CN/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-post" data-href="https://www.facebook.com/Abner.Ma.1989/posts/411557558943779" data-width="466">
<div class="fb-xfbml-parse-ignore">由
马昕睿贴出
贴子。</div>
</div>
You can see if I change the code posts part
data-href="https://www.facebook.com/Abner.Ma.1989/posts/411557558943779"
to something else, then the embed content will change too.
So I think this might be one way to sync posts from FB to my own website.
So the question is : How could I obtain recent FB post ID?
Or: Any way to sync FB posts to my own website?
Thanks!