He incluido varios widgets en mi sitio web personal. Voy a ir brevemente a través de algunos ejemplos:
Facebook Comentarios
// Facebook comments
<fb:comments xid="12345678" numposts="3" width="380"></fb:comments>
// Facebook initialization
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '123456789123456789', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
- Personalmente no me gusta el uso de etiquetas XML personalizado.
- Un enfoque bastante exagerado. Quizás sea útil si proporciona más funcionalidades que solo un widget simple.
Twitter
// Twitter tweets
<div id="tweets-container"></div>
<script>
new TWTR.Widget({
profile: true,
id: 'tweets-container',
loop: false,
width: 250,
height: 200,
theme: {
shell: {
background: 'transparent',
color: '#3082af'
},
tweets: {
background: 'transparent',
color: '#444444',
links: '#1985b5'
}
}
}).render().setProfile('TwitterUsername').start();
</script>
- limpia y ordenada Javascript.
Google chat de respuesta insignia
// Google Chatback badge
<iframe src="http://www.google.com/talk/service/badge/Show?tk=z01q6amlq6ob76db19rdnikg1pbce3ff3ln9076tc8unrn37r3gmje9pf3gvl80num7ta10tv34ou7has2u2th5btn3uoouvpcufnqolc1mj77nmgld5mm3qf3reqkd3jqcvemqlpr8b04pf0qaf7osm10lo6kioji176dpcn&w=200&h=60" allowtransparency="true" width="200" frameborder="0" height="60"></iframe>
Google Calendar
// Google calendar widget
<iframe src="http://www.google.com/calendar/embed?showTitle=0&showCalendars=0&showTz=0&mode=WEEK&wkst=2&hl=en&src=nicohome%40gmail.com&color=%232952A3&ctz=Europe%2FHelsinki" style=" border-width:0 " width="557" height="445" frameborder="0" scrolling="no"></iframe>
deliciosas Marcadores
// Delicious bookmarks
<script type="text/javascript" src="http://feeds.delicious.com/v2/js/Nicodemuz?title=My%20latest%20bookmarks&icon=s&count=10&bullet=%C2%BB&sort=date&name&showadd"></script>
Resumen
- Como podemos ver, JavaScript y marcos flotantes se utilizan mucho en la industria.
- Si necesita procesar contenido en más de un lugar, use javascript, ya que un iframe solo se puede representar en un solo lugar.
- Si su widget no requiere javascript para funcionar, entonces ir con un iframe puede ser más adecuado, ya que su widget también funcionaría en los navegadores con JavaScript desactivado.
La pregunta es demasiado vaga (léase: no es una pregunta real). El elemento 'iframe' y ECMAScript/JavaScript no se solapan en gran medida. –
La pregunta es: ¿cuáles son algunas de las mejores prácticas para implementar un widget? – Genadinik
No es vago, el autor es muy claro sobre el propósito (un widget incrustable). Esto es StackOverflow en su peor momento. –