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.
Related
I'm trying to get the facebook video player instance in order to subscribe to different player events.
In the desktop browser, it just works fine and I'm able to get player instance on the xfbml.ready function call but on mobile, it just won't fire.
Here's my code.
window.fbAsyncInit = function() {
// Get Embedded Video Player API Instance
var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
alert("ready");
if (msg.type === 'video') {
my_video_player = msg.instance;
}
});
};
(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/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
if anyone want to tryout the code it is here: http://milracle.github.io/fbPlayer.html
The same code was working a day ago and now it just stopped working in mobile browsers. Does anyone know about any changes made to the video player itself? I googled it but found nothing. I believe the Stack Overflow community can help as always!
I am also looking for a solution to this issue - I am also pretty sure this has just stopped working recently - I can replicate the issue in chrome dev tools using the mobile device mode.
This issue has been fixed by facebook developer team. review thread at: https://developers.facebook.com/bugs/338091156930372/?legacy_version=true
I have an issue with the existing Facebook Callback JavaScript codes that i used.
Every time i go to the page (the page where my Facebook button is) and press the "Like" button from Facebook, i get a pop-up dialog that gives me the option to Like the page or cancel/close the pop-up.
But once i press "Like", the callbacks does not work. The callback will only work if i click on "Like"(or "Dislike") the second time and onward.
This is the code i am using.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APPID',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
FB.Event.subscribe('edge.create', function (response) {
console.log('Liked: ' + response);
});
FB.Event.subscribe('edge.remove', function (response) {
console.log('DisLiked: ' + response)
});
};
(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/en_US/sdk.js#xfbml=1&version=v2.12&appId=MY_APPID&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div><div class="fb-like" data-href="https://www.facebook.com/MyURL" data-layout="standard" data-action="like" data-size="large" data-show-faces="true"></div>
I checked similar questions here in StackOverflow, but it seems like most if not all is out dated. Hope anyone can help me with this.
a client wants me to have a function where visitors/users of the website needs to press the Like button to get a specific amount of points.
Then please tell your client that what they are asking for is absolutely not allowed.
https://developers.facebook.com/policy#properuse, point 4.4:
Only incentivize a person to log into your app, enter a promotion on your app’s Page, check-in at a place, or to use Messenger to communicate with your business. Don’t incentivize other actions.
See also https://developers.facebook.com/docs/apps/examples-platform-policy-4.4 for more examples of what exactly is and isn’t allowed.
In my htmlpage there is an script tag
Something like this
<script id="loadmenu"></script>
The "src" attribute for the above script element depends on the enviornment in which the web application is hosted.
So I wrote something like this
$(document).ready(function(){
$("#loadmenu").attr("src",SRConfig.WESHost + "/webapp/" + SRConfig.WESApp+ "/servlet/WPSNav?mod=iwswps&idkey=displayhome");
});
The script is being loaded fine from the specified source. But the script is loaded only after the document is being parsed and loaded in the browser.
Since I am using $(document).ready().
As the document is finished parsing, the script is not getting executed after being loaded. Is there any way I can execute the specific <script> tag
after the
web page is being parsed and loaded in browser?
It seems you jquery selector is not correct. It should be
$("#loadmenu").attr("src",SRConfig.WESHost + "/webapp/" + SRConfig.WESApp+ "/servlet/WPSNav?mod=iwswps&idkey=displayhome");
Insert script tag instead:
$(document).ready(function(){
var scriptTag = $("<script/>");
scriptTag.attr("src",SRConfig.WESHost + "/webapp/" + SRConfig.WESApp+ "/servlet/WPSNav?mod=iwswps&idkey=displayhome");
$("head").append(scriptTag);
});
or use a similar code of facebook.
(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 = "Your URL";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'loadmenu'));
Take a look at Detect if page has finished loading if it helps you.
Basically you can use .load function with window to see if it's fully loaded and trigger your script after that.
Documentation:
http://api.jquery.com/load-event/
Is there a reason you are modifying the src attribute in javascript ?
If the script path to load is determined by the hosted web application, I'm guessing you could simply do something like:
<script id="loadmenu" src="${SRConfig.WESHost}/webapp/${SRConfig.WESApp}/servlet/WPSNav?mod=iwswps&idkey=displayhome"></script>
The ${} being replaced in your html template by your server side app.
I'm not familiar with the technology behind theses SRConfig.* so I could be totally wrong.
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>
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/