Cloudbleed
febrero 24, 2017
¿Es posible crear videos usando fragmentos cortos de los videos de alguien más sin infringir derechos de autor?
mayo 22, 2017

Imagen destacada para Open Graph de artículo en blog de Shopify

Imagen Destacada Open Graph Artículo Blog Shopify

Con el siguiente código podrán hacer que el artículo para el blog en Shopify muestre en Open Graph la imagen destacada como la imagen predeterminada, o en su defecto, tome la primera imagen que encuentre en el contenido del artículo. Obviamente, deberán tener asignada la imagen destacada en su artículo para que funcione.

NOTA: Esto no hará nada para mostrar la imagen destacada dentro de la lista de artículos, sólo la mostrará en las etiquetas Open Graph.

Sólo deberán modificar el snippet fb-open-graph-tags.liquid de su tienda. Deberán entrar a Themes, dar clic en los 3 puntos horizontales y escoger Edit HTML/CSS. Luego buscan en el árbol de navegación: Snippets y ahí seleccionar el archivo fb-open-graph-tags.liquid.

Código a agregar:

{% if article.image %}
<meta property="og:image" content="http:{{ article.image | img_url: 'original' }}" />
<meta property="og:image:secure_url" content="https:{{ article.image | img_url: 'original' }}" />
{% else %}
{% assign img_tag = '<' | append: 'img' %}
{% if article.content contains img_tag %}
{% assign src = article.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
{% if src %}
<meta property="og:image" content="http:{{ src }}" />
<meta property="og:image:secure_url" content="https:{{ src }}" />
{% endif %}
{% endif %}
{% endif %}

Código Original:

{% if template contains 'product' %}
<meta property="og:type" content="product" />
<meta property="og:title" content="{{ product.title | strip_html | escape }}" />
{% for image in product.images %}
<meta property="og:image" content="http:{{ image.src | product_img_url: 'grande' }}" />
<meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: 'grande' }}" />
{% endfor %}
<meta property="og:price:amount" content="{{ product.price | money_without_currency }}" />
<meta property="og:price:currency" content="{{ shop.currency }}" />
{% elsif template contains 'article' %}
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ article.title | strip_html | escape }}" />
{% assign img_tag = '<' | append: 'img' %}
{% if article.content contains img_tag %}
{% assign src = article.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
{% if src %}
<meta property="og:image" content="http:{{ src }}" />
<meta property="og:image:secure_url" content="https:{{ src }}" />
{% endif %}
{% endif %}
{% else %}
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ page_title | escape }}" />
{% if settings.use_logo %}
<meta property="og:image" content="http:{{ 'logo.png' | asset_url }}" />
<meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}" />
{% endif %}
{% endif %}
{% if page_description %}
<meta property="og:description" content="{{ page_description | escape }}" />
{% endif %}
<meta property="og:url" content="{{ canonical_url }}" />
<meta property="og:site_name" content="{{ shop.name }}" />

Código Modificado:

{% if template contains 'product' %}
<meta property="og:type" content="product" />
<meta property="og:title" content="{{ product.title | strip_html | escape }}" />
{% for image in product.images %}
<meta property="og:image" content="http:{{ image.src | product_img_url: 'grande' }}" />
<meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: 'grande' }}" />
{% endfor %}
<meta property="og:price:amount" content="{{ product.price | money_without_currency }}" />
<meta property="og:price:currency" content="{{ shop.currency }}" />
{% elsif template contains 'article' %}
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ article.title | strip_html | escape }}" />
{% else %}
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ page_title | escape }}" />
{% if settings.use_logo %}
<meta property="og:image" content="http:{{ 'logo.png' | asset_url }}" />
<meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}" />
{% endif %}
{% endif %}
{% if article.image %}
<meta property="og:image" content="http:{{ article.image | img_url: 'original' }}" />
<meta property="og:image:secure_url" content="https:{{ article.image | img_url: 'original' }}" />
{% else %}
{% assign img_tag = '<' | append: 'img' %}
{% if article.content contains img_tag %}
{% assign src = article.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
{% if src %}
<meta property="og:image" content="http:{{ src }}" />
<meta property="og:image:secure_url" content="https:{{ src }}" />
{% endif %}
{% endif %}
{% endif %}
{% if page_description %}
<meta property="og:description" content="{{ page_description | escape }}" />
{% endif %}
<meta property="og:url" content="{{ canonical_url }}" />
<meta property="og:site_name" content="{{ shop.name }}" />
luisescoffie
Digital Marketing Manager

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *