No image when I share URL on facebook - The following required properties are missing: fb:app_id

Highlighted
New Member
1 0 0

I've been changing 1200x628 png images in Preferences / Social sharing image preview, but no matter what I do, Facebook always displays no image icon when website URL is shared. Facebook debug page shows following error: The following required properties are missing: fb:app_id

How can I fix this, any ideas?

Here is the code from social-media-info.liquid

 

{% comment %}
Facebook Open Graph meta tags
{% endcomment %}

<meta name="author" content="{{ shop.name }}">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:site_name" content="{{ shop.name }}">

{% capture og_image_fallback %}
<meta property="og:image" content="https:{{ settings.og_image_fallback | img_url: '600x600' }}">
<meta property="og:image:secure_url" content="https:{{ settings.og_image_fallback | img_url: '600x600' }}">
<meta property="og:image:width" content="{{ settings.og_image_fallback.width }}">
<meta property="og:image:height" content="{{ settings.og_image_fallback.height }}">
<meta property="og:image:alt" content="{{ settings.og_image_fallback.alt }}">
{% endcapture %}

{% if template contains 'product' %}
<meta property="og:type" content="product">
<meta property="og:title" content="{{ product.title | strip_html | escape }}">
{% if product.media.size > 0 %}
{% for media in product.media limit:3 %}
<meta property="og:image" content="https:{{ media | img_url: '600x' }}">
<meta property="og:image:secure_url" content="https:{{ media | img_url: '600x' }}">
<meta property="og:image:width" content="{{ media.width }}">
<meta property="og:image:height" content="{{ media.height }}">
<meta property="og:image:alt" content="{{ media.alt | escape }}">
{% if media.alt contains 'youtube' or media.alt contains 'vimeo' %}
{% assign src=media.alt | split: 'src="' %}
{% assign src=src[1] | split: '"' | first %}
<meta property="og:video" content="{{ src }}">
{% endif %}
{% endfor %}
{% else %}
{{ og_image_fallback }}
{% endif %}
<meta property="product:price:amount" content="{{ product.price | money_without_currency | strip_html | escape }}">
<meta property="product:price:currency" content="{{ shop.currency }}">
{% elsif template contains 'collection' %}
<meta property="og:type" content="product.group">
<meta property="og:title" content="{{ collection.title | strip_html | escape }}">
{% if collection.image %}
<meta property="og:image" content="https:{{ collection.image | img_url: '600x' }}">
<meta property="og:image:secure_url" content="https:{{ collection.image | img_url: '600x' }}">
<meta property="og:image:alt" content="{{ collection.image.alt | escape }}">
<meta property="og:image:width" content="{{ collection.image.width }}">
<meta property="og:image:height" content="{{ collection.image.height }}">
{% else %}
{{ og_image_fallback }}
{% endif %}
{% if collection.products_count > 0 %}
{% assign media = collection.products.first.featured_media %}
<meta property="og:image" content="http:{{ media | img_url: '600x' }}">
<meta property="og:image:secure_url" content="https:{{ media | img_url: '600x' }}">
{% else %}
{{ og_image_fallback }}
{% endif %}
{% 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.image %}
<meta property="og:image" content="http:{{ article.image | img_url: '600x' }}">
<meta property="og:image:secure_url" content="https:{{ article.image | img_url: '600x' }}">
<meta property="og:image:width" content="{{ article.image.width }}">
<meta property="og:image:height" content="{{ article.image.height }}">
<meta property="og:image:alt" content="{{ article.image.alt | escape }}">
{% elsif 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 }}">
{% else %}
{{ og_image_fallback }}
{% endif %}
{% endif %}
{% elsif template contains 'blog' %}
<meta property="og:type" content="article">
<meta property="og:title" content="{{ blog.title | strip_html | escape }}">
{% if blog.articles_count > 0 %}
{% assign article = blog.articles.first %}
{% assign img_tag = '<' | append: 'img' %}
{% if article.image %}
<meta property="og:image" content="http:{{ article.image | img_url: '600x' }}">
<meta property="og:image:secure_url" content="https:{{ article.image | img_url: '600x' }}">
{% elsif 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 %}
{% elsif template contains 'page' %}
<meta property="og:type" content="article">
<meta property="og:title" content="{{ page.title | strip_html | escape }}">
<meta property="og:image:width" content="{{ article.image.width }}">
<meta property="og:image:height" content="{{ article.image.height }}">
{% assign img_tag = '<' | append: 'img' %}
{% if page.content contains img_tag %}
{% assign src=page.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 }}">
{% else %}
{{ og_image_fallback }}
{% endif %}
{% endif %}
{% else %}
<meta property="og:type" content="website">
<meta property="og:title" content="{{ page_title | escape }}">
{% endif %}
{% if template contains 'index' %}
{{ og_image_fallback }}
{% endif %}
{% if page_description %}
<meta property="og:description" content="{{ page_description | escape }}">
{% endif %}

{% comment %}
Twitter user name of the site, based on theme settings
{% endcomment %}
{% if settings.twitter_link != blank %}
<meta name="twitter:site" content="{{ settings.twitter_link | split: 'twitter.com/' | last | prepend: '@' }}">
{% endif %}
<meta name="twitter:card" content="summary">
{% if template contains 'product' %}
<meta name="twitter:title" content="{{ product.title }}">
<meta name="twitter:description" content="{{ product.description | strip_html | truncatewords: 140, '' | escape }}">
<meta name="twitter:image:width" content="240">
<meta name="twitter:image:height" content="240">
<meta name="twitter:image" content="https:{{ product.featured_media | img_url: '240x' }}">
<meta name="twitter:image:alt" content="{{ product.featured_media.alt | escape }}">
{% elsif template contains 'article' %}
<meta name="twitter:title" content="{{ article.title }}">
<meta name="twitter:description" content="{{ article.excerpt_or_content | strip_html | truncatewords: 140, '' | escape }}">
{% if article.image %}
<meta property="twitter:image" content="http:{{ article.image | img_url: '600x' }}">
<meta name="twitter:image:alt" content="{{ article.image.alt | escape }}">
{% elsif article.content contains "<img" %}
{% assign src=article.content | split: 'src="' %}
{% assign src=src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:' %}
{% if src %}
<meta property="twitter:image" content="{{ src }}">
{% endif %}
{% endif %}
{% endif %}

 

0 Likes
Highlighted

This is the Facebook app id required by Facebook. When you input url, click "Debug" button and "Scrape Again" button on Facebook Debugger, the error message usually will be gone. This property is not an important message. If you've set og:image, og:title and og:description, usually it will be OK to show the correct link preview. 

You can refer to our guide here: https://support.seo-product-optimizer.com/article/79-why-is-it-showing-the-following-required-proper...

 

SPO - SEO App to research keywords & edit social link preview
0 Likes
Highlighted
New Member
2 0 0

Hi guys... having the same problem here with the missing fb:app_id.  have tried all various solutions I have searched but no luck.  Debugged time after time but still the same result.

We are trying to share the opening of our bricks and mortar, and our online store next monday and need to get the facebook share to show it

0 Likes
Highlighted

@Rubenesque You can add a line to add fb:app_id, <meta property="fb:app_id" content="YOUR FB APP ID" />. Just put it near other meta tags in your theme.liquid file. But you need to create a Facebook app in order to get the ID.

Anyway, this app_id will not affect your store. Even you miss the id, your link preview should not have a problem. It's not a critical open graph property.

 

 

SPO - SEO App to research keywords & edit social link preview
0 Likes