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>



8 de mayo de 2017

Añadir Twitter Cards para compartir las entradas del blog

Añadir Twitter Cards a un blog


El poder de Twitter


Inicié este blog recogiendo mis pequeños avances diarios en el aprendizaje de las materias relacionadas con las TIC, en concreto con el diseño web. Ha transcurrido un año y todos mis avances y también dificultades, con sus momentos de frustración, no han hecho más que aumentar mi entusiasmo por todas estas materias.

Nunca me han interesado las redes sociales, debido principalmente a mi escaso tiempo libre, y si comencé a hacer uso de ellas (Google + y Facebook) fue por motivos profesionales.

Ahora me doy cuenta de su importancia.

Hace tan solo unos días que me registré en Twitter (me resistí tenazmente aunque muchos con insistencia me advertían de mi error) y, efectivamente, mi error ha sido descomunal porque estar en Twitter me ha permitido en unos días recibir información y entrar en contacto con grandes profesionales (mucho más que en todo un año).



¿Qué son las Twitter Cards?


Como he comentado, Twitter era un completo desconocido para mí hasta hace poco. Es inevitable cometer errores en esta situación.

Intenté publicar una entrada de este blog en Twitter mediante la barra de redes sociales que incorpora Blogger al pie de las entradas pero el resultado fue algo decepcionante.

Tuit publicado sin Twitter Cards


Sólo se muestra en la primera línea el nombre y usuario de Twitter junto con la fecha del tuit. A continuación se muestra el título del blog con su descripción y en la última línea el enlace a la entrada (Twitter acorta la dirección URL automáticamente) que no cuenta para el límite de 140 caracteres por tuit.

Es decir, mi tuit en absoluto destaca entre los demás que incorporan más información e imágenes.
Me pregunté cual podría ser el motivo para esta enorme diferencia entre unas publicaciones y otras y encontré la respuesta como siempre investigando en blogs y webs especializadas.

La clave está en las Twitter Cards.

Las Twitter Cards permiten que las entradas compartidas en Twitter se muestren con un formato enriquecido e incorporen el título y resumen con la posibilidad de incluir una imagen o varias.

Según informa la página oficial de Twitter, con las Twitter Cards "se pueden añadir fotos y vídeos a los tuits, ayudando a mejorar el tráfico al sitio web añadiendo unas pocas líneas de marcado a la página web o blog que permitirán que los usuarios que compartan el enlace en Twitter tengan una tarjeta añadida al tuit visible a sus seguidores".

Para más información, el post de Antonio Cambronero (Blogpocket.com) es una excelente guía que explica, de forma fácil y accesible a principiantes, cómo funcionan y qué ventajas tiene el incorporar las Twitter Cards a un blog.

Para saber los tipos de Twitter Cards existentes recomiendo visitar el blog de Carlos Miñana (SEMrush Blog).


El resultado de añadir las Twitter Cards al blog es el siguiente. El cambio como se puede ver es notable ya que ahora el tuit incorpora un cuadro con una imagen de la entrada (la primera imagen de la entrada), el título de la entrada y la descripción de búsqueda (siempre que hayamos registrado esta información dentro de Configuración de la entrada).

Ejemplo Twitter Cards (Summary Card)
Ejemplo de Summary Card (Twitter Cards) 


Conviene no dejar en blanco el campo de la descripción de búsqueda de las entradas del blog.
Esta etiqueta meta descripción es fundamental para que los robots de búsqueda (Google, Bing, Yahoo, etc) sepan de qué trata la entrada y obtener información esencial sobre el blog. Además esta descripción aparece en los resultados de los motores de búsqueda, bajo el enlace a la entrada, por lo que debe contener una descripción breve y lo más ajustada al tema tratado en la entrada.



¿Cómo añadir las Twitter Cards al blog?


Para crear las Twitter Cards necesitamos añadir unas etiquetas meta (meta tags) a la plantilla, lo que nos obliga a entrar en la edición de la plantilla del blog. Como siempre en estos casos, antes de modificar nada, hacemos previamente una copia de seguridad.

A continuación nos dirigimos al menú de Blogger:
Tema (antes Plantilla) → Editar HTML.

Buscamos <b:skin>, que se encuentra dentro de la etiqueta <head>,  y pegamos justo encima de <b:skin> las siguientes líneas con las etiquetas meta (meta tags):


<!-- Etiquetas  meta para las Twitter Card-->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@MIUSUARIODETWITTER' name='twitter:site'/>
<meta content='@MIUSUARIODETWITTER' name='twitter:creator'/>

    <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
    <b:else/>
      <meta content='URL de imagen del blog' name='twitter:image'/>
    </b:if>


    <b:if cond='data:blog.pageName'>
      <meta expr:content='data:blog.pageName' name='twitter:title'/>
    <b:else/>
      <meta expr:content='data:blog.title' name='twitter:title'/>
    </b:if>

    <b:if cond='data:blog.metaDescription'>
       <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <b:else/>
       <meta expr:content='data:post.snippet' name='twitter:description'/>    
    </b:if>
  
       <meta expr:content='data:post.sharePostUrl' name='twitter:url'/>
<!-- Fin Etiquetas  meta para las Twitter Card-->


<meta content='summary_large_image' name='twitter:card'/>

La clase de Twitter Card es Summary Card with Large Image. Esta clase de Twitter Card, junto con la Summary Card, es la más utilizada porque incluye título, descripción, imagen y atribución de la cuenta de twitter. La Summary Card with Large Image permite mostrar una imagen más grande mientras que la Summary Card incluye thumbnail (imagen en miniatura). Estas dos clases se adaptan a cualquier tipo de contenido, de ahí su popularidad.


@MIUSUARIODETWITTER

Es lo único que debemos modificar, el usuario de Twitter, en mi caso sería @prodpersonal.

◯   <b:if cond='data:blog.postImageUrl'>
       <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>


Si la entrada contiene imágenes, la Twitter Card será de clase Summary Card with Large Image e incluirá la primera imagen en tamaño real del post (blog.postImageUrl). Por eso es conveniente incluir tras el título de la entrada una imagen de calidad y que sea representativa del contenido. Yo he incluido una imagen de 820 x 460 píxeles, formato PNG. El formato PNG pesará más (archivo de más tamaño que JPG) porque no comprime la imagen, como sí lo hace el formato JPG.

◯   <b:else/>
       <meta content='URL de imagen del blog' name='twitter:image'/>


Si la entrada no tiene imágenes, la Twitter Card mostrará otra imagen (aquí ponemos el URL de la imagen que se mostrará por defecto cuando la entrada no contenga ninguna imagen).

🔵   <b:if cond='data:blog.pageName'>
      <meta expr:content='data:blog.pageName' name='twitter:title'/>

Si la entrada tiene título, la Twitter Card mostrará el título de la entrada (blog.pageName)

🔵   <b:else/>
      <meta expr:content='data:blog.title' name='twitter:title'/>
    
Si la entrada no tiene título, la Twitter Card mostrará el título del blog (blog.title).

🔴   <b:if cond='data:blog.metaDescription'>
       <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

Si la entrada tiene descripción, la Twitter Card mostrará la descripción de la entrada (blog.metaDescription)

🔴   <b:else/> 
       <meta expr:content='data:post.snippet' name='twitter:description'/> 

Si la entrada no tiene descripción, la Twitter Card mostrará los primeros 140 caracteres del contenido de la entrada (post.snippet).

⬤   <meta expr:content='data:blog.url' name='twitter:url'/>

La Twitter Card mostrará por último la dirección URL del blog (data:blog.url).



Validar y comprobar el resultado de las Twitter Cards


Una vez que están añadidas las meta tags de las Twitter Cards, tenemos que entrar con nuestro usuario en Twitter para que nos autorice las Twitter Cards que hemos añadido al blog. Para eso debemos validarlo en Card Validator de Twitter. Ahí introducimos el URL de cualquier entrada del blog y hacemos clic en Preview Card. 
Solo nos resta esperar a que Twitter nos confirme que están autorizadas y sí existe algún problema para su uso. Aunque leí en varios foros y blogs que puede tardar días la confirmación, en mi caso en unos minutos pude ver el resultado de aplicar la Twitter Card al blog.

Prueba de Twitter Card en Card Validator
Summary Card with Large Image