d
Topic
Posts:
1
April 28, 2016

Facebook is grabbing the wrong image when sharing our site, I want our logo image to be shared! How can I change this?

Hello,

When sharing the link to my site on Facebook, a product image shows but I would like our logo to show. I have read several previous discussions on how to fix this issue but I'm not familar with inputting code at all. I'm not sure where or how to input the necessary code to get the correct image to show. 

I have used "Facebook's Debug" so here are the Warnings found but I don't know how to correct them or which ones relate to my image issue. Below are the Warnings.

Warnings That Should Be Fixed

  • Inferred Property

    The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

  • Missing Required Property

    The 'og:type' property is required, but not present.

  • Inferred Property

    The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.

  • Inferred Property

    The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.

  • Inferred Property

    The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.

  • Inferred Property

    The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

  • Share App ID Missing

    The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.

If someone could guide me through this problem, I would greatly appreciate the help! :-)

i
Replies
Tomas W Shopify Employee
Posts:
23
May 04, 2016

Hey Thomas,

Tomas from the Shopify Guru team here!

Those warnings the Facebook Debug tool is giving you are asking you to specify information in the <head> section of your website (in Shopify the <head> of the theme.liquid) so that when you link your store it can find the image, title, description, etc to pull for the link.

You can find a good example of how to set this up in this Facebook Support Article on the topic, you just need to define the above attributes in the <head> section of your HTML code and you can test if it is working correctly by trying to post a link to Facebook.

For more information on what the properties themselves are and what values they should have, you can check out The Open Graph protocol website where they are all defined.

I hope you find this helpful Thomas,

Tomas W

Posts:
18
5 months ago

Don't buy this dudes snake oil apps.... :P

 

use this code:

 

 {%- capture og_image_tags -%}{% for image in product.images limit:1 -%}<meta property="og:image" content="http:{{ product.featured_image | product_img_url: '1200x1200' }}">{% endfor -%}{% endcapture -%}
    {%- capture og_image_secure_url_tags -%}{% for image in product.images limit:1 -%}<meta property="og:image:secure_url" content="https:{{ product.featured_image | product_img_url: '1200x1200' }}">{% endfor -%}{% endcapture -%}

used this in the debut them.  works.  selects only the featured image 

Posts:
18
5 months ago

Dude, implementing what your having people pay for is too easy.  Why you ripping people off?  Or attempting...

Posts:
18
5 months ago

This accomplishes what you're charging people for:

 

 {%- capture og_image_tags -%}{% for image in product.images limit:1 -%}<meta property="og:image" content="http:{{ product.featured_image | product_img_url: '1200x1200' }}">{% endfor -%}{% endcapture -%}
    {%- capture og_image_secure_url_tags -%}{% for image in product.images limit:1 -%}<meta property="og:image:secure_url" content="https:{{ product.featured_image | product_img_url: '1200x1200' }}">{% endfor -%}{% endcapture -%}

Posts:
18
5 months ago

This forum is too littered with people trying to sell crap rather than people helping each other.... I would love to see these posts limited to REAL assistance of people's needs rather than people selling things.