How to create a button that can be used with embed code? - javascript

I am working on a project where I need to create an embeddable button. I just want to give some code to the clients and ask them to put it where they want the button to appear on their websites. What is the best approach to it? As an example please see the following image:
I will be really thankful if someone can provide some example code.

The simplest form would be to provide a hyperlink:
Do Something
Or you could use an image button:
<a href="http://mysite.com/dosomething" title="DoSomething">
<img src="http://mysite.com/images/a.jpg" alt="DoSomething" />
</a>
These both remove dependencies on CSS and JS.
Or you can do it like suggested in your question:
<script src="http://mysite.com/scripts/embedbutton.js">
document.write('<link rel="stylesheet" href="http://mysite.com/css/embedbutton.css" />');
document.write('<div id="mybutton" onclick="DoSomething(event);">DoSomething</div>');
function DoSomething()
{
/* action code here */
}
</script>

I think that the javascript solution is the one thtat you need.
Create an javascript that will write the HTML of your button. Put the code in public/js/mybutton.js for example.
var link = 'http://yoursite.com';
var text = '<div><a href="' + link + '"><img src="'
+ link
+ '/public/images/image.png" alt="Some alt text for the image" /></a></div>';
document.write(text);
Then provide a script tag in your page for the users to embed your butscriptton.
<script src="http://yoursite.com/public/js/mybutton.js"></script>
The result will be a image with link to your site, rendered right after the script. You can use inline styling also.
I belive that this is good option when you want prevent your button styling modifications.

You could use a simple link:
Blah
and then ask your clients to embed this code into their sites. Obviously depending on the information you need to exchange between the client site and your site there could be additional parameters, javascript code, ...

Related

How I can create a button for save a image with Javascript or any Javascript framework?

I would like save with a button a generated picture. I see the fastest solution is JavaScript, probably JQuery or any framework.
My application generate a img label, for example:
<img src = "data:image/png;base64,iVBORw0KGgo...(it's very long)"/>
The many problem is the src attribute because change for my application, first I need catch the URL of this.
Thank you very much!
You can use the download attribute in HTML. If the img src is automatically generated, you could use the script below to put it in the href:
$('#save').prop('href', $('img').prop('src'));
<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png"/><br/>
<a id='save' download>Save</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Structured Data with Lazy-Loaded images?

I want to put in Structured Data tags on Product-Images for SEO reasons.
<img class="img-responsive" src="placeholder URL" data-src="Actual URL"/>
The problem I'm running into is: Google picks up my SRC value which is only a placeholder image - the actual image(data-src) is only loaded when the user scrolls enough to bring the image into view.
Use a <noscript> block and put your image with the structured data tag in there. Google will then use that image rather than the image placeholder. This also means any users without JS enabled (there are a few, but they're still about!) will also still see the images. Note: You need to then disable the placeholder images if JS isn't enabled otherwise non-JS users will see two images.
For example
<img class="img-responsive js-only" src="placeholder URL" data-src="Actual URL"/>
<noscript>
<img src="Actual URL" data-src="Actual URL" itemprop="image"/>
</noscript>
Verified this approach using Google's structured data testing tool - https://developers.google.com/structured-data/testing-tool/.
Edit: how to show images only with JS:
You don't need to hide noscript images - anything inside a noscript block is only used if JavaScript is disabled. You can show the responsive images only when JS is enabled by adding class="no-js" to the HTML element, the following JavaScript block to the HEAD:
<script>
var headElement = document.getElementsByTagName("html")[0];
var regExp = new RegExp('(\\s|^)no-js(\\s|$)');
headElement.className = headElement.className.replace(regExp,' js ');
</script>
and the following CSS:
html.no-js .js-only {
display:none;
}
html.js .no-js {
display:none
}
Just add the attribute content to your img tag with the real image url. Google will use this, but the browser will ignore it.
<img src="placeholder URL" data-src="Actual URL" itemprop="image" content="Actual URL" />
This is in my opinion better because you won't need extra meta, noscript or JS code, just one single attribute.
Tested and tried with Google's structured testing tool (https://search.google.com/structured-data/testing-tool)
It's very simple add just this:
Good typo
<meta itemprop="image" content="your_image_url" />
Note the final "/"
I think a solution is to use meta content tags, since they don't render anything like so:
<meta content="/img-1.jpg" itemprop="image">
<meta content="/img-2.jpg" itemprop="image">
<meta content="/img-3.jpg" itemprop="image">

How can I load a hotel search from the HotelsCombined script?

I am trying to add a hotel search on my website. The hotel search is created by HotelsCombined and they have given me this code to show the hotel search:
<script type='text/javascript' src='http://hoteles.gangatravel.es/SearchBox/297018'></script>
But I've put the code in my html and does not work, anyone know how I can load the script? I tried it with an iframe and does not work either.
Well, what exactly do you want it to do?
I can show you the general idea. That is: the script puts a variable HCSB in the memory. That variable has properties (= variables of an object) and methods (= functions of an object)
<script src="http://hoteles.gangatravel.es/SearchBox/297018"></script>
<script>
// by loading this script, you get a variable HCSB
// so, an example of a variable dump of HCSB
function var_dump() {
for (i in HCSB) {
log(i +': '+ HCSB[i]);
}
}
function log(text) {
document.getElementById('log').innerHTML += text + '<hr>';
}
</script>
<input type="button" value="var dump" onclick="var_dump()">
<div id="log"></div>
EDIT: I presume you want something like this: http://hoteles.gangatravel.es/
You want such a form on your site. But would you mind elaborating a little more?
Oh yes, forget iframe. This is an javascript API.

HTML/JS: Confused about method to create an image button

I need to create a simple button made only of an image, and which will open a JQuery Dialog when the user clicks on it.
I am doing some reading and notice many solutions: <button>, <image> with a <a>, using CSS to modify a button background, etc...
This is confusing, what is the proper way to implement my image button?
Thanks.
P.S.: The button/image should be focussable. An operational JSFiddle example is welcome.
The proper way largely depends on what the button will do if JavaScript is not available.
If you are going to submit a form then:
<button> <img src="..." alt="..."> </button>
If you are going to go to a URL then:
<img src="..." alt="...">
If you are going to do absolutely nothing (generally not a good idea, you should follow the principles of Progressive Enhancement and Unobtrusive JavaScript, but acceptable if you only generate the button with JavaScript in the first place and the loss to the user is convenience rather then essential functionality):
<button type="button"> <img src="..." alt="..."> </button>
You then bind the JavaScript to either the form's submit event, or the button/anchor's click event and prevent the default behaviour so the form won't be submitted / the link won't be followed if the JavaScript executes successfully.
Create a button and put background-image for it.
Checkout the fiddle.
http://jsfiddle.net/siyakunde/Y38nz/
I found the solution after many struggles: http://jsfiddle.net/YRY8M/3/.
<html>
<head></head>
<body>
<input type="image" tabindex="0" onclick="doSomething()" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG"
/>
<br />
<button tabindex="1">I am focussable too !!!</button>
</body>
</html>
And some javascript:
function doSomething() {
alert('Hello!');
}
It depends on what you want to do in every case. There is no guideline that says "you should do it like this", but there are situations that some cases are more suitable than others.
For example according to this review, IE versions of 8 and below have some buggy behaviour regarding <button> tag when trying to use it as a submit button.
Ηowever the <button> has some new attributes added in HTML5 which you can see here , ammong them is autofocus and other useful that will be supported by most modern major browsers.
In your case that you want to maintain the "focus" (i assume with tabbing support), if you use a single <image> as a button (with or without <a>), you will have to add some JS code to make the image focusable when the appropriate tab is pressed. So you will have to write a bit more code to do the same thing.
There is one more solution which might be suitable for you, since you do not need to submit the form to server side. Using the <input type="image" type and defining the src attribute inside it, will be focusable and not require neither any JS code to run nor any difficult CSS. You can find more about it's syntax here
So, it ends up to you to decide which one of all them to use.
I would use the one that i find more flexible, easier for me to code, easily reusable and is supported by most of my target browsers.
Use jQuery as you own it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
#theBtn{
margin: 20% auto 0;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="theBtn"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#theBtn").click(function(){
if(confirm('Are you sure?')){
$("#theBtn").fadeOut('slow');
}
});
});
</script>
</body>
</html>
Inside a <button> tag , put your image, and attach an click event to <button> to open the dialog on click.
JSFiddle
First thing, There is either an image or a button. But not both.
I would say, create an image and place your code in the onclick() function of that image.
var img= $("#my-image-id");
image.click(function() {
// your code here
}
As I know You can't change the look of the Safari buttons thats why I suggest to use a for the solution. Here is my simple code: http://jsfiddle.net/djgBK/1/
The basis is:
Take an a element put the link content to the left,
Then replace it with image that is actualy it's background. Becouse it's a element user can select it usin only TAB button.
What's more using an a elemet will let You to put title which will be displayed after hovering/entering over the button.

Gist in blogger dynamic views

I want to embed my gists (gist.github) in my blogger blog. But as explained in this question dynamic views directly don't support javascript.
From the moski's(as mentioned in the answer) blog its possible to embed a gist.
What if I want to only embed only one file of my gist?
For example:
<script src="https://gist.github.com/3975635.js?file=regcomp.c"></script>
Looking at moski's blog, his description and gist snippets (gistLoader.js and gistBlogger.js), I can suppose that to reach your goal you have to edit that code a little bit.
Currently, when you add
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
at the bottom of your posts, what this script does is looking for this other code you added into your blog
<div class="gistLoad" data-id="GistID" id="gist-GistID">Loading ....</div>
retrieves the data-id attribute, and injects the required code to load the script with src set to
'https://gist.github.com/' + id + '.js'
Now, if I correctly figured out what the code does, editing the second moski's HTML code in this way:
<div class="gistLoad" data-id="GistID" data-file="GistFile" id="gist-GistID">Loading ....</div>
and the function in moski's gistBlogger.js in order to retrieve (when defined) the new data-file attribute, you can generate a new src to inject, like that:
'https://gist.github.com/' + id + '.js?file=' + file
It should works.

Categories