Integración sencilla de tweets de Twitter en página web html

Diciembre 22, 2011 in twitter | No comments

¿Cómo insertar actualizaciones de twitter en una página web?

Fácil, solo basta conocer html y css básico.

1. Copiar este código:

<ul id=”twitter_update_list”>
</ul>
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/USER.json?callback=twitterCallback2&count=5″ ?></script>

Los scripts js se encargan de insertar dentro de las etiquetas <ul> a los listados <li> para generar la cantidad de tweets que queremos (especificado en &count=5 , se mostrarán 5 tweets. )

2. Pegarlo dentro del código html de la pagina web.
3. Con algo de css aplicado al id=”twitter_update_list” le damos colores y ubicación.

Suficiente para mostrar nuestros tweets en cualquier parte de nuestra página web.

Problemas con imagenes PNG y opacity en IE8

Noviembre 17, 2011 in Internet Explorer | No comments

Sucede en IE8 y es que ante un cambio de opacidad en objetos tipo imagen png (no jpg) no se muestra tal como queremos sino como Ie 8 quiere.

Dicho de otro modo, cuando le ordenamos a IE8 por script cambiar de opacidad una imagen png con transparencia, lo que hace es crear un fondo negro o de otro color en la zona con transparencia.

Solución rápida, cambie su imagen a jpg (en mi caso fue un fondo blanco asi que no hubo problemas) o siga ls instrucciones de estos tigres en este link http://doctype.com/make-transparent-png-fade-out-ie8-jquery

Nota: Sucede en IE8, los demás navegadores  lo hacen bien ummm o ¿será que IE8 esta bien y los demás browsers equivocados?… ummm…

Tags: , , , ,

Cómo insertar un video de Youtube en una página de Facebook

Noviembre 10, 2011 in Facebook | No comments

Hay un código interesante que lo hace:

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='520' height='318' />

Vamos con la explicación.

swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”
Permite darle color al recuadro que contiene el video.

swfsrc=’http://www.youtube.com/v/xxxxxxxxxx’
Aquí va la URL del video de youtube (enlace largo, no el corto), donde xxxxxxxxxx es un codigo autogenerado y único para cada video.

imgsrc=’http://img.youtube.com/vi/xxxxxxxxxx/2.jpg’ width=’520′ height=’318′
URL de imagen extraída de youtube y medidas. donde xxxxxxxxxx es el mismo código anterior, width y height son ancho y alto respectivamente.
Tener en cuenta que http://img.youtube.com/vi/xxxxxxxxxx/2.jpg puede ser una imagen de cualquier servidor/host. Respecto a las dimensiones, tratar que ean proporcionales al video, así se evita distorsiones del tamaño real.

¿Fácil verdad?