Colocar elemento suscibirse via email al feed de una web en pagina Facebook

Si nuestra pagina Facebook esta relacionada con una web podemos colocar, a través de fbml, el cuadro para suscribirse via email.

Se los explicare con feedburner; En nuestro panel veremos esto:

Haremos clic en Publicize, luego en Email suscriptor , elegimos blogger en las opciones debajo del código que nos proporcionara, el cual al colocarlo en nuestra pagina facebook funcionara perfectamente.
CODIGO EJEMPLO:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CosasParaElFace', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="CosasParaElFace" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Esto se vera así:

 

Se ve bastante simple, y es hasta donde otros les explicarían, pero vamos un poco mas allá y modifiquemoslo para que se vea mucho mejor.

Primero eliminemos estas partes que no son importante:

-style="border:1px solid #ccc;padding:3px;text-align:center;"

-style="width:140px"

-<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>

-Y tambien eliminaremos Enter your email address: , ya que lo sustituiremos por una imagen.

Agregaremos style y dos parametros class para dicho style, elemento y boton


El codigo quedaria asi:



<style>

.elemento {

background: transparent url(http://img62.xooimage.com/files/c/0/c/app_full_proxy-24ae911.png) no-repeat scroll ;

border: 0px none white !important;
height: 21px;
margin-right: 10px;
padding: 5px;
width: 265px;
}

.boton {

background: transparent url(http://img60.xooimage.com/files/5/e/2/suscribete-24b4c4d.png) no-repeat scroll ;
width:167px;
height: 33px;
text-indent:-9999px;
border:0;
}
</style>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CosasParaElFace', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><img src="http://img54.xooimage.com/files/c/0/6/ingresatuemailfacebook-24b4c0e.png" /></p>

<p ><input type="text" name="email" class="elemento" /></p><input type="hidden" value="CosasParaElFace" name="uri"/><input type="hidden" name="loc" value="es_ES" /><input type="submit" value="Subscribe" class="boton" /></form>

Y este sera el resultado:

Recuerda que si quieres que el style funcione en internet explorer debes hostearlo