28 de noviembre de 2017

Cómo crear el widget de Archivo del Blog sin fecha

Widget Archivo del blog sin fecha en Blogger


En esta entrada voy a desarrollar la respuesta a un comentario que dejó un lector en la entrada con el título "Modificar el gadget de archivo del blog en Blogger". Este lector planteaba la posibilidad de que el archivo del blog mostrara únicamente los títulos de los artículos, excluyendo su fecha de publicación.

Efectivamente en ocasiones puede que no interese que se muestre la fecha. Si optamos por eliminar este dato, tenemos que realizar unas pequeñas modificaciones en el código HTML de la plantilla del blog.

Tenemos el gadget añadido al diseño del blog, con estilo Jerarquía y frecuencia Mensual.


Configuración gadget Archivo del Blog estilo jerarquía en Blogger


Se muestran los títulos de los artículos organizados jerárquicamente por años - meses y su número total.
Su aspecto en el blog es el siguiente,

Widget Archivo del blog estilo jerarquía en Blogger



Cómo eliminar la fecha de las entradas en el gadget Archivo del blog


Si no se desea mostrar la fecha de publicación de los artículos es necesario hacer algunas modificaciones en la plantilla. El resultado no es muy brillante pero al menos he logrado evitar que se muestre la fecha.

Lo primero que tenemos que hacer es ir al menú de Blogger ➞ Tema ➞ Editar HTML

Editar HTML del Tema en Blogger


Dentro de la ventana de edición de la plantilla HTML buscamos las líneas correspondientes al widget "Archivo del blog".

Código HTML widget Archivo del Blog en Blogger



Nos situamos sobre la línea
<b:includable id='interval' var='intervalData'>...</b:includable>

y pinchamos sobre ➤ (la flecha a la izquierda) para desplegar las líneas entre la etiqueta de apertura y cierre de b:includable.

Veremos unas líneas parecidas a las siguientes,

 <b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='interval'>
    <ul class='hierarchy'>
      <li expr:class='&quot;archivedate &quot; + data:interval.expclass'>
        <b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
             <a class='post-count-link' expr:href='data:interval.url'>
                    <data:interval.name/>
             </a>     
        <span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>
        <b:include cond='data:interval.data' data='interval.data' name='interval'/>
        <b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
      </li>
    </ul>
  </b:loop>
</b:includable>


¿Qué eliminamos o modificamos?


<data:interval.name/>
Esta etiqueta muestra el nombre (año, mes, día) de las fechas. Si la eliminamos, los títulos de las entradas se siguen mostrando ordenadas jerárquicamente por meses, pero no se mostrará el nombre del mes ni del año, solo el número total de entradas por jerarquía.

Widget Archivo del blog estilo jerarquía en Blogger sin fecha


<b:include cond='data:interval.data' data='interval.data' name='interval'/>
Esta etiqueta muestra la jerarquía de meses (y días en el caso de seleccionar "frecuencia diaria" dentro de la configuración del gadget). Si se elimina esta etiqueta, solo se mostrarán los títulos de las entradas ordenadas por año. En este caso solo existen 22 entradas en el año 2016. Si existieran publicaciones de otros años se mostrarían de forma independiente en otra línea (una línea por año).

Widget Archivo del blog estilo jerarquía en Blogger sin mes ni día


<data:interval.name/>
<b:include cond='data:interval.data' data='interval.data' name='interval'/>
Si eliminamos ambas etiquetas, el archivo del blog mostrará los títulos de las entradas ordenadas cronológicamente pero sin mostrar el número de año.


Widget Archivo del blog estilo jerarquía en Blogger sin fecha por años

 
El archivo del blog ya muestra los títulos de las entradas sin incluir la fecha de publicación.
El problema es que si tenemos artículos publicados en diferentes años, el archivo del blog mostrará los títulos de los artículos pero agrupados por año, en lugar de mostrar una única lista global.

Podemos solucionarlo modificando la línea marcada en morado dentro del cuadro anterior con el código HTML.

  <span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>

y la cambiamos por ésta otra,
 <span class='post-count' dir='ltr'>Total entradas (<data:interval.post-count/>)</span>

He añadido el texto "Total entradas " pero puede añadirse otro.

Ahora el aspecto del archivo del blog es el siguiente,


Se muestra el texto que he añadido "Total entradas" junto con el número total de artículos publicados en el blog.

Si desplegamos el archivo, se mostrarán los títulos de todas las entradas del blog, ordenadas cronológicamente, pero sin mostrar la fecha de publicación ni estar agrupadas por años.

Widget Archivo del blog estilo jerarquía en Blogger sin fecha


31 de mayo de 2017

Añadir botones sociales para compartir las entradas del blog


Añadir botones sociales para compartir las entradas del blog


Las redes sociales en el blog


Las redes sociales son fundamentales para la difusión y visibilidad del blog. No debemos descuidar la presencia de los botones sociales porque facilitan y animan al usuario a compartir contenido si resulta de su interés, logrando por esta vía promocionar nuestro blog y atraer más público.

Blogger permite añadir los botones de redes sociales al pie de las entradas accediendo a,

Menú Diseño → Gadget Entradas del blog → Editar (Configurar entradas del blog)
Para más información ver "Añadir los iconos de redes sociales en Blogger".






¿En qué lugar del blog debemos colocar los botones de redes sociales para compartir contenido?


Los botones sociales incluidos únicamente al pie de las entradas  presuponen que el lector ha leído el artículo completo y está al final de la entrada por lo que su presencia en el footer del post puede animarlo a compartir la publicación sin tener que desplazarse por la pantalla para localizar los botones de redes sociales.

Hay que considerar, como punto menos favorable, que la zona inferior de las entradas contiene varios elementos e información que pueden confundir o distraer al usuario compitiendo por su atención.
Además el potencial lector no sabrá si la entrada puede compartirse hasta que no llegue al final, lo que puede desanimarlo a iniciar su lectura. En muchas ocasiones las entradas algo extensas pueden resultar muy interesantes al lector sin llegar a leer por completo el artículo pero si lo obligamos a desplazarse por la pantalla en busca de los botones sociales probablemente abandonará la página sin compartir la entrada.

Si no se incluyen los botones en la parte inferior de las entradas puede dificultar al lector que llegue al final del post la posibilidad de compartir la publicación porque no son visibles los enlaces (no hay un reclamo que lo incite a compartir) y no son facilmente accesibles (puede descartar su intención inicial de compartir).

Los botones sociales incluidos solo en la parte superior de las entradas animan al visitante a leer el post, le informan que se puede compartir su enlace y evitan que tenga que desplazarse para encontrar los botones share para compartir si no llega a leer todo su contenido.

Esto nos hace pensar que la mejor opción es mantener los botones al principio y al final de cada entrada pero algunos desarrolladores creen que repetir el mismo código debe evitarse.

Una solución son los botones de redes sociales fijos en un lateral (casi siempre en el lateral izquierdo por tratarse generalmente de un espacio vacío) que evitaría la duplicidad del código. La barra social fija permite una localización rápida de los botones de redes sociales y que el usuario comparta el contenido de la entrada porque se mantiene fija y es visible en cualquier punto del artículo.
Ver "Iconos de redes sociales fijos en el blog con HTML y CSS".
Pero también pueden ocasionar problemas en la adaptación del diseño a distintos dispositivos que habrá que tener en cuenta si se decide incluirlos.

Una vez revisadas estas tres posibles ubicaciones para la barra social, ¿dónde la situamos?

Sobre esta cuestión no hay unanimidad de criterios. Algunos profesionales del diseño web y expertos en SEO recomiendan su posición al pie, otros por el contrario consideran que la mejor situación es una barra lateral fija o bien al principio de la publicación. En definitiva, que no han resuelto mis dudas así que la decisión final la tomaré en base a mi experiencia como visitante de muchos blogs y webs especializadas en contenidos.

Visito y soy asidua lectora de blogs, algunos magníficos, y cuando me resulta interesante algún artículo trato de compartirlo en las redes pero en algunas ocasiones es realmente tedioso localizar los botones que, en muchas ocasiones, confundo con el acceso al perfil del autor. Es decir, en algunos casos hay que tener mucha paciencia si se quiere compartir contenido pero la paciencia no es precisamente la característica principal de un consumidor de contenidos web que exige inmediatez y accesibilidad.

Por supuesto no soy una experta, soy una aprendiz que registra sus avances y nuevos conocimientos en este Cuaderno de Aprendizaje, y la conclusión final de esta principiante blogger es que los botones deben ser accesibles, fácilmente localizables para el usuario y lo más próximos al contenido a compartir para que el usuario sepa realmente qué está compartiendo.

Lo fundamental y prioritario es lograr la mejor experiencia al usuario, facilitando su navegación y evitando los elementos o estilos que puedan confundirlo.

Ya he visto cómo añadir los botones sociales al blog y cómo añadir una barra social fija en la lateral izquierdo del blog que van a permitir al usuario acceder al perfil social del autor y seguirlo si es de su interés pero estos enlaces a las redes sociales no permiten compartir el contenido y entradas del blog.

Esta es la razón de esta entrada, añadir los botones share de redes sociales para compartir y en las dos principales ubicaciones,

1. Barra social en la parte superior de las entradas del blog.

2. Barra social fija en el lateral izquierdo del blog.




1. Botones para compartir en las redes sociales situados en la cabecera de las entradas del blog


Voy a añadir los botones de redes sociales al principio de cada entrada, de tres formas distintas:

        1.1. Moviendo los botones sociales de Blogger del pie a la cabecera de la entrada.

        1.2. Añadiendo los botones sociales de Blogger personalizados y bajo el título de la entrada.

        1.3. Añadiendo los botones oficiales de las Redes Sociales bajo el título de la entrada.



1.1. Moviendo los botones sociales de Blogger del pie a la cabecera de la entrada.



        ►Botones sociales de Blogger bajo el título de la entrada



Botones sociales bajo el título del post

Tras hacer una copia de seguridad de la plantilla, y dentro del menú Tema (antes Plantilla)  →  Editar HTML, busco con  CTRL + F las siguientes líneas dentro del post-footer.

<div class='post-footer'>

     <div class='post-share-buttons goog-inline-block'>
          <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
     </div>


Las corto y pego a continuación de la línea en color granate (la segunda en la plantilla).

  <div class='post-header-line-1'/>

    <div class='post-share-buttons goog-inline-block'>
        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
    </div>


He movido la barra social de Blogger del post-footer (pie del post)  al post-header (cabecera del post). Si se quieren mantener los botones sociales en el pie de las entradas copiamos (no cortamos) las líneas.



        ►Botones sociales de Blogger bajo la fecha de la entrada



Botones sociales bajo la fecha del post


Dentro del menú Tema (antes Plantilla)  →  Editar HTML  busco con  CTRL + F las siguientes líneas dentro del post-footer.

<div class='post-footer'>

     <div class='post-share-buttons goog-inline-block'>
          <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
     </div>


Las corto y pego entre las líneas en color granate.

  <b:includable id='post' var='post'>
     <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

    <div class='post-share-buttons goog-inline-block'>
        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
    </div>

  <b:if cond='data:post.firstImageUrl'>
        <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
  </b:if>


Si se quieren mantener los botones sociales en el pie de las entradas copiamos (no cortamos) las líneas.




1.2. Personalizar los botones sociales de Blogger y situarlos bajo el título de las entradas.



Es fundamental que los enlaces a las redes sociales destaquen y sean fáciles de localizar por el usuario.

Los botones que Blogger proporciona para compartir el contenido del blog son pequeños, poco vistosos y pasan desapercibidos, todo lo contrario a lo que necesitamos para que un usuario se decida a compartir una entrada del blog.

Necesito por lo tanto personalizar los botones sociales que ya he situado bajo el título de las entradas.

He intentado añadir estos botones en las entradas haciendo uso de las etiquetas <span> y <a class=''> siendo el resultado visual el esperado. El problema es que los enlaces a las redes sociales dirigen al perfil (si se incluye el url de nuestro perfil en las redes sociales) o bien posibilitan compartir la entrada pero sin información (imagen de la entrada, título del post, título del blog, autor, etc).

He buscado y leído muchos posts y blogs que explican cómo añadir los enlaces al blog sin hacer uso de plugins pero no funcionan correctamente porque la ventana emergente que se muestra tras hacer clic en el enlace está en blanco, sin incluir ninguna información de la entrada .
Es decir, el mismo resultado de mis intentos anteriores.

Si los botones sociales que añadimos para compartir nuestro contenido obligan a que todo el trabajo lo haga el usuario será un completo fracaso porque no se compartirá el contenido e incluso afectará negativamente a la imagen del blog.

Como por el momento no he encontrado la forma de solucionar este problema, resuelvo temporalmente este inconveniente personalizando la barra social que proporciona Blogger.

He eliminado varios de sus botones dejando únicamente los que corresponden a las redes sociales en las que está presente el blog, que es Twitter, Facebook y Google +.

El resultado es el siguiente,

Enlaces sociales personalizados bajo el título del blog

Los pasos que he seguido son,

Primero, y tras realizar una copia de seguridad de la plantilla, fui al menú Tema (antes Plantilla)  →  Editar HTML  y localicé con  CTRL + F las siguientes líneas dentro del post-footer.

<div class='post-footer'>

<b:includable id='shareButtons' var='post'>

    <b:includable id='shareButtons' var='post'>

  <b:if cond='data:top.showEmailButton'>
   <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
     <span class='share-button-link-text'><data:top.emailThisMsg/>
     </span>
   </a>
  </b:if>

  <b:if cond='data:top.showBlogThisButton'>
    <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.blogThisMsg/>
      </span>
    </a>
  </b:if>

  <b:if cond='data:top.showTwitterButton'>
    <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
       <span class='share-button-link-text'><data:top.shareToTwitterMsg/>
       </span>
    </a>
  </b:if>

  <b:if cond='data:top.showFacebookButton'>
    <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToFacebookMsg/>
      </span>
    </a>
  </b:if>

  <b:if cond='data:top.showPinterestButton'>
    <a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToPinterestMsg/>
      </span>
    </a>
  </b:if>

  <b:if cond='data:top.showPlusOne'>
    <div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/>
    </div>
  </b:if>

</b:includable>



Copio las líneas del anterior cuadro donde he eliminado las líneas que corresponden a los enlaces de enviar por correo electrónico, Blogger y Pinterest.
Cambié la id='shareButtons' por id='shareButtons1', 'share-button' por 'share-button1', 'sb-twitter' por 'sb-twitter1', 'sb-facebook' por 'sb-facebook1'; lo que me permitió aplicar un estilo distinto a los botones por defecto de Blogger que añadí bajo el título del post, pero sigo manteniendo al final de la entrada los botones de Blogger originales.
Si se quiere mostrar el mismo estilo personalizado de los botones sociales de Blogger en todo el blog no es necesario realizar este proceso.

A continuación de las líneas anteriores, pegué las incluidas en este cuadro,

  <b:includable id='shareButtons1' var='post'>
   

     <b:if cond='data:top.showTwitterButton'>
       <a class='goog-inline-block share-button1 sb-twitter1' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
           <span class='share-button-link-text'><data:top.shareToTwitterMsg/>
           </span>
       </a>
     </b:if>

     <b:if cond='data:top.showFacebookButton'>
       <a class='goog-inline-block share-button1 sb-facebook1' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
           <span class='share-button-link-text'><data:top.shareToFacebookMsg/>
           </span>
       </a>
     </b:if>

     <b:if cond='data:top.showPlusOne'>
       <div class='goog-inline-block share-button1 google-plus-share-container'><div class='g-plusone' data-annotation='none'/>

       </div>
     </b:if>

</b:includable>


Dentro del botón de Google Plus, eliminé la etiqueta <data:post.googlePlusShareTag/> para suprimir el texto "+1 Recomendar esto en Google" que se muestra a la derecha del botón G+1.
Botón G+1 para recomendar en Google Plus
pero al instante me di cuenta que con esta acción se elimina también del botón G+1.

Para solucionarlo añadí la etiqueta  <div class='g-plusone' data-annotation='none'/>, que muestra el botón PlusOne, y el valor none para el atributo de validación data-annotation. El valor none elimina el registro.

Si se opta por mostrar el registro de +1
Botón G+1 para recomendar en Google Plus con contador

solamente hay que eliminar el atributo data-annotation='none'

Para que estos botones se muestren bajo el título del post (y continuando en la edición HTML de la plantilla) busco con  CTRL + F las siguientes líneas dentro del post-footer.
<div class='post-footer'>

     <div class='post-share-buttons goog-inline-block'>
          <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
     </div>


Las copio y las pego a continuación de la línea en color granate (la segunda en la plantilla).

Si no se quieren mantener los botones sociales en el pie de las entradas cortamos (no copiamos) las líneas.

<div class='post-header-line-1'/>

    <div class='post-share-buttons goog-inline-block'>
         <b:if cond='data:blog.pageType == "item"'>
              <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons1'/>
         </b:if>
    </div>

<b:if cond='data:blog.pageType == "item"'> indica que la barra social se añade bajo el título cuando las entradas se muestran solo de forma individual (página de la entrada) y no desde la página Inicio.
Si se quiere mostrar la barra social bajo el título de las entradas cuando se accede directamente desde la página Inicio y cuando se accede a ellas de forma individual, borramos esta línea.

Ya he añadido el código HTML con los botones sociales de Blogger para que se muestren bajo el título de las entradas. Ahora tengo que personalizarlos para diferenciarlos de los que Blogger proporciona por defecto.

Botones sociales proporcionados por Blogger



1.2. Estilo CSS para personalizar los botones sociales de Blogger bajo el título de la entrada


Dentro de la edición HTML de la plantilla y justo encima de  </b:skin> (buscar con CTRL+F) he añadido las siguientes líneas,

/*Botones sociales de Blogger bajo el título de la entrada
-----------------------------------------------------------------------------------*/
.goog-inline-block {                          /*caja barra social*/
vertical-align: top !important;      /*alineada vertical arriba*/
}
 
.share-button1 {         /*barra botones sociales*/
position: relative;     /*posición relativa*/
margin: 0px;            /*margen*/
padding: 0px;        /*relleno*/
}

.sb-twitter1 {                              /*botón Twitter*/
width: 40px !important;        /*ancho*/
height: 40px !important;     /*alto*/
background: url("URL del botón Twitter") no-repeat !important;    /*imagen de fondo no se repite*/
}

.sb-facebook1 {                         /*botón Facebook*/
width: 40px !important;        /*ancho*/
height: 40px !important;     /*alto*/
background: url("URL del botón Facebook") no-repeat !important;    /*imagen de fondo no se repite*/
}

.google-plus-share-container {         /*enlace Google +*/
width: 40px !important;                  /*ancho*/          
height: 40px !important;               /*alto*/
}

.share-button1:hover {                  /*hover sobre barra botones sociales*/
transform: scale(1.12,1.12);       /*transforma en 2D la escala (eje x,eje y) de cada botón*/
transition: all 0.35s ease;         /*el efecto de 0.35sg se inicia lento, continúa rápido y termina lento*/
}


Las imágenes de los botones son de 30 x 30 píxeles.

Si se decide mantener el mismo estilo aplicado a la barra social de Blogger para todo el blog solo tenemos que hacer unas modificaciones en las líneas de este cuadro.

shareButtons1 se modifica por shareButtons
share-button1 se modifica por share-button
sb-twitter1 se modifica por sb-twitter
sb-facebook1 se modifica por sb-facebook
share-button1:hover se modifica por share-button:hover




1.3. Agregar los botones oficiales de las Redes Sociales bajo el título de las entradas.



Ahora voy a ver cómo se pueden añadir al blog los botones oficiales que proporcionan cada una de las redes sociales.

Las redes sociales incluyen en sus páginas diversos botones y enlaces para compartir contenido o permitir al usuario manifestar que le gusta una publicación o artículo. Estos botones se pueden configurar según las necesidades; por ejemplo el tamaño, si se incluye un contador, etc.

En este apartado voy a tratar de añadir los botones sociales proporcionados por Twitter, Facebook y Google +.

Los botones no incluirán contador, permiten exclusivamente compartir contenido y su tamaño es pequeño.

Para seleccionar y configurar el tipo de botón solo hay que acceder a los sitios oficiales de cada una de estas redes sociales, copiar el código HTML y scripts e incluirlos posteriormente en la plantilla del blog o web.

Botones de Twitter
Plugins sociales de Facebook
Plugins de Google +

Una vez que tengo los códigos de los tres botones, accedo al menú Tema de Blogger tras realizar antes una copia de seguridad de la plantilla.

Dentro del menú Tema (antes Plantilla)  →  Editar HTML, localizo las líneas correspondientes al widget Entradas del blog porque los botones sociales los voy a agregar en la entrada, bajo el el título.

Localizo estas líneas con CTRL + F y escribo dentro del cuadro de búsqueda   id='blog1' .

El buscador me lleva a una línea igual o muy parecida a la siguiente,

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog' version='1'>

A continuación de esta línea está la etiqueta <b:widget-settings>...</b:widget-settings> con los ajustes del gadget. Le siguen las etiquetas <b:includable> que definen los elementos que se incluyen dentro del gadget.

Agregar código botones oficiales de las redes sociales


Como quiero añadir un nuevo elemento para incluir dentro del gadget Entradas del blog, tengo que crear una nueva etiqueta <b:includable> para los botones sociales. Identifico esta nueva etiqueta con el nombre 'botonessharePost' y la incorporo a la plantilla detrás de la última etiqueta <b:includable>...</b:includable>.

 <b:includable id='botonessharePost' var='post'>

   <ul id="compartirpost">

      <li><a href="https://twitter.com/share" class="twitter-share-button" data-via="USUARIO TWITTER" data-lang="es" rel="nofollow" target="_blank" >Twittear</a>
            <script>
              !function(d,s,id){
              var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
              if(!d.getElementById(id)){js=d.createElement(s);
              js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
              fjs.parentNode.insertBefore(js,fjs);
             }}(document, 'script', 'twitter-wjs');
            </script>
     </li>

      <li><div class="fb-share-button" data-layout="button" data-size="small" data-mobile-iframe="false"><a class="fb-xfbml-parse-ignore" rel="nofollow" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2FDOMINIOBLOG%2F&amp;src=sdkpreparse">Compartir en Facebook</a>
            </div>
            <div id="fb-root"></div>
            <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 = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.9";
             fjs.parentNode.insertBefore(js, fjs);
             }(document, 'script', 'facebook-jssdk'));
             </script>
       </li>

       <li><g:plus action="share" annotation="none" expr:href='data:post.sharePostUrl.canonical.http' expr:size='data:size'></g:plus>
             <script type='text/javascript'>
               window.___gcfg = {
               lang: 'es',
               rel= 'nofollow',
               parsetags: 'onload'};
             </script>
       </li>

   </ul>

</b:includable>


data-via="USUARIO TWITTER"
En mi caso sería data-via="prodpersonal" (nombre del usuario de Twitter sin @).

href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2FDOMINIO BLOG%2F&amp;src=sdkpreparse"
En mi blog de prácticas he incluido prodpersonal.blogspot.com.

Twittear y Compartir en Facebook se pueden modificar. Es el texto del enlace que se mostrará cuando no se cargue la imagen del botón social. El botón de Google mostará un +1.

He añadido dentro de la nueva etiqueta <b:includable> una lista no ordenada para la barra social, por eso hago uso de la etiqueta <ul> que designo con el nombre  'compartirpost'. Dentro de ella están las etiquetas <li>, con los elementos de la lista, que encerrarán el código para cada botón.



1.3. Estilo CSS para personalizar los botones oficiales de las Redes Sociales bajo el título de la entrada


Igual que en los casos anteriores, voy a la edición HTML de la plantilla y justo encima de  </b:skin> (buscar con CTRL+F) añado las siguientes líneas,

 /*Botones oficiales RRSS para compartir bajo el título del post
----------------------------------------------------------------------------------*/

#compartirpost li {      /*estilo para cada botón de la barra social*/
margin-right: 10px;   /* margen derecho para cada botón*/
display: inline;         /*los botones se muestran en línea*/
float:left;                /*desplazamiento a la izquierda de los botones*/
}

#compartirpost li:hover {         /*efecto hover sobre los botones*/
transform: scale(1.1,1.1);      /*transforma en 2D la escala (eje x,eje y) de cada botón*/
transition: all 0.35s ease;    /*el efecto de 0.35sg se inicia lento, continúa rápido y termina lento*/
}


Los botones se muestran como se ve en la siguiente imagen,

Agregar botones oficiales RRSS bajo el título del post


Los botones se han agregado bajo el título de las entradas del blog pero me falta un último punto para dar por finalizada la incorporación de los botones sociales ya que por el momento estos botones se muestran en todas las situaciones, tanto si se accede mediante un enlace a una página o bien se accede a la página Inicio.

Como solo quiero mostrar estos enlaces si se accede de forma individual a las entradas, tengo que añadir nuevas líneas a la plantilla.

Localizo dentro de la plantilla la etiqueta <div class='post-header-line-1'> (la segunda en la plantilla) y añado el código en letra de color negro que se muestra en el siguiente cuadro.

<div class='post-header-line-1'/>

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include cond='data:post.sharePostUrl' data='post' name='botonessharePost'/>
</b:if>

</div>




2. Barra social fija en el lateral izquierdo del blog


Los botones sociales los voy a añadir ahora en el lateral izquierdo del blog y se mantendrán fijos en su posición aunque el usuario se vaya desplazando a lo largo de la entrada a medida que va avanzando en su lectura. De esta forma en cualquier punto de la publicación tendrá visibles y con un acceso fácil y rápido los enlaces sociales si desea compartir la publicación.

Voy a ver dos situaciones distintas en función del origen de los botones.

        2.1. Botones sociales de Blogger personalizados.

        2.2. Botones oficiales de las Redes Sociales.



2.1. Botones sociales de Blogger personalizados y fijos en el sidebar


Repito los pasos del ejemplo anterior (botones de Blogger bajo el título de la entrada).
Copio las líneas añadidas en color granate del punto 1.2.,

  <b:includable id='shareButtons1' var='post'>

     <b:if cond='data:top.showTwitterButton'>
      ....

     </b:if>

     <b:if cond='data:top.showFacebookButton'>
      ....

     </b:if>

     <b:if cond='data:top.showPlusOne'>

      ....
     </b:if>

</b:includable>


y a continuación de estas líneas pego su copia haciendo los siguientes cambios.

shareButtons1 se modifica por shareButtons2
share-button1 se modifica por share-button2
sb-twitter1 se modifica por sb-twitter2
sb-facebook1 se modifica por sb-facebook2
share-button1:hover se modifica por share-button2:hover
google-plus-share-container se modifica por google-plus-share-container2

El código queda así,

<b:includable id='shareButtons2' var='post'>

   <b:if cond='data:top.showTwitterButton'>

       <a class='goog-inline-block share-button2 sb-twitter2' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
            <span class='share-button-link-text'> <data:top.shareToTwitterMsg/>
            </span>
        </a>
    </b:if>

    <b:if cond='data:top.showFacebookButton'>
        <a class='goog-inline-block share-button2 sb-facebook2' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
             <span class='share-button-link-text'><data:top.shareToFacebookMsg/>
             </span>
         </a>
     </b:if>

     <b:if cond='data:top.showPlusOne'>
         <div class='goog-inline-block share-button2 google-plus-share-container2'><div class='g-plusone' data-annotation='none' data-size='tall' />
         </div>
     </b:if>


Mantengo la barra social bajo el título de la entrada de la publicación (.shareButtons1) y la barra social por defecto de Blogger al pie de las entradas (.shareButtons), por eso realizo una tercera copia de estas líneas (.shareButtons3) para poder personalizar la tercera barra social con los botones laterales fijos de forma independiente a las otras dos.

Para que estos botones se muestren en el lateral izquierdo del blog continúo en la edición HTML de la plantilla y localizo,
<div class='post-header'> (la segunda en la plantilla)

En el ejemplo anterior del punto 1.2. (barra social bajo el título de las entradas) había añadido dentro del post-header-line-1 las líneas de color granate del cuadro mostrado a continuación.
Ahora para la barra social fija lateral añado las líneas en color verde que, al igual que para el caso anterior, indican que los botones sociales serán visibles solo cuando se accede a la entrada de forma individual.

<div class='post-header'>

    <div class='post-share-buttons goog-inline-block'>
         <b:if cond='data:blog.pageType == &quot;item&quot;'>
              <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons2'/>
         </b:if>
    </div>


<div class='post-header-line-1'/>

    <div class='post-share-buttons goog-inline-block'>
         <b:if cond='data:blog.pageType == &quot;item&quot;'>
              <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons1'/>
         </b:if>
    </div>

</div>



2.1. Estilo CSS para personalizar los botones sociales de Blogger fijos en el lateral izquierdo del blog


Por el momento los nuevos botones fijos que he agregado al blog se muestran también bajo el título de la entrada y sobre los que he añadido en el punto anterior 1.2..

Tengo que desplazar estos nuevos botones para situarlos en el lateral izquierdo.

Dentro de la edición HTML de la plantilla y justo encima de  </b:skin>  añado las siguientes líneas,

/*Botones sociales de Blogger fijos en lateral izdo. del blog
-----------------------------------------------------------------------------------*/

.share-button2 {               /*barra botones sociales*/
position: relative;           /* posición relativa*/
z-index: 999;                  /*evita superposición de otro elemento*/
left: 0%;                        /*siempre margen 0 a la izquierda con diferentes formatos de pantalla*/
}

.sb-twitter2 {                                  /*botón Twitter*/
width: 50px !important;             /*ancho*/
height: 50px !important;          /*alto*/
background: url("URL del botón Twitter") no-repeat !important;          /*imagen de fondo no se repite*/
position: fixed;                     /* posición fija en pantalla siempre visible*/
top: 425px;                         /*margen superior*/
}

.sb-facebook2 {                          /*botón Facebook*/
width: 50px !important;         /*ancho*/
height: 50px !important;      /*alto*/
background: url("URL del botón Facebook") no-repeat !important;      /*imagen de fondo no se repite*/
position: fixed;                  /* posición fija en pantalla siempre visible*/
top: 482px;                      /*margen superior*/
}

.google-plus-share-container2 {        /*enlace Google +*/
width: 50px !important;                   /*ancho*/ 
height: 50px !important;                /*alto*/
position: fixed;                               /*posición fija en pantalla siempre visible*/
top: 540px;                                   /*margen superior*/
}

.share-button2:hover {                  /*hover sobre barra botones sociales*/
transform:translatex(15px);       /*hover desplaza icono hacia la derecha*/
transition: all 0.35s ease;         /*el efecto de 0.35sg se inicia lento, continúa rápido y termina lento*/
}

@media screen and (max-width: 975px) {  /*código para otros dispositivos móviles*/
.share-button2 {                  /*barra botones sociales*/
display: none;                    /*si la pantalla es inferior a 975px no se muestran los botones*/
}
}


Las imágenes de los botones son de 48 x 48 píxeles.

Ahora, si se accede a una página del blog, se muestra la barra social de Blogger personalizada bajo el título de la entrada y también en el lateral izquierdo, y la barra por defecto de Blogger se mantiene al pie de la entrada.

Ejemplo de tres tipos de botones sociales en post de Blogger


Cuando se hacen cambios en la plantilla del blog y modificamos código es importante probar en distintos navegadores y dispositivos para comprobar que todo funciona y las páginas se ven correctamente.

Al realizar estas comprobaciones detecté incidencias visuales (los botones se mostraban sobre el contenido) cuando el tamaño de la ventana se reducía. Para solucionarlo incluí al final del código CSS un media query que es un módulo de CSS para que el contenido se adapte a las características de pantalla del dispositivo en el que se esté mostrando la página.

@media es una regla-at formada por un grupo de reglas condicionales que se aplicarán si el dispositivo cumple los criterios que se definan en ella usando un media query.
Se incluye el media-type screen para indicar que el estilo CSS incluido en la regla se aplicará a pantallas de equipos (pc, tablet, móvil..)
A continuación añado el operador lógico and para continuar la cadena de reglas.

Estoy indicando a los navegadores que la barra social con la id .share-button2 (corresponde a la barra lateral fija) no se muestre (display:none)  cuando el tamaño de la ventana sea igual o inferior a 975px.




2.2. Botones oficiales de las Redes Sociales fijos en el sidebar del blog



Por último voy a tratar de agregar los botones oficiales de las Redes Sociales en el sidebar izquierdo que se mantendrán fijos y serán siempre visibles aunque el usuario se desplace por la pantalla.

Al tratarse de botones laterales resultan más visibles si son de diseño cuadrado y no rectángular pero los que proporcionan las redes sociales para compartir contenido son en formato alargado.
He tratado de modificar la imagen pero sin éxito.

Mis conocimientos por el momento son limitados así que he recurrido a un truco para solucionar temporalmente este problema. Cuando encuentre la "fórmula mágica", sin recurrir a las páginas que proporcionan plugins para agregarlos, actualizaré este post.

El truco consiste en añadir una nueva imagen (botón cuadrado) sobre los botones oficiales y hacer que la imagen del botón que proporcionan las redes sociales sea invisible aplicando opacidad 0. El problema es que aunque ahora se ve solo la nueva imagen del botón, ésta no enlaza con las redes sociales porque la nueva imagen solo es una imagen, no tiene los enlaces a las redes sociales. Para poder hacer clic sobre la nueva imagen y que el enlace permita compartir en las redes sociales tengo que superponer el botón oficial (que está transparente) sobre la nueva imagen que he añadido. Esto lo consigo con la propiedad CSS z-index.

Antes de realizar ningún cambio, hago una copia de seguridad de la plantilla.

A continuación sigo los pasos descritos en el ejemplo de los botones oficiales de las Redes Sociales bajo el título de las entradas (1.3.) donde había añadido una nueva etiqueta con el contenido de los botones sociales oficiales,

<b:includable id='botonessharePost' var='post'>.....</b:includable>.....hacer clic para ver su contenido.

Voy al menú Tema (antes Plantilla)  →  Editar HTML, busco el código correspondiente al widget Entradas del blog con CTRL + F y escribo dentro del cuadro de búsqueda   id='blog1' .

El buscador nos situará en una línea igual o muy parecida a la siguiente,

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog' version='1'>

a la que seguirá  <b:widget-settings>...</b:widget-settings> con los ajustes del gadget y las etiquetas <b:includable> para definir los elementos que se incluyen dentro del gadget.

Voy a añadir un nuevo elemento dentro del gadget Entradas del blog para los botones sociales fijos creando una nueva etiqueta <b:includable>, que identifico con el nombre 'bot_fijos_sharePost' y que voy a añadir tras la última etiqueta <b:includable>...</b:includable>.

<b:includable id='bot_fijos_sharePost' var='post'>

   <ul id='fijocompartirpost'>
      
      <li id='imagenlogoblog'><img id='imagenlogo' src='URL imagen logo'/></li>

      <li id='twitterfijo'><img alt='Twittear' id='fotoTwitter' src='URL imagen boton Twitter'' width='52px'><a class='twitter-share-button' data-lang='es' data-size='large' data-via='USUARIO TWITTER' href='https://twitter.com/share' rel='nofollow' target='_blank'>Twittear</a></img>
         <script>
         !function(d,s,id){
         var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
         if(!d.getElementById(id)){js=d.createElement(s);
         js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
         fjs.parentNode.insertBefore(js,fjs);
         }}(document, 'script', 'twitter-wjs');
         </script>
      </li>

      <li id='facebookfijo'><img alt='Compartir en Facebook' id='fotofacebook' src='URL imagen botón Facebook' width='50'/><div class='fb-share-button' data-layout='button' data-mobile-iframe='true' data-size='large'><a class='fb-xfbml-parse-ignore' href='https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2FDOMINIOBLOG%2F&amp;src=sdkpreparse' rel='nofollow' target='_blank'>Compartir en Facebook</a></div>
         <div 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/sdk.js#xfbml=1&amp;version=v2.9";
         fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'facebook-jssdk'));
         </script>
      </li>

      <li id='googleplusfijo'><g:plus action='share' annotation='none' expr:href='data:post.sharePostUrl.canonical.http' expr:size='data:size' height='59'/>
         <script type='text/javascript'>
           window.___gcfg = {
           lang: 'es',
           annotation: 'none',
           rel= 'nofollow',
           parsetags: 'onload'};
         </script>
      </li>
   </ul>

</b:includable>


Al igual que para el ejemplo de los botones sociales oficiales bajo el título de las entradas, añado dentro de la nueva etiqueta <b:includable> una lista no ordenada para la barra social, donde la etiqueta <ul> la nombro 'fijocompartirpost'  y las etiquetas <li> corresponden a cada uno de los botones.

Para la barra social fija he designado un nombre para cada elemento <li> de la lista (botones sociales) que me va a permitir aplicarles estilo individual con CSS.

data-via="USUARIO TWITTER"
En mi caso sería data-via="prodpersonal" (nombre del usuario de Twitter sin @).

href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2FDOMINIO BLOG%2F&amp;src=sdkpreparse"
En mi blog de prácticas he incluido prodpersonal.blogspot.com.

El texto en morado se puede modificar. Se trata del enlace que se mostrará cuando no se cargue la imagen del botón. El botón de Google mostará un +1.

He añadido una nueva etiqueta <li> al principio con id='imagenlogo' porque se me presentó un problema al compartir en Google Plus las entradas o post que no contienen imágenes.
Al hacer clic sobre el botón de Google Plus la ventana que se abría mostraba la primera imagen del blog, que en el caso de mi blog de prácticas es el botón de Twitter, lo que resulta inaceptable.
Intenté solucionar el problema incluyendo la imagen representativa del blog dentro de la cabecera pero incomprensiblemente seguía tomando la imagen del botón de Twitter al compartir la entrada por Google Plus.

Al final encontré la solución gracias a +Oloman en su blog www.oloblogger.com donde advierte que las imágenes deben tener un ancho superior a 506px para que Google Plus las coja.
Efectivamente una vez modifiqué el tamaño de la imagen, el botón share de Google Plus muestra la imagen representativa del blog cuando el post a compartir no contiene ninguna.



2.2. Estilo CSS para personalizar los botones oficiales de las Redes Sociales fijos en el sidebar del blog


Dentro de la ventana de edición HTML de la plantilla añado las siguientes líneas encima de  </b:skin> (buscar con CTRL+F).

 /*Botones oficiales RRSS para compartir fijos en lateral izdo. del blog
--------------------------------------------------------------------------------------------*/

#fijocompartirpost li {      /*estilo para cada botón */
display: block;                  /*los iconos se muestran en línea*/
}

#imagenlogo {             /*imagen del logo del blog para los posts sin imagen*/
display: none;           /*para que no sea visible*/
}

#twitterfijo {                   /*botón Twitter*/
position: fixed;             /* posición fija en pantalla siempre visible*/
top: 411px;                 /*margen superior*/
left:0%;                      /*siempre margen 0 a la izquierda con diferentes formatos de pantalla*/
}

#fotoTwitter {              /*imagen botón Twitter*/
position: absolute;    /*posición absoluta dentro de la posición fija*/   
left: 0%;                     /*siempre margen 0 a la izquierda con diferentes formatos de pantalla*/
top: -45%;               /*margen superior dentro del contenedor botón*/
z-index: -999;       /*por debajo del botón oficial de Twitter*/
}

#twitterfijo .twitter-share-button {    /*botón oficial Twitter*/
opacity: 0;                                            /*opacidad 0 para no ser visible*/
position: relative !important;         /*posición relativa dentro del contenedor botón*/
top: -12px !important;                   /*margen superior*/
}
  
#facebookfijo {           /*botón Facebook*/
position: fixed;         /* posición fija en pantalla siempre visible*/
top: 468px;             /*margen superior*/
left:0%;                  /*siempre margen 0 a la izquierda con diferentes formatos de pantalla*/
}

#fotofacebook {                    /*imagen botón Facebook*/
position: absolute;              /*posición absoluta dentro de la posición fija*/
left: 0%;                               /*siempre margen 0 a la izquierda con diferentes formatos de pantalla*/
top: -52%;                        /*margen superior dentro del contenedor botón*/
z-index: -999;                /*por debajo del botón oficial de Facebook*/
border-radius:5px;     /*redondea las esquinas de la imagen*/
}

#facebookfijo .fb-share-button {      /*botón oficial Facebook*/
opacity: 0;                                          /*opacidad 0 para no ser visible*/
position: relative !important;       /*posición relativa dentro del contenedor botón*/
top: -12px !important;                 /*margen superior*/
}

#googleplusfijo {       /*botón oficial share Google Plus*/
position: fixed;        /* posición fija en pantalla siempre visible*/
top: 510px;            /*margen superior*/
left:0%;                 /*siempre margen 0 a la izquierda con diferentes formatos de pantalla*/
}

#fijocompartirpost img:hover {     /*hover sobre barra botones sociales*/
opacity: 0.7;                                    /*transparencia para el efecto hover*/
}

@media screen and (max-width: 975px) {    /*código para otros dispositivos móviles*/
#fijocompartirpost li {                                     /*barra botones sociales*/
display: none;                                                 /*si la pantalla es inferior a 975px no se muestran los botones*/
}
}


Los botones se muestran como tal como se ve en la siguiente imagen,

Agregar botones oficiales de las RRSS fijos en lateral del blog


Por último tengo que indicar en la plantilla que los botones sociales se muestren unicamente al acceder de forma individual a las entradas.

Localizo dentro de la plantilla la etiqueta <div class='post-header'> (la segunda en la plantilla) y añado el código que se muestra en el cuadro.

<div class='post-header'>

   <b:if cond='data:blog.pageType == "item"'>
        <b:include cond='data:post.sharePostUrl' data='post' name='bot_fijos_sharePost'/>
   </b:if>

</div>