How to build a widget for my website

Question

Hey guys

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.

Answer 2

There are lots of way you can do this. andreas's example is nice. It'a also possible to expose the data you want in some format like JSON or XML and then make the 'widget' a little Javascript include that will render this according to some preferences. A (somewhat) simple example you can get started off with is the twitter search widget.

Good luck!

Answer 3

For example, you want to display website status that is stored on your website as widget at your partner website.

Here's a simple HOW TO:

1.Create widget script on your site, let's say: http://yourwebsite.com/widget1.php?data=value&date2=value2

2.On that script, fill it with something like:

<?php
$data=get_xss_free($_GET['data']);
$data2=get_xss_free($_GET['data2']);
//do your process here
//then, display it:
echo "<div>This is my widget data!</div>";
?>

3.Tell your partner to embed it like this:

<iframe src="http://yourwebsite.com/widget1.php?data=value&amp;date2=value2"&gt;&lt;/iframe&gt;

Answer 4

Maybe you could look at using the PHP GD library to dynamically create an image. That way you users would only have to include an image tag like so on their on websites:

<img src="http://www.yourwebsite.com/widget.php?user={USERNAME}" width="500" height="250" alt="Your Widget" />

Then in your widget.php file you have all your database logic etc. which uses this data and renders an image. Facebook uses a similar approach to this called "Profile badges" and are accessible in similar way: http://www.facebook.com/badge.php?id={ID}&format=png&params={OTHERPARAMS}

But please note that dynamically creating an image is probably not the easiest way to approach this and the iframe solution already posted looks quite good and will definitely be easier to create.