Reproductor de radios gratuito para nuestra pagina web o blog.
Buenas a todos los taringueros, en esta ocacion les traigo algo que me parece sera de gran ayuda a todos los que quieran darle un toke especial a sus paginas web.
Como algunos sabran, anteriormente escribí un articulo sobre un sitio llamado RadioBeta, puesta esta vez es otro relacionado con el mismo sitio, solo que es mas especifico.
La idea es simple, supongamos que queremos mostrar nuestra radio favorito en un blog o pagina X, con todo lo que sea relacionado con esa radio, pues no hay mas que seguir estos pasos.
1- Entramos a
2- Nos registramos (ojo, si ponemos mal el e-mail cagamos, tenemos que volvernos a registrar)
3- Una vez que nos registramos, nos aparece la pantalla de "sitios", hay un link que dice "+ Agregar un sitio nuevo", hacemos click ahi.
4- Nos cargo una pantalla donde nos presenta un formulario, asi que vamos a completar los datos:
* Nombre del website: aca ponemos el nombre de nuestro sitio o blog.
* URL: aca va la direccion url de nuestro sitio o blog. Va si o si con http:// , no se olviden de ponerlo.
* Pais: elejimos a que pais va apuntado nuestro sitio o blog
* Ad html code: este campo es para poner el codigo que nos devuelve por ejemplo Adsense. Es para que la publicidad que muestra el reproductor sea nuestra y nos permita ganar dinero.
* Analytics html code: esto es para poner el codigo de analytics, de esa forma podremos ver en nuestras estadisticas el uso que le han dado al reproductor.
* Logo: simple, el logo del website o blog donde vamos a poner el reproductor de radios .
* Cuenta de twitter del website: aca ponemos la cuenta de twitter de nuestra pagina web o blog (sin la arroba @)
* Fanpage de website: aca va la url de facebook con nuestra fanpage. Ojo, tiene que estar la url completa, ej:http://fanpage.com/pages/xxxxxxx
Bueno, le damos al boton aceptar y ya tendremos nuestro website cargado.
Una vez cargado el website, ahora tenemos que configurar nuestro reproductor, para eso veremos una serie de iconos:
El primer icono (el lapiz) edita la informacion de nuestro website o blog (el nombre, logo, etc).
El segundo icono (la rueda dentada) es para configurar nuestro website, ahi es donde hacemos click.
Vemos una pantalla de 2 secciones. Explico uno x uno que es cada campo.
Configurar ancho y alto
Width: es el ancho del reproductor. Por defecto el valor minimo es de 701 pixeles, pero ojo, si nosotros queremos tener el reproducto "sintonizado" en una radio en particular este valor es ignorado.
Height: es el alto del reproducto de radios, idem que lo anterior.
Playlist
A ver, como explico esto. Basicamente es para asociar un usuario de radiobeta.com al reproductor. Si lo asociados, todas las radios que tenga ese usuario en sus "favoritos" seran las que el reproducto tendra disponible para reproducir.
Advanced
Show headers?: esto nos pregunta si queres que arriba del reproductor aparesca o no el logo de nuestro website. Si marcamos el reproductor de radios con una radio prefijada este valor se omite. Yo recomiendo dejarlo siempre desactivado.
Only mp3 streams stations?: Nunca entendi bien que es, pero yo lo dejo siempre desmarcado.
Default product?: Aca tiene que estar seleccionado Widget for Webmasters
Radio ID for autoplay: este es el campo que mas nos importa. Lo que nos esta preguntado ahi es si tenemos el ID de una radio para reproducir como prefijada. Como conseguimos el ID? pues, aca van las instrucciones.
Conseguir el ID de una Radio.
Esto es muy simple, solo tenemos que ir a radiobeta.com , una vez dentro del website buscamos la radio que queres tener prefijada en el reproductor.
Entramos a la radio (carga el wall de esa radio).
En la izquierda veremos las opciones, donde la primer es "reproducir". Ese "reproducir" es un link, que tiene un numero.
Aca va la imagen
Si ponemos el puntero del mouse sobre el link de reproducir, veremos que el link (en el caso de metro) que se ve es como este: javascript:RadioBeta.detach(7960,'');
En caso de que no lo veamos, si le damos click a reproducir se levantara un popup, donde la url es como esta
http://radiobeta.com/jswidget/era3/?autoplay=7960
el numero que esta despues de autoplay= es el ID de nuestra radio.
Bueno, retomemos.
Una vez que completamos esos datos de la configuracion del website (incluyendo el id de la radio) solo tenemos que elegir que modelo de "color" queremos para nuestro reproductor.
Esto es importante, ya que si no seleccionamos un modelo no va a tomar todos los demas cambios.
Le damos click en Aceptar y listo!!!!.
Probando: 1, 2, 3... probando
Ahora vamos a chequear, volvemos a "Mis sitios" y vemos ahi nuestro sitio web o blog.
Veremos que la ultima opcion es una rueda dentada con un signo de play, le hacemos click.
Lo que se abre es nuestro reproductor de radios sintonizado en una radio X.
Les dejo uno que me arme con metro:
Ahora bien, que hacemos para ponerlo en nuestra web??
Ya ahi pasaria mas por ustedes, pero aca les dejo algunas sugerencias.
Implementarlo en una pagina nueva.
Podemos crear una pagina en nuestro sitio o blog, y lo agregamos como un iframe. De paso, arriba, a los costados y abajo le podemos poner lo que nosotros querramos.
Codigo html de iframe:
<iframe src="http://radiobeta.com/widgetwebmaster/?site_id=202"></iframe>
Implementarlo como un popup
Podemos poner un boton y que salte como popup, el codigo javascript seria
<script type="text/javascript">
function PopUp(){
var ScreenWidth=window.screen.width;
var ScreenHeight=window.screen.height;
var movefromedge=0;
placementx=(ScreenWidth/2)-((720)/2);
placementy=(ScreenHeight/2)-((700+50)/2);
var PopUpUrl="http://radiobeta.com/widgetwebmaster/?site_id=202";
WinPop=window.open(PopUpUrl,"","width=550,height=650,toolbar=0,location=0,directories=0,status=0,scrollbars=0,menubar=0,resizable=0,left="+placementx+",top="+placementy+",screenX="+placementx+",screenY="+placementy+","
;
}
</script>
<span onclick="PopUp()">Escuchar Metro</span>