Facebook pulling the wrong image into a URL promotion post

JMDArts
New Member
4 0 0

Thanks sir very nice my updating facebook 

pawankr.
0 Likes
Roger_Bunch
Tourist
17 0 3

I have tried and tried to no avail to get Facebook to show a particular image when linking to the main site.
below is the code, did I do something wrong? Im going nuts trying to get this to work. I have never seen a platform so difficult to implement these changes in.
 

<!-- /snippets/social-meta-tags.liquid -->
{%- assign og_title = page_title  -%}
{%- assign og_url = canonical_url -%}
{%- assign og_type = 'website' -%}
{%- assign og_description = page_description | default: shop.description | default: shop.name -%}

{%- if template.name == 'product' -%}
  {%- assign og_title = product.title | strip_html -%}
  {%- assign og_type = 'product' -%}
  {%- capture og_image_tags -%}{% for image in product.images limit:3 -%}<meta property="og:image" content="http:{{ image.src | product_img_url: '1024x1024' }}">{% endfor -%}{% endcapture -%}
  {%- capture og_image_secure_url_tags -%}{% for image in product.images limit:3 -%}<meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: '1024x1024' }}">{% endfor -%}{% endcapture -%}

{%- elsif template.name == 'article' -%}
  {%- assign og_title = article.title | strip_html -%}
  {%- assign og_type = 'article' -%}
  {%- assign og_description = article.excerpt_or_content | strip_html -%}
  {%- if article.image -%}
    {%- capture og_image_tags -%}<meta property="og:image" content="http:{{ article.image | img_url: '1024x1024' }}">{% endcapture -%}
    {%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https:{{ article.image | img_url: '1024x1024' }}">{% endcapture -%}
  {%- endif -%}

{%- elsif template.name == 'password' -%}
  {%- assign og_title = shop.name -%}
  {%- assign og_url = shop.url -%}
  {%- assign og_description = shop.description | default: shop.name -%}
{%- endif -%}

<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ og_url }}">
<meta property="og:title" content="{{ og_title }}">
<meta property="og:type" content="{{ og_type }}">
<meta property="og:description" content="{{ og_description }}">
{%- if template.name == 'product' -%}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html }}">
  <meta property="og:price:currency" content="{{ shop.currency }}">
{%- endif -%}
{% if template == 'index' %} 
<meta property="og:type" content="website"> 
<meta property="og:title" content="{{ page_title }}"> 
<meta property="og:url" content="{{ canonical_url }}"> 
<meta property="og:description" content="{{ page_description }}">
<meta property="og:image" content="https://cdn.shopify.com/s/files/1/2161/0421/files/FHD-FB-FEED.jpg?4438955078689392123">
<meta property="og:image:secure_url" content="https://cdn.shopify.com/s/files/1/2161/0421/files/FHD-FB-FEED.jpg?4438955078689392123"> 
{% elsif template contains 'product' %}

{%- endif -%}
{{ og_image_tags }}
{{ og_image_secure_url_tags }}

{% if settings.social_twitter_link != empty %}<meta name="twitter:site" content="{{ settings.social_twitter_link | split: 'twitter.com/' | last | prepend: '@' }}">{% endif %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ og_title }}">
<meta name="twitter:description" content="{{ og_description }}">

 

http://www.fhdsupply.com
0 Likes
Jocelyn
New Member
2 0 0

Having same problem.  I've tried putting those codes in and nothing changes.  Hope to get a solution from shopify.

0 Likes
Roger_Bunch
Tourist
17 0 3

I am getting upset with Shopify and its lack of customer support. I am ready to move to BigCommerce. When I do rest assured I will do a video on why I changed providers

http://www.fhdsupply.com
0 Likes
Jocelyn
New Member
2 0 0

Roger, I can understand the frustration.  I too spent hours on this and wasted a whole day!  I found a solution and it worked.  This was the link that helped and it was not in snippets... it was in theme.liquid.  https://ecommerce.shopify.com/c/ecommerce-design/t/wrong-image-when-i-share-url-on-facebook-371859?f...

Give it a go or send me a message on my website.

It appears like it is a common issue so I don't know why we have to jump through hoops to get the answer.  

 

0 Likes
Roger_Bunch
Tourist
17 0 3

Thanks Jocelyn, After long hours of work, I think the following code should work for both Facebook links and Twitter. So far its working for me. I did this inside social-meta-tags.liquid
Im hoping after the super way too long CDN cache expires it does not go haywire.
(no thanks to shopify for support, all work done by PowerSurge Media & Frozen Head Distributing)

<!-- /snippets/social-meta-tags.liquid -->
{%- assign og_title = page_title  -%}
{%- assign og_url = canonical_url -%}
{%- assign og_type = 'website' -%}
{%- assign og_description = page_description | default: shop.description | default: shop.name -%}


{% if template == 'index' %}
<meta property="og:image" content="http://cdn.shopify.com/s/files/1/2161/0421/files/FHD-FB-FEED.jpg?3163227978516227209" />
 


{%- elsif template.name == 'product' -%}
  {%- assign og_title = product.title | strip_html -%}
  {%- assign og_type = 'product' -%}
  {%- capture og_image_tags -%}{% for image in product.images limit:3 -%}<meta property="og:image" content="http:{{ image.src | product_img_url: '450x450' }}">{% endfor -%}{% endcapture -%}
  {%- capture og_image_secure_url_tags -%}{% for image in product.images limit:3 -%}<meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: '450x450' }}">{% endfor -%}{% endcapture -%}
 
{%- elsif template.name == 'article' -%}
  {%- assign og_title = article.title | strip_html -%}
  {%- assign og_type = 'article' -%}
  {%- assign og_description = article.excerpt_or_content | strip_html -%}
  {%- if article.image -%}
    {%- capture og_image_tags -%}<meta property="og:image" content="http:{{ article.image | img_url: '1024x1024' }}">{% endcapture -%}
    {%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https:{{ article.image | img_url: '1024x1024' }}">{% endcapture -%}
  {%- endif -%}

{%- elsif template.name == 'password' -%}
  {%- assign og_title = shop.name -%}
  {%- assign og_url = shop.url -%}
  {%- assign og_description = shop.description | default: shop.name -%}
{%- endif -%}

<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ og_url }}">
<meta property="og:title" content="{{ og_title }}">
<meta property="og:type" content="{{ og_type }}">
<meta property="og:description" content="{{ og_description }}">
{%- if template.name == 'product' -%}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html }}">
  <meta property="og:price:currency" content="{{ shop.currency }}">
{%- endif -%}

{{ og_image_tags }}
{{ og_image_secure_url_tags }}

{% if settings.social_twitter_link != empty %}<meta name="twitter:site" content="{{ settings.social_twitter_link | split: 'twitter.com/' | last | prepend: '@' }}">{% endif %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ og_title }}">
<meta name="twitter:description" content="{{ og_description }}">
<meta name="twitter:image:alt" content="{{ og_title }}">
{{ twitter_image_tag }}

 

http://www.fhdsupply.com
0 Likes
Roger_Bunch1
Tourist
12 0 1

Just an update to everyone, due to some errors I had to move to a new account. Please refer to this one if any questions are asked or replies made.

http://www.fhdsupply.com
0 Likes
cubewalker
Shopify Partner
65 0 2

I think Facebook Debugger is not working very well. Even you input link and click "Scrape", it will have no response to update cache quite often. This should be the problem of Facebook. 

The Facebook Debugger is not very stable when we try to clear cache for testing. 

 

0 Likes
Funk_Era
New Member
1 0 0

Cubewalker thanks so much!!

Your original comment to add the below code to our social-media-meta-tags.liquid file fixed the issue for us. Like you mention Facebook Debugger is helpful but sluggish to update the cached image when clicking "Scape". We did our live testing in Facebook Messenger and saw the update happen there before the FB Debugger tool recoqnized the change.

<meta property="og:image" content="[YOUR IMAGE URL]"> 
<meta property="og:image:secure_url" content="[YOUR IMAGE URL]">

 

0 Likes
mariaferraro
Shopify Partner
1 0 0

It works! Thank you

0 Likes