Básico, Insertar Vídeos de YouTube

Talvez es el Widget mas usado en el mundo, y también uno de los mas fáciles de agregar.

Simplemente tienes que ir a YouTube buscar tu vídeo, una vez lo abras, debajo de la descripción y antes de los comentarios hay una barra en la cual esta el boton <insertar>, al dar Click se despliega en un asistente las opciones entre las cuales puedes cambiar los colores y el tamaño, una vez selecciones todo esto copia el Código y listo lo pegas en la parte que quieras del código Html de tu Pagina web o Blog.

Pruébalo:



Código:
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/u08UwhJh2Jw?fs=1&amp;hl=es_ES"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/u08UwhJh2Jw?fs=1&amp;hl=es_ES" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Importante:
Si eres Programador, el código puede servir sin la etiqueta Embed, y lo puedes volver Dinámico por ejemplo almacenando la URL del vídeo en una Base de datos y cambiando el Value del Object

Así de fácil insertas un vídeo en tu web, se usa mucho para vídeos institucionales como muestra de productos, manuales, etc, de este modo no tienes que subir el vídeo en tu servidor solo insertarlo desde el servidor de YouTube.

Leer más...

Me Gusta de Facebook!!!!

Hoy agregue a mi propio blog el Widget de Facebook en el cual puedes ver tus seguidores, esto es muy fácil de hacer.

Primero hay que tener en cuenta que tu perfil no puede tener seguidores (solo amigos) como tal podrías crear una insignia para que vean datos de tu perfil, pero no un botón de "Me Gusta", y a su vez para crear una pagina ya debes tener tu perfil. 

Entonces debes crear tu pagina en FB, para iniciar escribe en el Buscador de FB "Crear Nueva Página de Facebook", ingresas y te aparecen 2 opciones o crear una página de la comunidad, lo que quiere decir que eres Fan de algo o alguien y vas a dedicarle una pagina no oficial, y Pagina Oficial que es lo que su nombre lo indica,  por ejemplo en el caso de este blog seleccione:

Página oficial, Marca: Sitio Web, y el Nombre, por supuesto hay que aceptar que eres representante de la marca, por favor nunca creen páginas oficiales sin ser el creador, representante o dueño de la marca de la cual van a crear la página ya que es muy molesto para el usuario encontrarse con páginas supuestamente oficiales que no tienen información verídica.

Sigamos, Ahora al igual que el perfil, llena la información básica como: cargar la imagen, una que otra descripción, alguna entrada en el muro. Si te pierdes de tu página, la puedes encontrar en la barra superior en Cuenta, Administrar Páginas.

Ahora, cuando abras tu Página de Fb, te aparece el item "2 Promociona esta página en tu sitio web", antes de darle click a "Añadir un Recuadro Me gusta" copia la Url de tu pagina de Fb de la barra de Navegación de tu Explorador en mi caso: http://www.facebook.com/pages/W3-Tricks/151879691510678?ref=sgm, ahora, si presiona el botón, te aparecerá algo como esto:

Aquí Pegas en Facebook Page Url lo que copiaste de la barra de Navegación, en Width (Ancho) debes colocar lo que corresponda según donde vallas a ubicar el Objeto como lo voy a ubicar en la Barra Lateral coloque el valor de 200 y solo 6 conexiones, que son los Seguidores de Tu Página, el Stream son las Actualizaciones de estado de tu Página en Fb si deseas que aparezca actívalo, yo lo desactive, al igual que Header que es el Titulo o Encabezado, una vez termines de escoger tus opciones presiona "Get Code" y Copia lo que aparece en iFrame.

Código:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FW3-Tricks%2F151879691510678%3Fref%3Dsgm%26v%3Dpage_getting_started&amp;width=200&amp;connections=6&amp;stream=false&amp;header=false&amp;height=255" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:255px;" allowTransparency="true"></iframe>

Y listo de aquí en adelante úsalo como cualquier otro Widget o Gadget, Pegas el código de iFrame donde quieras en tu Html o si es un Blog agrégalo mediante la opción de Html/Javascript (en el caso de tener blog también según tu proveedor puedes agregarlo con un asistente prediseñado para agregar el "Me Gusta de Facebook", lo hice manualmente ya que de todos modos no es muy difícil y te sirve para cualquier web)

Vea También: Botón Me Gusta de Facebook

Leer más...

Tic Tac Toe!!!! (también Triqui o Gato)

Hoy e querido traerles un widget para su blog o web muy divertido, se trata del viejo conocido juego del Tic Tac Toe, Triqui, Gato, OX o como lo llamen es un juego divertido para perder tiempo, traído a uds gracias al muy conocido Neave.

Pruébalo:

Tic-Tac-Toe made by Neave Games

Código:
<embed src="http://www.neave.com/games/get_game.php?swf=tictactoe" name="neaveTicTacToe" width="320" height="420" quality="high" pluginspage="http://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" allowscriptaccess="always"></embed><p><a href="http://www.neave.com/games/">Tic-Tac-Toe made by Neave Games</a></p>

Agrégalo a tu web o blog y todos tus seguidores gritaran cuando ganen una partida :D

Leer más...

Convertir un TextArea en un completo editor de Texto Enriquecido

Si tienes una pagina web un poco avanzada, sabrás lo útil que puede llegar a ser que un textarea de un formulario se convierta en un completo editor de texto para así almacenar la información con formato y esto es muy fácil de hacer gracias a NicEdit, mediante su código que puedes agregarlo de manera muy fácil muy parecido un gadget sin descargar ningún programa al servidor (aunque también te permite esta opción)

Pruébalo: 

Hola, Esta es una prueba (puede tardar unos segundos)

Código:

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>

<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

Este código lo puedes agregar en cualquier parte de tu pagina y convertirá todas las áreas de texto en unos minieditores con mucha calidad.

Ahora, si quieres que solo uno o algunos tengan esta opción y no todos, o si quieres configurar los botones mira este codigo:

<script src="http://js.nicedit.com/nicEdit-latest.js"
type="text/javascript"> </script>
<script type="text/javascript">bkLib.onDomLoaded(function() { new
nicEditor().panelInstance('texcontenido'); });
</script>

1.-En donde panelInstance contiene el nombre de tu textarea

2.-En el parentesis de new niceditor puedes poner el listado de botones que quieres que aparezcan por ejemplo: 

new niceditor({buttonList : ['fontSize', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'html', 'image']}).panelInstance('texcontenido')

Y listo tienes tu editor de texto personalizable para tu pagina web en menos de 5 minutos.

ACTUALIZACIÓN:

Mi error, lo siento con todos los programadores que se guiaron en este post, se me olvidaba darles el comando que le deben dar por JavaScript antes de guardar en la base de datos o para cualquier fin, deben hacer una función,

por ejemplo:

 function Ok()
{ nicEditors.findEditor('textarea').saveContent(); }

después de correrla toman el valor del parámetro, como cualquier otro campo que se envía por el Post o el Get de un formulario.

ACTUALIZACIÓN II


Debí explicarme un poco más: antes de enviar los datos, para ser guardados con formato, deben cargar el TextArea justo antes de hacer el "Submit" del formulario:

<script src="http://js.nicedit.com/nicEdit-latest.js"
type="text/javascript"> </script>
<script type="text/javascript">bkLib.onDomLoaded(function() { new
nicEditor().panelInstance('textarea1'); });
</script>
.
.
.
<script languaje="javascript">
function Ok()
{
nicEditors.findEditor('textarea1').saveContent();
document.formname.submit();
}
</script>
.
.
.
<form name="formname" action="pagqueguarda.php">
<textarea name="textarea1"> </textarea>
<input type="button" onClick = "Ok();">
</form>

Saludos,

Leer más...

Radio Online

Si, tu puedes agregar a tu web una emisora online muy fácilmente gracias a Shoutcast, un recurso que es gratis y tiene cerca de 40.000 emisoras para ti, aquí unas de mis radios favoritas:

Pruébalo:


Código:
<embed src='http://www.shoutcast.com/shoutcast-cdn/flash/popupPlayer_V19.swf?stationid=http://yp.shoutcast.com/sbin/tunein-station.pls?id=3619&play_status=1' quality='high' bgcolor='#ffffff' width='398' height='104' name='popupPlayer_V19' align='middle' allowScriptAccess='always' allowFullScreen='true' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer' ></embed>

Pruébalo:


Codigo:
<embed src='http://www.shoutcast.com/shoutcast-cdn/flash/popupPlayer_V19.swf?stationid=http://yp.shoutcast.com/sbin/tunein-station.pls?id=110234&play_status=1' quality='high' bgcolor='#ffffff' width='398' height='104' name='popupPlayer_V19' align='middle' allowScriptAccess='always' allowFullScreen='true' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer' ></embed>

Si quieres otra emisora, es muy fácil ve a Shoutcast y ahi hay una lista interminable de emisoras de las cuales puedes filtrar por genero, una vez selecciones la que deseas agregar a tu pagina das al botón de Play y sale un Popup o ventana emergente y simplemente das click al botón "COPY EMBED CODE" y copias el código. 

Importante!! en el código hay una propiedad play_status=1 esto quiere decir que suena automáticamente se abra la pagina pero si no lo quieres asi y que los usuarios den click para que suene solo lo debes cambiar a play_status=0 y hecho.

El código se puede agregar muy fácilmente en el HTML de tu pagina o si tienes un blog busca el botón de edición Html o en la sección de Diseño busca Complementos (También puede llamarse Gadgets o Widgets segun tu proveedor) y ahí busca el que diga código Html o Javascript.

Espero poder hacer mi propia emisora y ya publicare el Código para que la escuchen :), También Obviamente les explicare como se hace una emisora online con Winamp Shoutcast. 

Leer más...