¿Cómo creo un widget incrustable en rieles? La tecnología cambia la vida futura

En algún momento tiene que permitir widgets o insignias integrables con su aplicación. Al igual que Youtube le permite incrustar videos o muchos sitios de redes sociales permiten incrustar insignias o botones con información dinámica sobre ellos.

Los widgets integrables se pueden construir utilizando Flash o Javascript. Aquí crearemos un widget Javascript incrustable y demostraremos cómo hacerlo en Rails.

Digamos que estamos desarrollando un proyecto que le permite mantener una base de datos de dinosaurios. Puedes crear perfiles para varios dinosaurios con su nombre, descripción y otros detalles. Ahora, será genial si permites que tus usuarios incrusten su dinosaurio favorito en su blog. Podrían agregar un pequeño script como este en su blog donde quieran que aparezca el widget:

Le mostraremos cómo construir un widget de este tipo en su proyecto Rails.

En primer lugar, comencemos un nuevo proyecto de rieles. Debería tener dinosaurios con algunos datos de perfil, imágenes y cualquier otra cosa que desee:

$ rails new dino_app

$ cd dino_app

$ rake db:create

$ rails server

$ rails generate scaffold dianosaur name:string genus:string

description:text period:string

$ rake db:migrate

Abra /dianosaurs en su navegador y agregue algunos de sus dianos favoritos.

A continuación, crearemos un script de incrustación para que los usuarios puedan incrustar cualquier información de dinosaurio en su sitio. Hay dos formas de implementarlo. Una es inyectar su contenido HTML directamente en el sitio y la otra es usar un iframe. Puede usar cualquiera de los dos según sus necesidades. Describimos ambas técnicas a continuación:

Cargar contenido html en línea

# File: app/controller/dianosaurs_controller.rb

def show

@dianosaur = Dianosaur.find(params[:id])

end

Archivo: show.js.erb document.write (““ embed ”,: locals => {: dianosaur => @dianosaur})). Html_safe)%>”);
Archivo: _embed.html.erb
Este archivo contiene cualquier CSS, JS y HTML que desee incrustar
recuerde que no hay diseño ya que está incrustando en un tercero
sitio y el CSS necesita ser escrito cuidadosamente

El CSS debe escribirse de tal manera que el CSS del sitio de destino no interfiera con él y cambie el aspecto. Las técnicas comunes para eso son usar una etiqueta importante o escribir estilo para todos y cada uno de los elementos, ya que no puede dejar que nada se vea influenciado por el estilo de los padres (en este caso, no desea que la hoja de estilo caiga en cascada). Ahora puede incrustar el widget de diano en un sitio diferente utilizando el siguiente script:

Aquí hay algunos consejos para usos más avanzados:

Si desea incluir jQuery en la página de terceros. Puede agregar esto a la parte superior de show.js.erb

if(typeof(jQuery) == 'undefined'){

document.write("<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery

/1.4/jquery.min.js'>"); }

Separe CSS y JS en un archivo separado en lugar de alinearlos. Agregue lo siguiente en la parte superior de _embed.html.erb

<link rel="stylesheet" type="text/css" href="<%=

File.join(root_url, 'stylesheets', 'diano_widget.css') %>"/>

<script src="<%= File.join(root_url, 'javascripts',

'diano_widget.js') %>" type="text/javascript">

Inserte un iframe en el sitio de destino, que puede cargar el contenido automáticamente

# File: show.js.erb

document.write("<%= escape_javascript(content_tag(:iframe,

' ', :src => widget_dianosour_url(@dianosaur))).html_safe)

%>");

1. Archivo: routes.rb

recursos: los dinosaurios hacen

miembro hacer

get: widget

fin

1. Archivo: dianosours_controller.rb

widget de definición

@dianosaur = Dianosaur.find (parámetros [: id])

fin

1. Archivo: widget.html.erb

< % = @ dianosaur.name >

< = @ dianosaur.genus%>

Hay ciertas ventajas de usar un iframe: Ninguno de los javascript o css interferirá con el sitio web de destino. No hay problema de dominio cruzado de javascript. Puede realizar llamadas ajax a su aplicación para actualizar periódicamente el contenido. Además, aquí hay algunas desventajas: El ancho y la altura del iframe deben ser fijos. No se puede ajustar automáticamente según el contenido del iframe. Para cargar el contenido del widget, el navegador debe realizar al menos dos solicitudes a la aplicación. Una solicitud para cargar show.js.erb con la etiqueta iframe y otra solicitud para cargar contenido de iframe desde la URL especificada en el atributo src del iframe. Referencias http://www.eduvoyage.com/2008/8/… http://www.igvita.com/2007/06/05… http://emphaticsolutions.com/201… http://drnicwilliams.com/2006/11…