Cómo crear un widget para mi sitio web

Question

soy muy nuevo en toda la programación - hasta ahora sólo tengo experiencia con construcción de sitios web, bases de datos, etc.

Actualmente tengo un sitio web donde los usuarios pueden compartir sus compras en línea .

Quiero construir un widget que otros sitios web puedan integrar en su sitio. El widget mostrará las compras recientes ingresadas en mi sitio web y los usuarios deberían poder insertar sus compras directamente a través de este widget sin tener que ingresar a mi sitio web.

Mi sitio web está basado en PHP usando Zend Framework y usa el back-end Mysql.

Algunos de los sitios web con los que estoy de acuerdo acordaron agregar el widget si no es ofensivo y si lo único que tienen que hacer es insertar 4 líneas de código javascript en sus páginas. Supongo que esto debería funcionar de manera similar al código de Google Adsense, donde ingresas el código de google googles y los anuncios comienzan a mostrarse.

Esa es la idea pero no tengo ni idea de cómo hacerlo - ¿alguien puede indicarme la dirección correcta? Cualquier ejemplo o tutorial sobre cómo hacer esto.

Ejemplo de código de Google Adsense

 
<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> 

¿Es esta una forma de widget de así - ¿Cómo está siendo utilizado Javascript aquí? Gracias

Answer 1

No soy un experto en el campo de widgets pero una 'dirección' es usar un iframe que se genera dinámicamente en la página que alojará el widget.

Ese es su código JS escribirá algo como:

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

El iframe suelen incluirse en el marcado (HTML) que se encarga de la presentación del widget en la página de alojamiento. Su archivo javascript puede contener controladores (vinculados a eventos en su widget, etc.).

El objetivo de iframe puede ser un script .php (u otro) que generará el html o cualquier otra cosa DESDE su sitio web. El resultado puede contener información/datos de su base de datos (Mysql como usted dice) y realizar cualquier operación sobre esos datos.

Es un enfoque (el iframe) utilizado en varios casos. Asegúrese de estar familiarizado con la ventana de términos, padre en javascript antes de escribir código JS en casos donde están involucrados iframes y frames (generalmente cómo manejar casos donde una página contiene marcos que a su vez pueden contener otros marcos, etc.)

Espero que esto te ayude a comenzar dándote una idea/enfoque general sobre este tema.

Estoy seguro de que ha oído hablar de los anuncios de Google. La forma de incluir anuncios de Google en una página web se explica claramente en las páginas de anuncios de Google. Sólo tiene que añadir un guión y un código que a su vez produce el código HTML siguiente:

<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> 

El contenido de este marco son los anuncios reales (los enlaces publicitarios que aparecen en la página).

La etiqueta iframe no es la única generada a partir de los anuncios de google javascript en la página. También se crean otras etiquetas (html) que manejan problemas relacionados con la presentación.

Answer 2

Hay muchas formas de hacerlo. El ejemplo de Andreas es agradable. También es posible exponer los datos que desee en algún formato como JSON o XML y luego hacer que el "widget" incluya un poco de Javascript que lo renderice según algunas preferencias. Un ejemplo (algo) simple con el que puede comenzar es el twitter search widget.

¡Buena suerte!

Answer 3

Por ejemplo, desea mostrar el estado del sitio web que está almacenado en su sitio web como widget en su sitio web asociado.

Aquí es un simple Cómo:

1.Create guión widget en su sitio, digamos: http://yourwebsite.com/widget1.php?data=value&date2=value2

2.En ese guión, llenarlo con algo como:

<?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. Dígale a su compañero que lo incruste así:

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

Answer 4

Quizás usted coul Observe el uso de PHP GD library para crear dinámicamente una imagen. De esa manera usted los usuarios sólo tendría que incluir una etiqueta de imagen al igual que en sus sitios web en:

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

A continuación, en el archivo de widget.php que tiene toda la lógica de la base de datos, etc., que utiliza estos datos y hace una imagen. Facebook utiliza un enfoque similar a este llamado "perfil insignias" y son accesibles de forma similar: http://www.facebook.com/badge.php?id= {ID}&format=png&params={OTHERPARAMS}

Pero tenga en cuenta que la creación dinámica de una imagen no es probablemente la forma más fácil de acercarse a este y la solución iframe ya publicado se ve bastante bien y definitivamente será más fácil de crear.