---json
{
    "canonical": ":facebook",
    "description": "Sharing a link from a ComboStrap page will show on every facebook post a card thanks to the facebook social graph metadata",
    "featured-svg-image": ":combostrap:icons:mdi:facebook.svg",
    "page_id": "nccxr0t7kgtuec17e1cnf",
    "title": "Facebook Graph Enabled"
}
---
====== ComboStrap Page Metadata - Facebook Card ======


===== About =====
Sharing a link will show on every Facebook <icon name="mdi:facebook"/> post a card thanks to the Facebook social graph metadata added to each ComboStrap page.




===== Preview =====


You can check the generated card before posting with the [[https://developers.facebook.com/tools/debug/|sharing debugger]].

<box elevation="high" align="center" width="fit-content">
   {{docs:semantic:facebook_card.png?350|}}
</box>

\\

===== List of metadata =====

The following metadata's are used in the card:
  * for the ''og:title'': the [[..:page:title|title]] if present otherwise [[..:page:h1|h1]], otherwise the page id.
  * for the ''og:description'': the [[..:page:description|description]]
  * for the ''og:image'': the [[#image|image]].
  * for the ''og:type'': the [[docs:type:type|page type]]
  * for the ''og:locale'': the [[..:locale:locale|locale]] - if the locale cannot be derived, we set the default Facebook value (''en_US'').

<note>
If the page is of the [[..:type:article|article type]], we add also the [[..:type:article|article metadata]]
</note>
===== Image =====

You can see the image used for ''Facebook'' in the [[:docs:metadata:manager|metadata manager]].

{{:docs:social:facebook_opengraph_metadata.jpg|}}

If the value is grayed, this is the [[#default image|default value]].

If you set an image, the image must be at a minimum of 200px by 200px. The best format is 524x274 as this is the card dimension. (([[https://developers.facebook.com/docs/sharing/webmasters/images|Facebook Image documentation]]))
===== Default Image =====

The default image is chosen via this algorithm:
  * The Facebook image of the page if set
  * The [[:docs:page:featured-image|featured raster image]] if found
  * The [[:docs:page:first-image|first image]] of the page if set
  * The Facebook image of the [[:docs:page:system:system|parent page]] if found
  * The [[:docs:page:featured-image|featured raster image]] of the [[:docs:page:system:system|parent page]] if found
  * The [[:docs:page:first-image|first image]] of the [[:docs:page:system:system|parent page]] if found
  * until the [[:docs:page:system:home|website home page]]


===== Configuration =====

You can set the following [[docs:app:configuration|configuration]]:

^ Name ^ Description ^ Default value ^
| ''facebookDefautImage'' | the default image if no image is found | :logo-facebook.png |

((https://developers.facebook.com/docs/sharing/webmasters))