Como construir un artículo instantáneo de facebook de forma manual en blogger

No se si servirá para wordpress, pero lo intenté con blogger y si dió resultado..

Como sabrás los artículos instantáneos de facebook son versiones en html de tus mismas entradas de tu blog o sitio web que quieres que sean artículos instantáneos. así en resumen creas una entrada y de ahí lo trasladas a facebook para convertirlos en artículos instantáneos.. pero eso se hace mediante un plugin en wordpress o mediante el rss de blogger en blogger. Esto es de manera automática.. pero hay una manera de hacerlo manual y eso pasaremos a explicar..

La razón por la que que se hace un artículo instantáneo de manera manual... es porque algo salió mal con el plugin de wordpress o algo está mal con el rss de blogger asi que en vez de hacerlo automáticamente lo hacemos manualmente es decir, escribimos el codigo html del artículo instantáneo de manera manual.

Esto es para blogger..

Normalmente nos proveeemos de una plantilla y vamos remplazando las partes que vienen por defecto por las que corresponden a nuestro artículo.

PLANTILLA

Metodo.- mejor copiar toda la plantilla y pegarlo en block de notas o en word en modo conservar formato de origen.. y luego conforme se avanza se va borrando lo rojo.. y al final solo copias todo (de word) y lo pegas en el artículo que van a reemplazar (previamente habría que borrar el articulo que nos formó el rss de blogger.. pero no hay problema, queda una copia todavía en artículos de desarrollo).

IMPORTANTE: Si el rss que pusiste para artículos de "producción" te va actualizando constantemente lo que hay en tu blog y lo va colocando en artículos de producción.. mejor borras ese rss y solo te quedas con el rss que va en artículos de desarrollo.

<!doctype html>

<html lang="en" prefix="op: http://media.facebook.com/op#">

<head>

<meta charset="utf-8">

<link rel="canonical" href="http://example.com/article.html (Es La Url de la entrada)">

<meta property="op:markup_version" content="v1.0">

<meta property="fb:use_automatic_ad_placement" content="false">

Otro meta (agregado) para ubicar el anuncio donde uno quiere… 100 palabras de distancia el primero aconseja facebook y el Segundo a 200 del primer anuncio (una imagen cuenta como 70 palabras). Importante saber que si pones "false", tendrás la opción de poner tu los codigos de los anuncios respetando las distancias que te indica facebook. Y si pones "true" (verdadero), facebook te pondrá los anuncios automáticamente.

</head>

<body>

<article>

<header>

Aquí abajo entre <h1> y >/h1> va el título de la entrada

<h1>Faucetbox cierra sus actividades online el 19 de diciembre del 2016</h1>

las fechas de abajo se coloca el día en que nació “la entrada en el blog” mas no la fecha de la última modificación (las 2 fechas son iguales)

<time class="op-published" datetime="2016-12-19">diciembre 19, 2016</time> fecha 1

<time class="op-modified" dateTime="2016-12-19">diciembre 19, 2016</time> fecha 2

<address>

<a rel="facebook" href="https://www.facebook.com/shoper.vilca">Luis Torres</a>

Aquí arriba se pone una url de un perfil, sea facebook, linkedin etc.. yo puse mi perfil de facebook y mi nombre Luis Torres

Practicante en posicionamiento en buscadores u optimización de motores de búsqueda SEO.

</address>

Y aquí arriba puse mi cargo o lo que creo que es mi area en que me desempeño

Lo de abajo es la imagen ancla o imagen principal de mi entrada, la etiqueta <figure> también las otorga Facebook.. o copiar este modelo y poner la url de su imagen ancla o principal

<figure>

<img src="https://3.bp.blogspot.com/-hSBx2PdwVIk/WLl0sOl5jUI/AAAAAAAABMk/uy6QgiI8m3FrKgblDC2qCYcp-ACLcB/s1600/recoger%2Bsatoshis%2Bvirtualpub.jpg" />

</figure>

</header>

 El cuerpo del articulo empieza aquí

 pero antes se coloca el código de seguimiento de analitics que tiene el blog o sitio web.. y hay que reemplazar desde <script> hasta </script> y poner vuestro código

<figure class="op-tracker">

<iframe>

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-6xxxxxxx65xx6-4', 'auto');

ga('send', 'pageview');

</script>

</iframe>

</figure>

<p> Primer párrafo de tu artículo aquí </p>

<p> Un párrafo de tu artículo </p>

IMPORTANTE QUE SI TENEIS OTRA O VARIAS IMAGENES AQUÍ COLOCAR EL CÓDIGO DE LA IMAGEN ANCLA DE ARRIBA Y SOLO REEMPLAZAR LA URL COMO LO PONGO AQUÍ

<figure>

<img src="https://3.bp.blogspot.com/-hSBx2PdwVIk/WLl0sOl5jUI/AAAAAAAooooogiI8m3FrKgblDC2qCYcp-ACLcB/s1600/recoger%2Bsatoshis%2Bvirtualpub.jpg" />

</figure>

<p> Un párrafo de tu artículo </p>

 tag o etiqueta si tu articulo tiene video

<figure>

<video>

<source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />

</video>

</figure>

 Y lo principal.. el anuncio de facebook que irá en tu artículo instantáneo. Remplaza el número por el tuyo que creaste en Ubicaciones (o borra todo lo comprendido entre <figure class=”op-ad”> y </figure> y coloca el tuyo que esta en Ubicaciones >>artículos intantaneos >> rectángulo. De Audience network.

En la etapa previa a mandar a revisión no necesitas poner los anuncios todavía..

Y después de aprobado puedes optar por "false" o "true" como se dijo mas arriba.

<figure class="op-ad">

<iframe width="300" height="250" style="border:0; margin:0;" src="https://www.facebook.com/adnw_request?placement=6262000000717_626000075716&adtype=banner300x250"></iframe>

</figure>

<footer>

 Créditos, osea autor.. (borrar Luis Torres (soy yo) y colocar el autor del post o artículo, o entrada)

<aside>Luis Torres</aside>

 Derechos de autor, si queres copia y pega lo de abajo

</footer>

</article>

</body>

</html>

Detalles importantes para completar de saber como se hace este tipo de artículo

1.- El tag o etiqueta para formar enlaces dentro del artículo.. por ejemplo si pones.. toda la información Aquí (y el Aquí es un enlace que has hecho en blogger) se hace con las etiquetas <a href=...> Texto <a> ejemplo abajo. Ademas este no abre otra pestaña.. (quitar lo rojo y poner la url a donde irá la persona)

<a href="http://ganadineroconbitcoin.blogspot.pe/2017/05/gana-bitcoins-de-forma-gratis.html">Texto por ejem Aquí, o pegar el enlace otra vez</a>

2.- Todas las tags o etiquetas que usará facebook para construir artículos instantaneos y el modelo de artículo instantaneo se encuentra aquí https://developers.facebook.com/docs/instant-articles/reference Los tags para imagenes, videos, y otras cosas más se encuentran en el menú de la izquierda de ese sitio

3.- Es necesario que conozcas la url de tu imagen ancla para colocarlo arriba.. si tienes más imágenes también es necesario conocer esa url y reemplazar esa dirección para ponerlo en nueva etiqueta <figure> </figure>

4.- Para copiar la url de las imágenes como sabrás se hace con el clik derecho del mouse y seleccionar Url... En mi caso mi ratón anda mal y lo hago por otro metodo más largo. Para ver como se hace desde una pc y dispositivo móvil aquí lo puedes ver https://support.google.com/websearch/answer/118238?hl=es-419

5.- Tu blog debe tener un código de seguimiento de google analitics.. aunque algunos dicen que se puede obviar colocarlo.. yo tengo ese código en mi blog y no se como sería si no lo pusiera.

¿Como consigo mi código de anuncio que irá en mi artículo instantáneo?

Pues primero debes crear una ubicación... hay tutoriales.. hay que crear entonces una ubicación. Una vez creado entonces simplemente lo ubicas, desde audience network >> en Ubicaciones y das click al botón Obtener código

Luego de dar click en obtener código te saldrá articulos instantaneos y seleccionas el que dice rectángulo (ojo, es importante que salga artículos instantáneos y rectángulo, si no tienes eso quizás hayas hecho algo mal o te faltan pasos aún)