Tutorial: Caja debajo de las entradas optimizada para compartir y comentar

BitLiberal

Gamma
Redactor
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
25 Nov 2011
Mensajes
219
A veces cuando tenemos un blog en blogger, las secciones debajos de las entradas llaman demasiado la atencion y no dejan espacio para que los navegantes puedan ver la caja de comentarios, restandole atencion y por lo tanto comentarios.

Por otra parte, los botones sociales de blogger debajo de las entradas son muy pequeños, y tambien muchos usuarios lo pasan por alto.

Con este par de codigos lo que se busca es facil: atraer la atencion del visitante para que comparta y deje comentarios.

Aqui una imagen de ejemplo:
prueba.JPG

En primer lugar dejar claro que el codigo de botones sociales esta proporcionado por The Largest Sharing and Social Data Platform. We Provide Twitter and Facebook Buttons, Custom Audience Targeting, and more. | AddThis, modificado por Espectaculares Marcadores Sociales para tu blog | Mil Trucos Blogger para incluir imagenes personalizadas. Como blogger español, es bastante importante la presencia de Tuenti en esos marcadores, asi que he "diseñado" un boton parecido a los de miltrucos y agregado el codigo para poder compartir en esa red social.

El segundo codigo no es mas que un enlace que conduce al formulario de comentarios, con una imagen para que quede mejor. Dejar claro que de momento solo funciona con los de blogger, pero si alguien me pasa el codigo de disqus, se podria añadir al mismo un name para se pueda hacer lo mismo.


Una vez explicado, comencemos con los codigos.

En este, se añadira debajo de la entrada unos botones grandes y cuadrados (aunque como antes he explicado, se puede cambiar la imagen) que atraeran la atencion. Hay que mencionar que hay desactivar los botones de blogger sociales, para eso vamos a Diseño, y en el cuadrado "Entradas del blog", hacemos click en "Editar", y desmarcamos la opcion "Mostrar botones para compartir" y "Mostrar enlaces para el envío de entradas".

Buscamos este codigo en nuestra plantilla:

HTML:
<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>

Y debajo, pegamos este otro:

HTML:
<style type='text/css'>
.custom_images ul {display:inline; list-style:none}
.custom_images ul li {float:left; margin-right:1px}
</style>
<div class='addthis_toolbox'>
<div style='margin: 50px 0px 10px; font-size: 30px;'>Compartir este Post</div>
<div class='custom_images'>
<span class='fade'><ul>
  <li><a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='57' src='https://lh3.googleusercontent.com/-ErgrNe7VaTM/T4ywntBsxGI/AAAAAAAAJHA/79YM4bBqnf4/s57/Facebook%2520alt%25202.png' width='57'/></a></li>
  <li><a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='57' src='https://lh5.googleusercontent.com/-jZW7xfQfo5c/T4ywo5r5yBI/AAAAAAAAJHM/4ZtK0i8IXyA/s57/Twitter%2520alt%25204.png' width='57'/></a></li>
  <li><a class='addthis_button_google_plusone_share'><img alt='Share to Google+' border='0' height='57' src='https://lh5.googleusercontent.com/-l682ZOmTPl8/T4ywn1Z13TI/AAAAAAAAJG8/ncHs61veQOo/s57/Google%252B%2520alt%25202.png' width='57'/></a></li>
  <li><a class='addthis_button_stumbleupon'><img alt='Share to Stumble Upon' border='0' height='57' src='https://lh4.googleusercontent.com/-OBxyCfQlXV4/T4ywonzZx6I/AAAAAAAAJHI/UBRTcapYwCw/s57/StumbleUpon%2520alt.png' width='57'/></a></li>
  <li><a class='addthis_button_evernote'><img alt='Share to Evernote' border='0' height='57' src='https://lh4.googleusercontent.com/-RCzpjgpIEcE/T4y74V6mhzI/AAAAAAAAJH8/ex7WdsezcYk/s57/evernote-icon.png' width='57'/></a></li>
  <li><a class='addthis_button_blogger'><img alt='Share to Blogger' border='0' height='57' src='https://lh6.googleusercontent.com/-DkPVHUpO5Mc/T4y73abYX4I/AAAAAAAAJH0/1xfolEU-Y_k/s57/Google%2520Blogger.png' width='57'/></a></li>
  <li><a class='addthis_button_email'><img alt='Share to Email' border='0' height='57' src='https://lh4.googleusercontent.com/-CxGRg2HeAXc/T4y73bmCVAI/AAAAAAAAJHw/gaA6Y7GwQZU/s57/Mail%2520alt.png' width='57'/></a></li>
  <li><a class='addthis_button_yahoomail'><img alt='Share to Yahoo Messenger' border='0' height='57' src='https://lh6.googleusercontent.com/-z9ucAlSwZ1o/T4y-uaIEpNI/AAAAAAAAJIc/YL6sPfqvFkk/s57/Yahoo%2521%2520alt%25201.png' width='57'/></a></li>
  <li><a class='addthis_button_more'><img alt='More...' border='0' height='57' src='https://lh3.googleusercontent.com/-R_-TACJvUQY/T4y73dnBoTI/AAAAAAAAJH4/KWAUNXbnq8A/s57/Share%2520alt%25201.png' width='57'/></a></li>
</ul></span>
</div>
</div>

En este codigo, los botones que aparecen son Facebook, Google+, Twitter, Stumbleupon, Evernote, Blogger, Enviar por Email, Enviar por Email Yahoo, y el boton "Mas" de AddThis.

Para dejar a nuestro gusto, podemos eliminar botones y cambiar imagenes. Para eliminar un boton, por ejemplo evernote, es facil, solo tenemos que eliminar su parte de codigo:
HTML:
<li><a class='addthis_button_evernote'><img alt='Share to Evernote' border='0' height='57' src='https://lh4.googleusercontent.com/-RCzpjgpIEcE/T4y74V6mhzI/AAAAAAAAJH8/ex7WdsezcYk/s57/evernote-icon.png' width='57'/></a></li>

Y para cambiar la imagen igual, solo tendiramos que cambiar la url "src='https://lh4.googleusercontent.com/-RCzpjgpIEcE/T4y74V6mhzI/AAAAAAAAJH8/ex7WdsezcYk/s57/evernote-icon.png" por nuestra imagen.

Para añadir el codigo de tuenti con el boton cuadrado, solo tenemos que añadir este codigo debajo de cualquiera ya puesto:

HTML:
<li><a class='addthis_button_tuenti' title='Compartir en Tuenti'><img alt='Compartir en Tuenti' border='0' height='57' src='http://3.bp.blogspot.com/-6k_o3-_q25Q/UlFPYLiWC0I/AAAAAAAABRI/GSGZyT7zqu4/s1600/tuenti.jpeg' width='57'/></a></li>

Para ver una prueba de como funciona, visita el blog de prueba.

Tambien podemos ver que hay un texto que aparece en grande "Comparte este Post", cosecha de MilTrucos, que podemos modificar para atraer al visitante con la frase que queramos.

Yo personalmente, para no relantizar la pagina con carga de imagenes y no bombardear al visitantes con 30 opciones, he dejado solo 6 opciones, FaceBook, Twitter, Google+, Tuenti, Email y "Mas". Todo esto esta visible en el blog de prueba.

Y ahora procedemos con el codigo que conduce a los comentarios.

Este es muy simple, pues solo es un enlace.
Justo debajo del codigo de MilTrucos, ponemos esto:

HTML:
<div style='margin: 15px 0px 10px; font-size: 30px;'>O añade un comentario:</div>
	 <div>
    <a href='#comments' title='Haz click aqui para Añadir un Comentario'><img border='0' src='http://1.bp.blogspot.com/-RkaApNKeV2U/UlKGjdu4h8I/AAAAAAAABSU/VE7mmO6cAbU/s1600/button.png'/></a></div>

Al pulsarlo, nos lleva directamente al formulario de comentarios.
Lo malo es que este boton aparece tambien en las paginas, si hay algun experto que pudiera explicarme como añadir un condicional para que solo se muestre en los post, perfecto.

El proceso de modificacion es el mismo, cambiar imagen y texto.

Todo esto lo vamoso probando para dejarlo lo mas atractivo posible, y asi poder atraer la atencion a que compartan y comenten nuestro contenido.

PD:
Si alguien no encuentra el codigo en su plantilla o no sabe como ponerlo o modificarlo, que comente o envie un MP, se lo explicare especial para su plantilla en privado.
 

Carlos Arreola

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.341
Tutorial aprobado y agregado al listado, se agradece el aporte.
 

lynev

Épsilon
Verificación en dos pasos desactivada
Desde
25 Oct 2011
Mensajes
895
excelente veamos a ver que tal gracias
 

jc7

Gamma
Verificación en dos pasos desactivada
Desde
3 Ago 2010
Mensajes
357
muy buen tutorial, se agradece el aporte!.
 

Bladeyr

Gamma
Verificación en dos pasos desactivada
Desde
28 Feb 2011
Mensajes
327
luego lo intento gracias muy util
 

johan

Lambda
Verificación en dos pasos desactivada
Desde
19 Ene 2011
Mensajes
2.947
Genial solo falto el demo :encouragement:
 

User72

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios!
Desde
29 Ago 2013
Mensajes
268
muy bonito, gracias!.
 

AlexxxBcN

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
18 Feb 2013
Mensajes
408
Hay alguna forma de cuando se le da a button.png vaya justo a la caja para escribir comentario?

muy bueno!!!!
 

tommy2032

Eta
Social Media
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
12 Ene 2012
Mensajes
1.261
:encouragement:
 

Arriba