Como instalar el Chat de Facebook en tu Blog con Tawea

El reciente cierre de Facebook Messenger para Windows ha dejado huérfanos a miles de usuarios. No sabemos el motivo por el cual Mark Zuckelberg ha cerrado dicho grifo. 

Será… ¿por la publicidad? ¿Tendrá tanto afán de dinero el CEO de Facebook, que es capaz de tratar de llevarse a sus usuarios a plataformas donde obtenga ingresos por publicidad y clausurar aquello que no le es rentable?

Lo único que nosotros sabemos es que mientras navegábamos por el inmenso océano que es la red, nos hemos tropezado con lo que podríamos llamar un sustituto del Facebook Messenger para Windows, Tawea. 

Tawea es un plugin que integra el chat de facebook en nuestro navegador y lo mantiene visible en todas las pestañas, aun cuando no tengamos abierta la red social. Así no tendras que estar abriendo la pagina de facebook para chatear con tus amigos, sino desde cualquier página… mientras estés leyendo la versión digital de un periódico o haciendo una compra por internet, podrás hablar con tus amigos.



Con Tawea puedes chatear no solo con tus amigos de facebook, sino también con los visitantes de la página web que también estén en ese mismo instante. Y es más, puedes compartir imágenes y videos simplemente arrastrándolos hasta el cuadro de chat, compartiéndolos con la persona que estés hablando o si quieres también puedes compartirlo en tu perfil de facebook y twitter. 

Su instalación  y configuración es muy simple. Solo tendremos que iniciar sesión con nuestra cuenta de facebook y dar permiso a la aplicación para que pueda acceder a la información de nuestro perfil como son la listas de amigos y los mensajes.

Aparte de la sencillez y limpieza del cuadro colocado en la parte inferior derecha de la pantalla, también otro punto fuerte de Tawea es la seguridad. Dicho plugin no se ejecutará en páginas sospechosas, ya que solo funciona para paginas seguras (HTTPS). Desde Tawea Technologies S.L. siempre han trabajado por la seguridad y privacidad de sus usuarios.



¿Y como puedes instalarte el chat de facebook?

Por un lado podemos obtener el plugin en Wordpress, Blogger, Joomla, Tumblr, Drupal o bien copiar el código que proporcionan en su pagina web Tawea e introducirlo en el código fuente de nuestra página web sí fuéramos unos websmasters y por ello ofrecer a los visitantes de dichas páginas una experiencia nueva, un valor añadido a tu pagina web o blog, tratando de crear comunidad y que pasen más tiempo los usuarios en tu pagina web.

--> Leer más...
Valorar Entrada : 

Barra flotante "Ultimas Entradas" con desplazamiento horizontal

Las barras flotantes son maneras impresionantes para mantener a sus lectores informados acerca de las recientes publicaciones en tu blog o promocionar alguna entrada o pagina en concreto.

Hoy os traigo una nueva forma de añadir sus ultimos posts con despalzamiento horizontal que se desplazará una vez con su página mientras se mueve hacia arriba o hacia abajo.


 Aqui puedes ver como funciona la barra flotante: Click aqui

Vamos a ver como agregar esta impresionante barra flotante con desplazamiento horizontal, que ademas viene con un botón de cancelación en caso de que a sus visitantes no les gusta o lo quieren eliminar. 

Aquí les dejo los pasos a seguir y el codigo para poder agregar las ultimas entradas en tu blog de una nueva y impresionante forma con despalzamiento horizontal:
  
Ir a Blogger> Diseño 

Añadir un gadget HTML / JavaScript
 

Pega el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script style="" src="https://ugwoke-charles-jsfiles.googlecode.com/svn/trunk/stickybar.js"></script><script src="https://ugwoke-charles-jsfiles.googlecode.com/svn/trunk/stickybar2.js"></script><style>#md-stickybar{background:#000000 url('http://1.bp.blogspot.com/-TAUA592d0XY/Ut21zR3_D8I/AAAAAAAAA-o/xoYyLFV7gNM/s1600/etstickybar.png') repeat-x;width:100%;margin:0 auto;text-align:center;padding:0px 0;top:0px;color:#F40045;border-bottom:2px solid #000;/*box-shadow*/-webkit-box-shadow:#666666 0px 1px 3px;-moz-box-shadow:#666666 0px 1px 3px;box-shadow:#666666 0px 1px 3px;z-index:999;display:none;height:28px;position:absolute;line-height:1.85em;vertical-align:baseline;letter-spacing:1px;}#md-stickybar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}#md-stickybar a:hover{text-decoration:underline;}#md-stickybar p{margin:0;list-style:none;}#md-stickybar img{vertical-align:middle;margin-right:6px;}#mdclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}</style><div id='md-stickybar'><script>var nMaxPosts = 15;var nWidth = 95;var nScrollDelay = 175;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";</script><script style="" src="http://www.urldetublog.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=15 " ></script><a href="#" id="mdclose" onclick="return false;"><img src="http://3.bp.blogspot.com/-G6e8JYBXc1c/Ut21zKC9ZOI/AAAAAAAAA-k/_2wSICnpIok/s1600/cancel.png"/></a></div id='md-stickybar'>

Tambien puedes optar por agregar la barra flotante a la parte lateral de su blog como barra lateral o en la parte superior de la página como la barra superior. De cualquier manera, sólo asegúrese de que no interfiere con el diseño del blog.

 Personalizar la Barra de la manera deseada:  

Cambiar Url: Para que la barra flotante muestra tus ultimas entradas hay que cambiar " http://www.urldetublog.blogspot.com" por el url de tu blog. 

Color de Fondo: Cambie o cambiar #000000 con el código de color a su gusto.

Color del enlace: También puedes cambiar el color de los enlaces (entradas) mediante la sustitución de #FFFFFF con su código de color deseado.

Cantidad de Mensajes: Por defecto, la barra está configurado para mostrar 15 entradas recientes. Puedes cambiar el número de entradas recientes para mostrar reemplazando el 15 con el número de mensajes recientes que desea.

Dirección de desplazamiento: Para cambiar la dirección de desplazamiento que se desplaza por defecto a la izquierda, en lugar de la izquierda en sDirection var = "left"; cambia con
"right".


Bueno, esto seria todo para hoy, si te encuentras con alguna problema en agregar la barra flotanta en tu blog, deja tu comentario y te ayudo a solucionarlo.

Si quieres recibir mas tutoriales y gadgets por correo electronico, suscribete gratis a nuestro blog, visita nuestra pagina de facebook o añade nuestro feed Rss.

--> Leer más...
Valorar Entrada : 

Aprende a Configurar tu Blog de Blogger para Moviles y Tablets

Puede que lo ideal para visualizar los blogs sea acceder desde los ordenadores, pero como es lógico, no siempre es así y en muchos momentos del día aprovechamos para entrar a esas páginas que tanto nos gustan y gracias a los avances tecnológicos podemos hacerlo en cualquier lugar. Los dispositivos móviles como los teléfonos o las Tablets lo han hecho posible, y es algo realmente positivo para nosotros, eso sí, el diseño debe ser el apropiado.


Debido a las diferencias de tamaño y configuración, no es lo mismo acceder a un blog desde un ordenador que desde una Tablet, por este motivo es interesante que consideres la posibilidad de cambiar el diseño de tu blog, es decir, la plantilla. 

De esta forma te estarás asegurando la comodidad total de tus lectores a la hora de acceder a tus contenidos, de lo contrario, además de no causar una buena imagen, podremos perder algún que otro seguidor si ve que tiene problemas para leer tus publicaciones, o simplemente el diseño no acompaña a su dispositivo.


Busca siempre el modo de crear diseños cómodos y lo más flexibles posible, y ya que muchas veces se accede a través del móvil, comienza por cambiar la configuración del tamaño para que se ajuste correctamente a las diferentes pantallas, para ello debes cambiar en el código HTML, el valor que haya del parámetro width por max-width y en lugar de height, min-height, de esta forma los testos con varias líneas y los diferentes tamaños de la fuente no causarán problemas con el límite de la pantalla.

Además, si quieres que las imágenes de tu blog se adapten correctamente al espacio de las pantallas móviles, deberás buscar el siguiente fragmento:  ]]></b:skin> , y justo delante de él, tendrás que insertar la siguiente regla CSS:
 

 img {
  max-width: 100%;
}

 

Y ya está, a partir de ahora tus lectores no tendrán problemas a la hora de acceder a tu blog, ya sea desde el móvil o la Tablet y en cualquier momento, hazlo por ellos, pues el blog lo hacemos especialmente para ellos.

Si te gusta recibir por correo electronico mas tutoriales y trucos para mejorar su blog por, suscribete gratis a nuestro blog, visita nuestra pagina de facebook o añade nuestro feed Rss.
--> Leer más...
Valorar Entrada : 

Haz tu blog más rápido con el Script Lazy Image Loading

¿No odias cuando los sitios web no se cargan rápido? Hay muchos factores pero las imágenes son uno de los factores más importantes que afectan la carga rápida de un sitio web. Para reducir el tiempo de carga de tu blog hoy te presento un script que permite que tus imágenes se carguen más rápido, y funciona en blogger.


Lazy Load Image es un plugin jQuery que sólo carga Imágenes visibles en el display (parte visible de la página web) mejorando así el tiempo de carga de página. Las imágenes que están fuera de la región visible inicial de la pantalla se cargan mientras los usuarios hacen scroll a través de la pantalla. 


Un plugin muy útil para los blogs que usan imágenes de manera intensiva. Este script realmente te ayuda a disminuir el 50 % de tiempo de carga de los blogs. Puedes revisar tu propio blog con Gtmetrics para ver el funcionamiento de este plugin.

¿Cómo puedes instalar este plugin para blogger?

    Ingresa para Blogger > Escritorio
    Haga clic en el menú desplegable y seleccione la plantilla
    Haz una copia de seguridad de la plantilla antes de hacer cambios a tu blog
    Ahora haz clic en Edición de HTML > Continuar
    Presiona Ctrl + F y busca el código que se muestra a continuación:
</head>

Copiar y pegar el siguiente código antes de: </head>


Ahora sólo tienes que pulsar en Guardar plantilla y actualizar tu blog. Ahora podrás desplazarte a tu blog y ver cómo tus imágenes van apareciendo con el efecto de “Lazy Image Loading”.

Si te gusta recibir mas articulos como este por correo electronico, suscribete gratis a nuestro blog, visita nuestra pagina de facebook o añade nuestro feed Rss.
--> Leer más...
Valorar Entrada :