Announcement

Collapse
No announcement yet.

Social Share Buttons OG Image Issue on PROD Page

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Social Share Buttons OG Image Issue on PROD Page

    I have implemented social share buttons using the 3rd party sharing code and went with ShareThis because it was recommended in one of the Miva docs.

    It doesn't seem to be pulling the main product image for the og:image meta tags

    Here is the code for the head tag on the PROD page:

    Code:
    <head>
    <mvt:if expr="NOT ISNULL l.settings:product:page_title">
        <title>&mvt:product:page_title;</title>
    <mvt:elseif expr="NOT ISNULL l.settings:page:title">
        <title>&mvt:page:title;</title>
    <mvt:else>
        <title>&mvt:product:name;: &mvt:store:name;</title>
    </mvt:if>
    <mvt:item name="head" param="head_tag" />
    <mvt:item name="attributemachine" param="head" />
    <mvt:item name="product_display_imagemachine" param="head" />
    <script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=5ad7abdad0b9d300137e3b15&product=inline-share-buttons"></script>
    <mvt:assign name="g.socialURL" value="l.settings:product:link" />
    <mvt:assign name="g.socialText" value="'Check out the deal on ' $ l.settings:product:name $ ' at ' $ g.store:name" />
    <mvt:do name="l.success" file="g.Module_Library_DB" value="ProductImage_Load_Type(l.settings:product:id, 1, l.settings:imagetype)" />
    <mvt:do name="l.success" file="g.Module_Library_DB" value="Image_Load_ID(l.settings:imagetype:image_id, l.settings:imagedata)" />
    <mvt:assign name="g.socialImage" value="g.baseurl $ l.settings:imagedata:image" />
    <meta property="og:title" content="&mvte:product:name;" />
    <meta property="og:type" content="product" />
    <meta property="og:image" content="&mvt:global:socialImage;" />
    <meta property="og:url" content="&mvt:global:socialURL;" />
    <meta property="og:site_name" content="&mvte:global:store:name;" />
    <meta property="og:description" content="&mvte:global:socialText;" />
</head>
    Thanks in advance.

    -Nick
    Nick Harkins
    www.loveisarose.com
    *Web Developer
    *Miva
    *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads
    Tags: None
    #2
    Hi Nick,

    Just before
    Code:
    <mvt:do name="l.success" file="g.Module_Library_DB" value="ProductImage_Load_Type(l.settings:product:id, 1, l.settings:imagetype)" />
    add
    Code:
    <mvt:do file="g.Module_Library_DB" name="l.success" value="ImageType_Load_Code('main', l.settings:imagetype)" />
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment

      #3
      That didn't seem to make it work. it is still showing the og image as this when i check the source:

      Code:
      <meta property="og:image" content="https://dev.loveisarose.com/mm5/">
      We do have the MagicZoom feature added to the image machine but I removed it and refreshed the browser and it still does the same thing.
      Nick Harkins
      www.loveisarose.com
      *Web Developer
      *Miva
      *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

      Comment

        #4
        Hi Nick,

        Do your products use the image type of 'main' and was the the first image type you created?
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment

          #5
          Yes its the only image type we currently use. The code is "main" and the description is "Main Image"
          Nick Harkins
          www.loveisarose.com
          *Web Developer
          *Miva
          *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

          Comment

            #6
            Hi Nick,

            On the product page, within the Custom Fields section, is "Image Type: Main" in the selected column?
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment

              #7
              yes it is and this is the code for the product images:

              Code:
                  <div class="column whole medium-one-third product-information--images">
        <mvt:if expr="l.settings:product:customfield_values:customfields:product_flag NE 'none'">
            <mvt:assign name="l.settings:product:flag" value="'flag--' $ tolower(l.settings:product:customfield_values:customfields:product_flag)" />
        </mvt:if>
        <span class="flag corners &mvt:product:flag;">
            <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:productimagecustomfields:main">
                <span data-icon="&#x54;" id="js-main-image-zoom" class="main-image corners" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimagecustomfields:main;" /></span>
            <mvt:else>
                <span class="main-image" data-index="0"><img class="corners" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimagecustomfields:main;" /></span>
            </mvt:if>
        </span>
        <div class="row thumbnail-wrapper">
            <div id="js-thumbnails" class="column whole medium-four-fifths np thumbnails"></div>
        </div>
        <mvt:item name="product_display_imagemachine" param="body:product:id" />
        <div class="row mtp1-25">
            <div class="column whole social-sharing"><mvt:item name="readytheme" param="thirdpartysharing" /></div>
            <div>Share This Product!</div>
        </div>
    </div>
              Nick Harkins
              www.loveisarose.com
              *Web Developer
              *Miva
              *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

              Comment

                #8
                Anymore information on this issue?
                Nick Harkins
                www.loveisarose.com
                *Web Developer
                *Miva
                *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                Comment

                  #9
                  Hi Nick,

                  If the main image is working correctly on the product page, you should be able to replace the OG tag with this:
                  Code:
                  <meta property="og:image" content="&mvt:product:customfield_values:productimagecustomfields:main;" />
                  Matt Zimmermann

                  Miva Web Developer
                  Alchemy Web Development
                  https://www.alchemywebdev.com
                  Site Development - Maintenance - Consultation

                  Miva Certified Developer
                  Miva Professional Developer

                  https://www.dev4web.net | Twitter

                  Comment

                    #10
                    That definitely works. Thanks for that.

                    Should I remove the lines of code I have highlighted in red below?

                    Code:
                        <script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=5ad7abdad0b9d300137e3b15&product=inline-share-buttons"></script>
    <mvt:assign name="g.socialURL" value="l.settings:product:link" />
    <mvt:assign name="g.socialText" value="'Check out the deal on ' $ l.settings:product:name $ ' at ' $ g.store:name" />
    <mvt:do file="g.Module_Library_DB" name="l.success" value="ImageType_Load_Code('main', l.settings:imagetype)" />
    <mvt:do name="l.success" file="g.Module_Library_DB" value="ProductImage_Load_Type(l.settings:product:id, 1, l.settings:imagetype)" />
    <mvt:do name="l.success" file="g.Module_Library_DB" value="Image_Load_ID(l.settings:imagetype:image_id, l.settings:imagedata)" />
    <mvt:assign name="g.socialImage" value="g.baseurl $ l.settings:imagedata:image" />
    <meta property="og:title" content="&mvte:product:name;" />
    <meta property="og:type" content="product" />
    <meta property="og:image" content="&mvt:product:customfield_values:productimagecustomfields:main;" />
    <meta property="og:image" content="&mvt:global:socialImage;" />
    <meta property="og:url" content="&mvt:global:socialURL;" />
    <meta property="og:site_name" content="&mvte:global:store:name;" />
    <meta property="og:description" content="&mvte:global:socialText;" />
                    Nick Harkins
                    www.loveisarose.com
                    *Web Developer
                    *Miva
                    *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                    Comment

                      #11
                      Hi Nick,

                      You should be able to so long as &mvt:global:socialImage; isn't being called on your page anywhere else.
                      Matt Zimmermann

                      Miva Web Developer
                      Alchemy Web Development
                      https://www.alchemywebdev.com
                      Site Development - Maintenance - Consultation

                      Miva Certified Developer
                      Miva Professional Developer

                      https://www.dev4web.net | Twitter

                      Comment

                        #12
                        Okay I will just leave that code in there for now and just remove <meta property="og:image" content="&mvt:global:socialImage;" />

                        Thanks for the help once again Matt.

                        -Nick
                        Nick Harkins
                        www.loveisarose.com
                        *Web Developer
                        *Miva
                        *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                        Comment

                        Previous template Next
                        Working...
                        X