Announcement

Collapse
No announcement yet.

Image Sharer for Social Media

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

    Image Sharer for Social Media

    hi there, I'd like to have widgets (facebook, pinit, tweet) for sharing images and content for each product on my site. When a developer has tried to do this, it seems to grab the wrong image from new products section instead of the image on the page (even where there is one product per page). Has anyone successfully done this on their site? Many thanks, Sue
    Tags: None
    #2
    Welcome to the Community, Sue.


    Do you have a link to a faulty page so we can see what's wrong there?
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment

      #3
      link

      Hi Norman

      This is the link to the TEST site. http://REMOVEtest.genesistechnical.c...Owl--1256.html
      as you can see the image grabbed is of a horse not the owl!
      It's actinic business plus v.11

      I am really hoping someone can solve this!

      Many thanks & Kind regards,
      Sue Foley

      www.eoco.org.uk

      Admin - added text to break the link above to deter search robots. REMOVE the relevant word from the link to visit the page.

      Comment

        #4
        Sue,

        The site is not fully functional on this server at the moment. I will need to update the code and upload first before it can be checked. I'll post back here when it's up correctly.

        Comment

          #5
          The site is now uploaded with the standard AddThis buttons.

          Comment

            #6
            I have done this coding for a website. You can define which page image is used for AddThis sharing for Pinterest, you need to add a CSS class to the image i.e. "imageclass" then add a configuration Javascript above the buttons code i.e.:
            Code:
            <script type="text/javascript">
var addthis_config = {
image_include: "imageclass"
}
</script>
            You can either include images or exclude them. You can read the documentation on the AddThis website: AddThis for Pinterest Pin It Button and AddThis Pinterest including/excluding images.
            And other general topics related to other sharing sites and the API are here: AddThis - Third Party Buttons.
            Peblaco

            Comment

              #7
              Did you get the Facebook image correct as well? I've been trying to add open graph tags for it without success.

              Thanks for the pinterest info.

              Comment

                #8
                The open graph tag alone doesn't seem to pick it up for some reason, however you can add the HTML5 tag <figure> and </figure> around the image and it picks it up correctly. Solution from here.
                Peblaco

                Comment

                  #9
                  Thanks Louise. I'll give that a go next week.

                  Comment

                    #10
                    I've been trying to add the <figure> tags around the product <img> tag but still not seeing anything different. I've also changed the !DOCTYPE to <!DOCTYPE html>, although I'm not sure how that may affect the rest of the site.

                    Uploaded at: http://goo.gl/m0PTuw

                    Louise - Did you use AddThis or code from another source?

                    Comment

                      #11
                      Using Open Graph tags with AddThis and figure tags seemed to work. Here are the Open Graph tags for the header of a product page. The blockif pagetype is "Product Page" thanks to Norman who posted the code from here. If you are using the code for different pages you would need to adjust the blockif and content code.

                      Code:
                      <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22">
<meta property="og:title" content="<actinic:variable name="ProductName" />" />
<meta property="og:image" content="<actinic:variable name="CatalogURL" encoding="perl" selectable="false" /><actinic:variable name="ProductImageFileName" />" />
<meta property="og:description" content="<actinic:variable name="ProductDescription" />" />
<meta property="og:url" content="<actinic:block php="true">echo '<actinic:variable name="CatalogURL" encoding="perl" selectable="false" />' . basename('<actinic:variable name="ProductPageName" encoding="perl" selectable="false" />');</actinic:block>" />
</actinic:block>
                      Notes:
                      1) If you use Open Graph image tag and Pinterest's Javascript, Pinterest uses the Open Graph as the primary image tag and needs the variable catalogurl to create an absolute URL, otherwise it does not grab the single image or Pinterest shows a broken image.
                      2) If you leave out the Open Graph description tag it should automatically pick up the meta description tag.
                      Peblaco

                      Comment

                        #12
                        I have added the AddThis code including the og tags and the figure tags and it does appear to work - at least most times, not every time, but most times at least.

                        I have a feeling that the page info is cached by Facebook but can't be sure. Anyway certainly headway made. Thanks again Louise.

                        Example here: http://goo.gl/ik0G21

                        Comment

                          #13
                          Originally posted by peblaco View Post
                          I have done this coding for a website. You can define which page image is used for AddThis sharing for Pinterest, you need to add a CSS class to the image i.e. "imageclass" then add a configuration Javascript above the buttons code i.e.:
                          Code:
                          <script type="text/javascript">
var addthis_config = {
image_include: "imageclass"
}
</script>
                          You can either include images or exclude them. You can read the documentation on the AddThis website: AddThis for Pinterest Pin It Button and AddThis Pinterest including/excluding images.
                          And other general topics related to other sharing sites and the API are here: AddThis - Third Party Buttons.
                          I don't understand how to select the product image for sharing to Social Media
                          How to create a CSS class and what code is in it and where ?
                          http://www.videoson.fr/acatalog/audi...sation2ex.html

                          I'm so sorry...
                          "LABOR IMPROBUS OMNIA VINCIT"

                          Comment

                          Previous template Next
                          Working...
                          X