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:
24
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:
27
December 12, 2016

Hi Thomas,

I have checked your homepage code and there is an og:image tag already set. Your problem is that the logo image you set is too wide to display.

The facebook share, is not that 'clever'. It won't help you to resize the image and display it in a proper way. 

So my suggestion is that you can find an online image editor. Re-edit your logo image. Make the new logo image aspect ratio to 2:1 (width:height). Then upload the new logo image from your shopify backend.

 

Also, i notice that if someone try to share your product page on facebook, that image display on facebook share will be your logo image. 

Our company have developed an small app to help shop owner improving their product's social presence. Using our app, you can customize different images to display on facebook share for each of your product.

If you are interested, you can give a try on our app, SEO Product Optimizer. Currently, it is still in beta version and totally free to use.

Good luck.

 

Posts:
18
9 days 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:
27
9 days ago

2 points:

  1. Besides paid version, we also offer a free version but with a smaller number of update allowed each month
  2. You only select the featured image of the product as the link preview image. When you are sharing the product link to Facebook, it requires approximately 2:1 width to height ratio link preview image. If you are providing a square image, it will probably distort. 
Posts:
18
7 days ago

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

Posts:
18
7 days 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
7 days 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.