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

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.

Answers


The simplest form would be to provide a hyperlink:

<a href="http://mysite.com/dosomething" title="DoSomething">Do Something</a>

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:

<a href="http://yoursite.com">Blah</a>

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, ...


Need Your Help

A way to strip returned values from java.io.File.listFiles in Clojure

java file clojure lisp io

I call a java function in Clojure to get a list of files.

PHP MySQL table to CSV with column names

php mysql arrays csv

I have the following php function that ouputs a table to a CSV file. I also need the column names in the first row. It works however it has a column with the name, then an identical column but inst...