Announcement

Collapse
No announcement yet.

Facebook share on individual product page takes wrong image

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Facebook share on individual product page takes wrong image

    Hi
    Hope someone can help shed light on this. When im on an individual product page and wish to use the share to face book link. A pop up page comes up with the preview of the share but its sharing the wrong image. Its not the product image but the header image that its trying to share. For example from here https://www.brilliantgems.co.uk/acat...s-Pendant.html
    I would like to share the product image but get this... attached...
    Attached Files

  • #2
    A Facebook Share button is designed to share the whole page, not just the product details buried somewhere in that page. It looks like Facebook extracts the popup text from the meta description but is using the logo image instead of the product one. Why? Perhaps because the logo image is the visibly largest on the page.

    You could try temporarily changing your logo image to a small one and see if that helps.

    This could be a Facebook issue so it may be worth checking on a Facebook forum.

    E.g. https://www.sangfroidwebdesign.com/w...mage-is-wrong/
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


    • #3
      Ahah! Using the Facebook Debugger from the link on my prior post, I see that your page is https but the meta tag for the image is http
      Code:
      <meta property="og:image" content="http://www.brilliantgems.co.uk/acatalog/VPamethyst.jpg" />
      and this may be confusing Facebook.
      Norman - www.drillpine.biz
      Edinburgh, U K / Bitez, Turkey

      Comment


      • #4
        Here is what SD 2016 uses for this in layout Standard Meta Tags:
        Code:
        <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageHeight%22%20%2f%3e%20%20%3e%3d%20%20200%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%3d%20200" ><meta property="og:image" content="<actinic:variable name="CatalogURL" /><actinic:variable name="ProductImageFileNameRaw" />" /></actinic:block>
        <actinic:block if="%28%3cactinic%3avariable%20name%3d%22ProductImageHeight%22%20%2f%3e%20%3c%20200%20OR%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3c%20200%29%20AND%0d%3cactinic%3avariable%20name%3d%22DefaultFacebookImage%22%20%2f%3e%20%20%21%3d%20%22%22"><meta property="og:image" content="<actinic:variable name="CatalogURL" /><actinic:block php="true">echo basename("<actinic:variable name="DefaultFacebookImage" />");</actinic:block>" /></actinic:block>
        So it's using CatalogURL regardless of whether pages are https or not.

        And SD 2018 does it properly:
        Code:
        <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageHeight%22%20%2f%3e%20%20%3e%3d%20%20200%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%3d%20200" ><meta property="og:image" content="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBaseHREFStandard%22%20%2f%3e" ><actinic:variable name="CatalogURL" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsBaseHREFSSL%22%20%2f%3e" ><actinic:variable name="SSLCatalogURL" /></actinic:block><actinic:variable name="ProductImageFileNameRaw" />" /></actinic:block>
        <actinic:block if="%28%3cactinic%3avariable%20name%3d%22ProductImageHeight%22%20%2f%3e%20%3c%20200%20OR%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3c%20200%29%20AND%0d%3cactinic%3avariable%20name%3d%22DefaultFacebookImage%22%20%2f%3e%20%20%21%3d%20%22%22"><meta property="og:image" content="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBaseHREFStandard%22%20%2f%3e" ><actinic:variable name="CatalogURL" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsBaseHREFSSL%22%20%2f%3e" ><actinic:variable name="SSLCatalogURL" /></actinic:block><actinic:block php="true">echo basename("<actinic:variable name="DefaultFacebookImage" />");</actinic:block>" /></actinic:block>
        There are other areas of the Standard Meta Tags that are wrong in SD 2016. All fixed in SD 2018 so copying the SD 2018 Standard Meta Tags code into SD 2016 should fix this.
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment


        • #5
          Thank you Norman thats great

          Comment


          • #6
            I notice that there are 2 similar codings on line 59 and line 66 for the SD 2016. which one would I replace? in the standard meta tag layout. Im also noticing that some pages are working ok when I share them so thats weird. Might be easier to bite the bullet and upgrade to sd 2018? But wanted to hold out for a while...

            Comment


            • #7
              Replace (like I said) the entire layout with the SD 2018 one.
              Norman - www.drillpine.biz
              Edinburgh, U K / Bitez, Turkey

              Comment

              Working...
              X