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>
Related
I'm trying apply a custom CSS to fb like button using this code:
$("#fblike").css("background-color", "red");
But isn't working, I'm getting this error: Uncaught TypeError: Cannot read property 'css' of null
Is there any way to solve this? Here is my code:
<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://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v3.1&appId=XX&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<span class="fb-like">
<fb:like id="fblike" name="fblike" send="true" width="450" show_faces="true"
href="https://www.facebook.com/cocacola/"></fb:like>
</span>
Also, I've tried using CURL to parse my facebook page to handle elements, but still asking to login, so I'm not able to apply the CSS in this case too...
Thank you.
I am trying to add fb share in drupal site i want to do it with javascript so I followed following steps
Created on app page through Facebook developer
There I have created app and got appid and code to put on my template following is the code
<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.5&appId=myappid";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I am getting:
Uncaught TypeError: Cannot read property 'fb_app_id' of undefined this error in
console
Do I need to link any other js file something I am missing because of that share button not coming
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.
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?
I want to add a button to share a picture. This is my code in tag body:
<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.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="my_image"></div>
Don't work. When i run my page.html it show an error:
GET file://connect.facebook.net/it_IT/sdk.js net::ERR_FILE_NOT_FOUND
However I WANT TO SHARE WITHOUT ID_APP!
Since you're testing this locally using a file path, "file:" is prepended onto the URL for the facebook script, hence the "file://connect.facebook.net". If you change the url to use "http:" or "https:" in the script, it should work as desired.