9/27/2017

Cómo instalar los anuncios InFeed en Blogger (también In-Article)

Instalar los anuncios InFeed en Blogger,  es una de las cuestiones que tienen muchos usuarios de esta plataforma, desde que  AdSense hizo público  estos  nuevos bloques de  anuncios  nativos.

Hace apenas  unos  meses el programa Google AdSense  hizo públicos varios  nuevos  formatos  de  anuncios nativos, bloques  que se adaptan mejor a los sitios  web y que también resultan menos pesados.
Cómo instalar los anuncios InFeed en Blogger (también  In-Article)

Los  anuncios en cuestión son los llamados InFeed e  In-Article, dos bloques  que se adaptan muy bien a tus páginas  sin  importar el diseño que tengas y, con los que puedes  manipular  un poco más el diseño,  haciendo que se  vean más parecidos al contenido que tiene  tu sitio web.

Ventajas que tienen  este  nuevo  formato de  anuncios


Las  ventajas son bastante  destacables, cómo  el hecho de que se adaptan muy bien a nuestro contenido, cargan más  rápido y, puedes  diseñarlos –hasta cierto punto- cómo mejor te parezca, sobre  todo en el caso del  anuncio InFeed.

A esto hay que agregarle  que  son ideales para  todo  tipo de  dispositivos, lo que ayuda a que  nuestros  usuarios  tengan una  mejor  experiencia  al visitar el sitio web.

Cómo crear los  anuncios  InFeed In-Article

Crear uno de estos anuncios es bastante sencillo, basta con seguir el proceso normal para crear cualquier otro tipo de anuncio, escogiendo de las opciones.  Google ya ha publicado guías de instalación que son  muy  fáciles de entender.

Cabe mencionar que debes tener activado este tipo de  anuncios para tu cuenta, como sucede con el anuncio de  contenido relacionado.

Cómo instalar anuncios  In-Article

El proceso de  instalación de este anuncio es bastante  sencillo, basta con entrar al editor de entrada, escoger la opción de HTML y  pegar el código  en el lugar deseado. Cabe  aclarar que se debe poner en medio del contenido y no inmediatamente  después  del título de la entrada.

Hay formas de poner este código por medio del editor de plantilla,  para no tener que hacerlo entrada por entrada, pero implica el uso de javaScript y puede que no se genere la adaptación correcta en todos  los  artículos.

Cómo instalar el  anuncio InFeed en Blogger


Instalar el  anuncio InFeed en Blogger es algo que  si me dio algo de problemas y buscando en la web no encontré un tutorial sobre  el tema, sin embargo, tomando información de  varios  sitios, logré acomodar el anuncio de forma correcta, para que aparezca en todos los feed, no sólo en la página principal.

Lo que  debes hacer es ir al editor de plantillas y buscar la siguiente línea de código:

<b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>
    <!-- Ad -->
        <b:if cond='data:post.includeAd'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 3'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </div>

Una vez la ubiques debes reemplazarla por el siguiente código:

<b:loop index='postNum' values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
       <div expr:class='"post-outer post-numero-" + data:postNum'>
      <b:include data='post' name='post'/>
  <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>
        <!-- Ad -->
        <b:if cond='data:postNum == 3'>
          <div class='inline-ad'>
<!-- cambia esto por el código de  tu anuncio -->
          </div>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </div>

Recuerda que debes parsear el código de  tu anuncio para que sea asimilado de forma  correcta por la plantilla.

Algo más que debes tener  en cuenta a la hora de instalar tu anuncio InFeed, es escoger  el lugar donde aparecerá. Para  eso fíjate en la línea <b:if cond='data:postNum == 3'>. Reemplazando el número que aparece ahí, podrás mover el anuncio a  tu gusto, ten en cuenta que  se comienza a contar desde cero, por lo que si dejas el 3,  el anuncio aparecerá debajo del cuarto artículo, mientras  que si lo cambias por el número 2, el anuncio aparecerá como cuarto en tu feed.

No hay comentarios.: