loading
In this instructable i'm going to show you how to "test drive" widgets for your websites or where ever you put them WITHOUT downloading any software. (below is the image that the sample widget will open up for editing.)

Step 1: Getting the Code

Most widgets that are meant to be embedded will supply you with code to embed them, but if you don't have access to a widget with code, or you're just too lazy to find one here's some code you can use.


<!-- Load Feather code -->
<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>

<!-- Instantiate Feather -->
<script type="text/javascript">
        var featherEditor = new Aviary.Feather({
            apiKey: '',
            apiVersion: 2,
            tools: 'all',
            appendTo: '',
            onSave: function(imageID, newURL) {
                var img = document.getElementById(imageID);
<!-- Load Feather code -->
<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>

<!-- Instantiate Feather -->
<script type="text/javascript">
        var featherEditor = new Aviary.Feather({
            apiKey: '',
            apiVersion: 2,
            tools: 'all',
            appendTo: '',
            onSave: function(imageID, newURL) {
                var img = document.getElementById(imageID);
                img.src = newURL;
            }
        });

        function launchEditor(id, src) {
            featherEditor.launch({
                image: id,
                url: src
            });
            return false;
        }
</script>

<div id="injection_site"></div>

<img id="image1" src="http://images.aviary.com/imagesv5/feather_default.jpg"/>

<!-- Add an edit button, passing the HTML id of the image and the public URL ot the image -->
<p><input type="image" src="http://advanced.aviary.com/images/feather/edit-photo.png" value="Edit photo" onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" /></p>


Now all you need to do is copy and paste your code to a note pad. (Above)

Step 2: Saving As...

Now you need to save the file to your desk top!

on the top right corner of the note pad you will see the word  "File"  click it. a drop down menu will appear. Click "Save As". DO NOT click on "Save" or you'll have to go through a lot to open the file. Next you'll need to find desktop in a popup, change the file name to

sample.html 

Step 3: Opening the File

Now we have to open the file. to fing the file look for an icon of your default internet access program with the file name "sample"


That's it your all done!

Enjoy your download free widget tester!



About This Instructable

1,444views

0favorites

License:

More by remo2:How to test custom widgets without downloading software! 
Add instructable to: