Widget -what to do and what not

Question

I would like to make a html/js widget that people can add to their blogs, sites etc.

I have never made widgets before so I would like to hear what should be done and what not. For example, how do I make the styling? Inline, own css file or what is the best practise? I believe i cant use head and body stuff in it. What about h1, h2 etc? Do they screw the website that has the widget or can i use them?

If you have any good tips I would like to hear those.

Thanks.

Answer 1

If it includes a JS file, you can do anything. But you obviously don't want to mess up the website's styling. So all of your css should use class and/or id selectors.

Answer 2

I would try to:

1. Make it configurable

   • Load external stylesheets?
   • Where do I find resources I need? (images, stylesheets)
   • What layout/size should I have?

   By doing this you let the user decide if he wants your widget to automatically load the stylesheet, or if he wants to host it himself. If he does, he can also update the styles to better fit the page the widget resides on.

2. Provide a wizard for generating a snippet of code to include on the page
   • Ensures that even moderately technical users can utilize your widget
3. Make it light-weight
   • Serve everything minified and compressed
   • Serve with cache-headers, e-tags, last-modified and all other useful headers you can think of. This will both reduce the load on your servers as well as make your widget more responsive.
   • Try to avoid dependencies on libraries, or check if they are loaded on the page where the widget is used before loading them
4. Be wary of conflicts
   • Prototype uses $, and so does jQuery. If your widget depends on Prototype, and the page it is hosted on uses jQuery without noConflict-mode, problems WILL arise
   • Do not clobber the global namespace!
     • If you don't want anyone to interact with your widget, put it in a self-executing function in a closure and don't create any global variables at all
     • If you want users to be able to interact with your widget, say for adding event listeners and such, claim a single global variable, let's say ExampleComWidget as an object literal and put your methods there. User's could then interact like: ExampleComWidget.addListener('update', callback);

5. Use clever markup

   • Be sure to use scoping on your classes and ids, to avoid conflicts as much as possible

     I.e. if your company's name is example.com, you could use classes like: com-ex-widget-newsItem

   • Validate your markup! You do not want to break a user's site
   • Semantic markup is fine, but you might want to avoid <h1>-tags, since they have especially high ranking in SEO. You could probably get by with using <h4> and less. This bullet might be a bit off. When in doubt, it's much better to use semantic markup than not.

Answer 3

I have question too:

How can I share this kind of widget? Javascript, iframe or what way is good?

Now I have html page, css file and js file. I want to share this widget with people.