Develop Reference

JS Embedding gfycat on my site

gfycat.com gives the option to embed a GIF on my site using JS Embed option.
I get a code like this:
<img class='gfyitem' data-id='HighMelodicDairycow' />
The problem that I couldn't find any information on the site about the Javascipt code needed to run it. Any ideas?

I couldn't find it on their site either but here's their GitHub repo for embedding on 3rd party sites: https://github.com/gfycat/gfycat.js/tree/master
.
Here are the important parts from the readme:
Script
To get the JS Embed working, you just need to add this 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>
When this script runs, any element that has the class, gfyitem will be converted to a Gfycat embed.
Available Options
If you are wanting to change the behaviour of the embed, you can add these to the element as a data attribute. (data-)
data-id: the Gfycat id (required)
data-controls: include controls for pause/speed/etc (default: false)
data-title: show the title on hover (default: false)
data-autoplay: automatically start playback on page load (default: true)
data-expand (DEPRECATED, please use data-responsive): expand video element to fill the space of its container (default: false)
data-responsive: expand video element to fill the space of its container (default: false)
data-max-height (works only together with data-responsive=true): set height upper bound for a responsive video
data-optimize: play videos when they're 50% visible, and lazy loads gifs (default: true)
data-gif: load .gif file instead of video (default: false)
data-hd: load high quality video (default: true)
data-playback-speed: set video playback speed, values from the interval [0.125, 8] (default: 1)
I know you this is probably too late to help you but hopefully this helps anyone else that runs into this issue.

Where to put the FB.ui() function in java script while making a custom share button

I am trying to make a share button that alerts a nice and cool msg after sharing but no luck yet. FB documentation says that FB.ui() function must be included after FB.init() function. But the problem is when i do this it automatically pops up a window with fb share window but I want that it appears after the share button is clicked.
here is my code
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1404714646487865',
xfbml : true,
version : 'v2.2'
});
FB.ui({
method:'share',
href:'http://umovietube.com/'
,},
function(response){if(response &&!response.error_code){
alert('Posting completed.');}else{
alert('Error while posting.');}});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
And here is the code I am using to display
share button
<div class="fb-share-button" data-href="http://umovietube.com" data-layout="box_count"></div>
I discovered that the FB.ui () function is in side the window.fbAsyncInit = function(){} function just after FB.init() function. which causes the unexpected popup window as soon as the page loads.
So where to put that FB.ui function to invoke and to get to my desired action from Facebook share button? I am using default share button code provided by Facebook that is quoted above.

What you could do is put the FB.ui() in a click handler.
E.g.
$('.share-button').click(function() {
FB.ui({
method:'share',
href:'http://umovietube.com/'
,},
function(response){if(response &&!response.error_code){
alert('Posting completed.');}else{
alert('Error while posting.');}});
};
});
and then call this .share-button at the appropriate place via a class in the view.
Hope it helps!

Global variable does'nt work after external .js file in script tag

Here my javascript code:
<script type="text/javascript">
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "//mysite.co/js.js";
document.body.appendChild(js);
alert(x);
</script>
In mysitecom/js.js file is like that
var x = '1233123';
//some code
The problem is the alert doesn't work. In google chrome's console says
Uncaught ReferenceError: x is not defined mypage:31
(anonymous function)
But if i include external js file like that;
<script src="//mysite.co/js.js" type="text/javascript" ></script>
It works.
But i need the first method...
What is the fix?
Thanks.

When you append script tags to the body, they load as they can, rather than in order. That's why you want to add listeners for when the document is done loading. For example, the classic jquery case -
$.ready(function () {
alert(x);
});
This should work, as the script tag has been loaded by this time, and x has been defined. Also, since you've added the script tag programatically, the browser is going to continue with the script chunk that alerts x, rather than waiting for the script referenced to load.
Edit - a non-jquery way of doing this is mentioned in Javascript - How to detect if document has loaded (IE 7/Firefox 3)
Per #nrabinowitz - http://jsfiddle.net/7br7q/ should show that .ready will indeed take into account dynamically added scripts.

How to defer loading of a Norton Secure Site Seal?

I am displaying a Norton Secure Site Seal in a website and I would like to improve the page speed deferring the loading of the seal script. All the tries I've done failed and I found only this page where this is mentioned (link). Has anyone ever found a good workaround for this?
The deferred code I'm using to run my other scripts looks like this:
<script type="text/javascript">(function(d, s) {
var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.src = url;
js.id = id;
fjs.parentNode.insertBefore(js, fjs);
};
load('/js/scriptone.js', 'one');
load('/js/scripttwo.js', 'two');
}(document, 'script'));
</script>
In case you want to have a look to the site seal initialization script:
(I'm using the flash animated seal)
<script type="text/javascript" src="https://trustseal.verisign.com/getseal?host_name=www.undisclosed.com&size=S&use_flash=YES&use_transparent=YES&lang=en"></script>
obviously this will only display correctly in my website and I opted to change the domain name for privacy. I really want to avoid using iframe and if you find relevant I am also loading jQuery

This is killing my business too. Seriously... +2 to +20 seconds per page load. AFYS?
We are switching to hosting the image locally but still linking to the original URL on Norton. Don't do this. Mark this answer down. It's wrong. It's illegal. But it's practical.
https://trustsealinfo.verisign.com/splash?form_file=fdf/splash.fdf&dn=WWW.EXAMPLE.COM&lang=en
UPDATE:
Real solution is to:
Call 877-438-8776, x2, x1
Tell them seal is slow and you have > 10,000 visits per day on your site
They give you media kit to install on your own site

If you look at the code, they are using document.write.
The way I handle this is the following
document.write = function(s) {
document.getElementById('seal-wrapper').innerHTML += s;
}
Of course this is a very simple hack which only works when there's a single script which uses document.write and you know where you want it to be written to.

I've tried to load seal into a iframe and then put it to where it's intended to be. It works for me. With the help of jQuery. Here it is:
Create .js file (I called it hackseal.js)
$(function () {
if (typeof(vs_hack) !== 'undefined') {
return;
}
vs_hack = true;
var iframe = document.createElement('iframe');
var html = '<script src="url_to_verysign" type="text/javascript"></script>';
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();
iframe.onload = function () {
var copy = ['dn', 'lang', 'tpt', 'vrsn_style', 'splash_url', 'seal_url', 'u1', 'u2', 'sopener', 'vrsn_splash', 'ver', 'v_ua', 're', 'v_old_ie', 'v_mact', 'v_mDown', 'v_resized'];
for (var copy_i in copy) {
window[copy[copy_i]] = iframe.contentWindow[copy[copy_i]];
}
$('script#seal-sign').replaceWith(iframe.contentWindow.document.body.innerHTML);
}
});
Change the original code from this
<script type="text/javascript" src="url_to_verysign"></script>
to this
<script id="seal-sign" type="text/javascript" src="url_to_hackseal.js"></script>

Alert after like

This is my script to like my facebook page on my website.
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like-box" data-href="http://www.facebook.com/#!/ConcessionnaireCaronMazda" data-width="300" data-height="100" data-show-faces="false" data-stream="false" data-header="false"></div>
<div id="fb-root"></div>
How can i make an alert when the button is clicked ??

You should use FB.Event.subscribe to subscribe to edge.create event (it's working for HTML5 and XFBML versions of Like Box Social Plugin.
FB.Event.subscribe('edge.create', function(pageURL){
alert('User liked page: ' + pageURL);
});
NOTE: you can use FB.Event.subscribe only then Facebook JS-SDK is fully loaded on page, to ensure it's loaded you may use window.fbAsyncInit function:
window.fbAsyncInit = function() {
// Here Facebook JS-SDK is loaded and you may use it.
// FB.init call should be placed here if you use it...
// Otherwise you should use next JS-SDK URL
// `//connect.facebook.net/en_US/all.js#xfbml=1&appId=APPLICATION_ID`
// Subscribe to event
FB.Event.subscribe('edge.create', function(pageURL){
alert('User liked page: ' + pageURL);
});
}
Update:
Just double checked and it seems that you required to use application to be able to subscribe to events and you only may do so on URL's that are within your Site/Canvas URL, otherwise next error will be thrown:
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the Application configuration. It must match one of the Connect or Canvas URLs or domain must be the same as or a subdomain of one of the Application's base domains.

It looks like you might need to use the XFMBL version then you can use the FB.Event.subscribe method, edge.create.
Like Box documentation - http://developers.facebook.com/docs/reference/plugins/like-box/
FB.Event.subscribe - http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/