Ver entrada completa. Seguidores Blogger, Twitter y Facebook flotando a la derecha

Hace un tiempo Ciudad Blogger publicaba una entrada de cómo se hace El Fanbox de Facebook, flotante y con efecto deslizante.

Me gusto mucho la forma que se mostraba flotando, pero lo que no me gusto es que para darle el efecto hay que utilizar una librería, la cual enlentece la carga en un blog (mientras no la utilizamos para otra cosa), y en lo personal el efecto no es algo que me llame mucho la atención.

Ahí se me ocurrió que se podía hacer de otra forma; sin utilizar la librería, solo con hover, al igual que lo hacemos para cambiar una imagen al pasar el cursor por encima. Peroooo, como el contenedor mostrado es un iframe con script no funciona bien en Internet Explorer (este navegador siempre complicando las cosas), entonces decidí sustituir el hover con eventos javascript.

Y ya que estábamos; pensé (a veces lo hago), y por que no utilizar esto no solo para mostrar el Fanbox de Facebook.

Lo primero que hice fue crear las imágenes que las pueden descargar desde acá:

Y el resultado final fue el siguiente:

Vamos a mostrar los Seguidores de Blogger, Comentarios de Twitter y el Fanbox de facebook.

Se muestra solo una pestaña fija a la derecha, y al pasar el cursor se abre mostrando el gadget.

¿Cómo se hace...?

Ver entrada completa. Cómo instalar el botón Send o Enviar de Facebook en Blogger

Con el botón Send o Enviar podemos enviar información, por ejemplo este post, a los amigos de Facebook que uno elija en forma privada, en lugar de compartirlo en el muro a la vista de todos.

Pueden ir directo a la página: Facebook Send Button o colocar el código de mas abajo.

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML.

Pueden colocarlo abajo de:

<div class='post-body entry-content'>

Poner el siguiente código:

<span id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/es_ES/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<span class='fb-send' expr:data-href='data:post.url' style='border:0;'/>

Si solo se quiere mostrar el botón en las entradas individuales y no en la página principal, hay que poner el código dentro de condicionales:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Aquí va el código del botón -->
<!-- Se muestra solo en las entradas -->
</b:if>

Ejemplo:

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Facebook Iconos

Descargar

Fuente ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Chapaface: Chapas para perfil de facebook

Chapaface es un sitio donde puedes encontrar una gran cantidad de chapas para tu perfil de Facebook.

Las chapas son esas imágenes pequeñas que se ven en una gran cantidad de fotos de perfil en facebook.

Las chapas están organizadas por categorías:

• Deportes
• Animales
• Causas
• Festividades
• Marcas
• Emoticonos
• Celebridades
• Banderas
• Creencias
• Políticas
• Personalizadas
• Sugerir Una chapa

Chapaface.com ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. i2Symbol: Una página con simbolos para Facebook o Twitter

Ir a i2Symbol

Personalizar SMS, correo electrónico, tweets, y estado de Facebook.
Cada símbolo es sólo un carácter de texto para guardar símbolos MSG.
Disponibles Extensión para Google Chrome y Firefox.
Copia símbolos como texto para pegar en mensajes.

Puedes escoger el tipo de fuente, tamaño y distintos tipos de símbolos.

乂⍲‿⍲乂

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Adidas saca calzado deportivo Facebook y Twitter

La marca deportiva Adidas ha lanzado al mercado nuevos calzados deportivos de las redes sociales más famosas, Facebook y Twitter.

Los colores de los modelos son los mismos que utilizan las redes sociales.

El diseñador es Gerry McKay.

Los nombres de los modelos son: "Facebook Superstars" y "Twitter Superstars".

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Acortar link de facebook

Por si no saben les informo que podemos acceder a Facebook con un link mas corto.

Yo me enteré hace muy poco por eso quiero compartirlo con ustedes.

Sólo necesitas reemplazar el http://www.facebook.com por http://fb.com/

Si tenemos una página le agregamos el nombre a continuación.

Ejemplo:

http://fb.com/loseasi

El resulatado es igual que:

http://facebook.com/loseasi ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Insertar un vídeo de Facebook en tu blog

Cada vídeo que se sube a Facebook tiene una ID única que puedes ver en la barra de direcciones del navegador.

Dicha ID, son unos números que aparecen después de v=

Para mostrar un vídeo de Facebook tendremos que poner el siguiente código:

<object width="500" height="245">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
<param name="movie" value="http://www.facebook.com/v/ACA VA LA ID" />
<embed src="http://www.facebook.com/v/ACA VA LA ID" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="500" height="245" wmode="transparent">
</embed>
</object>

Poner los números de la ID en los 2 lados (ACA VA LA ID)

Cambiar ancho (width) y altura (height)


Para centrarlo poner el código dentro de:

<div style="text-align: center;">
....código........
</div>

Ejemplo de un video tomado de Facebook del usuario Unificando los reclamos de las personas con capacidades diferentes con permiso de Yolanda Haydee Traut:

Otro ejemplo: (El de gorro es mi hermano menor que vive en Barcelona, familia de cantantes jajaja)

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Imagen fija de Twitter y Facebook

El siguiente código ponerlo debajo de <body>:

<a href='http://twitter.com/USUARIO' target='_blank' title='Sígueme en Twitter'><img border='0' src='URL DE LA IMAGEN DE TWITTER' style='display:scroll;position:fixed;top:100px;right:0;'/></a>
<a href='http://www.facebook.com/PÁGINA' target='_blank' title='Hazte Fan en Facebook'><img border='0' src='URL DE LA IMAGEN DE FACEBOOK' style='display:scroll;position:fixed;top:280px;right:0;'/></a>

Cambios a realizar:

1) Nombre de usuario en twitter y página de facebook.

2) Las URL de las imágenes.

Acá les dejo los link de las 3 imágenes de muestra:

Facebook:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifStzpg84O1vCc-xiSZ4Exkb8lbq_YfuIy1Jq3zCcLQLwqANm_vt0l6nZKTh_XS0Nahi87MU6ZUjN3lVnZXDA_74U-_-gpFQXzK0ghO48wgAETWU6Iby64hZHDWfPiODVQAYUoZLum0CWI/s1600/hazte-fan_facebook.png

Twitter Naranja:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaZpH8CH_I8hMbKBCLbPAMrbHfz6_NHDLpcxykQIQORyoF0MgbTO4X3We4r36DzdDSQ_YR7OTGlT7-8C0tNDgRUmMAde9QznFS4MWO2X_xFRxi0YSKzC2AL36eSC_Lydq6ZG8l844X8fSP/s1600/naranja_twitter.png

Twitter Gris:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9047tDLIisKVTUiqtU1gCWBsNaeva10BxOvB6uq74BzdgYLkIhfN0vbDf2PavL0eHQayxD6uYLhWpFmEuT-EAzW8w4Zj5zDBa3hEzqD-LZ4o74flFzByYJ8bozWgrq-_xMbfEL_3wf4Xu/s1600/gris_twitter.png

3) Posición de las imágenes.

En el código yo puse para que las imágenes se muestren a la derecha (right:0) y a una distancia desde arriba de 100px la de Twitter y 280px la de Facebook.

Si quieren pueden ir probando las distancias que mas se les adapte a su blog.

Estas imágenes son para ir del lado derecho del blog, pero si prefieren del lado izquierdo cambiar right:0 por left:0. ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Añadir en Notas de Facebook el feed de tu blog.

En el menu superior ir a "Cuenta" clic en Configuración de aplicaciones.

Clic sobre "Notas".

En la nueva ventana a la derecha entrar en Importar un blog.

En Dirección de la página:

Poner el Feed Rss de nuestro Blog (También puede ser el feed de otra página), aceptamos y le damos al bóton Empezar a importar.

Muestra una vista previa.
Confirmamos.

Ya la podemos ver desde perfil, Notas. ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »