search

4site-interactive-studios / en-wishlist

A wishlist of feature enhancements and bugs with Engaging Networks
2 stars 0 forks source link

No way to set default og:image for Facebook and also allow for per-page override with Social Sharing settings #12

Closed bryancasler closed 2 years ago

bryancasler commented 3 years ago

Hi Support, love the new UI/UX for managing on page social meta tags. It seems like the output of meta tags into the page has changed and this is now causing problems. The area we're running into trouble with is that there currently doesn't appear to be a way to set Facebook Image Meta Tag "og:image" on the Page Template to act as a default facebook social sharing image AND to then also allows that image to be overridden on a per-page basis using the Social Sharing widget.

Facebook requires og:image be defined in and cannot be placed in the body. If we put our default "og:image" in the <header> of the page template it will always come before the "og:image" that is populated via the social sharing setting (https://d.pr/i/pZ1JFB) and then always be used by Facebook.

Do you know any way around this or are we missing an obvious answer to this problem?

Response: "The developers weren't able to think of a work around here that wouldn't require a code change. That being said, I have added this as a feature request for future releases."

Email: https://mail.google.com/mail/u/0/#inbox/FMfcgxwKjfDJhQcmKcMtJKFWmTbZFFlg Ticket: ref:_00D60KC7O._5000d1drd5B:ref

bryancasler commented 2 years ago

We worked on this to resolve an issue for Children's Minnesota (REF: https://app.productive.io/2650-4site-interactive-studios-inc/tasks/2004756)

The following structure allows for Page Template Meta Tags to act as default, but they can then be overwritten with the per-page Social Sharing Settings. Engaging Networks also no longer requires a user to manually add the Social Sharing widget to the page to get the change in Social Sharing Settings to apply the page's meta tags.

Inside <head>

    <!-- Sharing Meta Tags Used by Facebook-->
    <title>${page~title} | TBD-ORG-NAME - TBD-ORG-TAGLINE</title>
    <meta property="og:type" content="website">
    <meta property="fb:app_id" content="1234567890"><!-- Optional -->

    <!-- Social Sharing Meta Tags Used by Twitter-->
    <meta property="twitter:account_id" content="0987654321"><!-- Optional -->
    <meta name="twitter:site" content="@ABC"><!-- @username of website -->
    <meta name="twitter:creator" content="@XYZ"><!-- @username of content creator -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://via.placeholder.com/1024x512.png?text=1024x512">
    <meta name="twitter:title" content="${page~title}">
    <meta name="twitter:description" content="Up to 160 character long description">

Before </body>

    <!-- More Sharing Meta Tags Used by Facebook-->
    <!-- EN adds these tags just before <body> so you need them here to override them -->
    <link rel="image_src" href="https://via.placeholder.com/1024x512.png?text=1024x512"/>
    <meta name="title" content="${page~title}">
    <meta name="description" content="Up to 255 character long description">
bryancasler commented 2 years ago

FINALLY!