How to build a widget for my website

Question

I'm very new to the whole programming - so far I only have experience with building websites, database etc.

I currently have a website where users can share their online purchases.

I want to build a widget that other websites can integrate on their site. The widget will show the recent purchases entered on my website and Users should be able to insert their purchases directly through this widget without having to come to my website.

My website is built on PHP using Zend Framework and uses Mysql backend.

Some of the websites I'm speaking to have agreed to add the widget if its non-obtrusive and if all they have to do is insert 4 lines of javascript code in their pages. I'm assuming this should work something like Google adsense code where you enter the googles javascript code and the ads start showing.

Thats the idea but I have no idea how to go about it - can anyone point me in the right direction. Any examples or tutorials on how to do this.

Example of Google Adsense Code

<script type='text/javascript'> --></script><script type="text/javascript"><!--
google_ad_client = "pub-06xxxx453614";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text";
google_ad_channel = "3407467430";
google_color_border = "38B63C";
google_color_bg = "FFFFFF";
google_color_link = "0066CC";
google_color_text = "000000";
google_color_url = "0066CC";
google_ui_features = "rc:0";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Is this a form of widget as well - How is Javascript being used here? Thanks

Answer 1

I am no expert in the widget field but a 'direction' is to use an iframe that is generated dynamically in the page that will host the widget.

That is your JS code will write something like:

<iframe src="http://www.mywebsite.com/services/widget.php" {other attributes here} />

The iframe is usually contained in markup (html) that takes care of the presentation of the widget in the hosting page. Your javascript file can contain handlers (binded to events on your widget, etc).

The target of iframe can be a .php (or other) script that will output the html or anything else FROM your website. The output can contain information/data from your Database (Mysql as you say) and perform any operations on that data.

It's a an approach (the iframe) used in several cases. Make sure you are familiar with the terms window, parent in javascript before writing JS code in cases where iframes and frames are involved (generally how to handle cases where a page contains frames that in turn can contain other frames, etc)

Hope this can get you started by giving you a general idea/approach on this topic.

I am sure you have heard of google ads. The way to include google ads in a web page is clearly explained on the google ads pages. You simply add a script and some code which in turn produces the following html:

<iframe allowtransparency="true" frameborder="0" height="100" hspace="0" id="google_ads_frame1" marginheight="0" marginwidth="0" name="google_ads_frame" scrolling="no" src="http://googleads.g.doubleclick.net/pagead/ads?client="{PARAMS}" style="left:0;position:absolute;top:0" vspace="0" width="900"></iframe>

The contents of this frame are the actual ads (the ad links you see on the page).

The iframe tag is not the only one generated from the google ads javascript on the page. Other tags (html) are also created that handle presentation related issues.