How to create a widget for my site

Question

I am very new to all programming - so far I have experience in creating sites, databases, etc.

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

I want to create a widget that other sites can integrate into their site. The widget will show recent purchases entered on my website, and users should be able to embed their purchases directly through this widget without having to go to my website.

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

Some of the sites I speak on have agreed to add a widget if it is unobtrusive, and if all they need to do is insert 4 lines of javascript code into their pages. I assume that this should work like Google adsense code in which you enter googles JavaScript code and display ads.

This is an idea, but I have no idea how to do this - can anyone point me in the right direction. Any examples or tutorials on how to do this.

Google Adsense Sample 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 also a widget form. How is javascript used here? Thanks

Answer 1

I am not an expert in the widget field, but the "direction" is the use of an iframe, which is dynamically generated on the page on which the widget will be placed.

This is your JS code will write something like:

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

An IFrame is usually contained in markup (html), which takes care of the presentation of the widget on the hosting page. Your javascript file may contain handlers (tied to events on your widget, etc.).

The iframe target could be a .php (or other) script that will output html or anything else from your site. The output can contain information / data from your database (Mysql, as you say), and perform any operations with this data.

This is the iframe approach used in several cases. Make sure that you are familiar with the javascript term window before writing JS code in cases where iframes and frames are involved (usually how to handle cases where the page contains frames, which in turn may contain other frames and etc.)

Hope this helps you get started by providing you with a general idea / approach on this topic.

I'm sure you heard about google ads. The way Google ads are included in a web page is clearly explained on Google ad pages. You just add a script and some code, which in turn creates 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 content of this frame is the actual ads (links to the page that you see on the page).

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

Answer 2

For example, you want to display the status of a website that is stored on your website as a widget on your partner’s website.

Here's just HOW:

1. Create a script widget on your website, 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. Name your partner to insert it like this:

 <iframe src="http://yourwebsite.com/widget1.php?data=value&date2=value2"></iframe> 

Answer 3

There are many ways you can do this. An example andreas is good. You can also set the necessary data in some format, such as JSON or XML, and then make the "widget" a small Javascript that will display this in accordance with some preferences. A (somewhat) simple example that you can start working with is the twitter search widget .

Good luck

Answer 4

Perhaps you can see how to use dynamic visualization using the PHP GD library . Therefore, you should only include image tags, for example, on your sites:

 <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 displays the image. Facebook uses a similar approach to the name "Profile Icons" and is available in a similar way: http://www.facebook.com/badge.php?id= {ID}&format=png¶ms={OTHERPARAMS}

But note that dynamic image creation is probably not the easiest way to get close to this, and the already published iframe solution looks good and will certainly be easier to create.