Announcement

Collapse
No announcement yet.

Facebook share meta tags

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

    Facebook share meta tags

    Hi all
    I Wonder if anybody can help? We want to add a facebook share button for each of our products, for this to work, we need to put some custom meta tags with each item.
    Can anybody point me in the right direction.
    Thanks
    Nb
    Tags: None
    #2
    Do you have SPP setup and can you give some further information on what you need to do, ie show us the code.

    Comment

      #3
      Hi Sorry for the delay
      We dont have spp setup.

      The meta code we need to add for each product is:

      <meta property="og:tag name" content="tag value"/>

      If you use Open Graph tags, the following six are required:

      * og:title - The title of the entity.
      * og:type - The type of entity. You must select a type from the list of Open Graph types.
      * og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
      * og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
      * og:site_name - A human-readable name for your site, e.g., "IMDb".
      * fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
      In all honesty I have managed to get the description show up not the image, so the only bit of code I think I would need is practice is:
      og:image
      Thanks
      NB

      Comment

        #4
        hi

        im in the same situation - trying to have facebook like buttons on my product pages, so far ive used:

        Code:
        <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%200">
	<meta property="og:title" content="<actinic:variable name="PageTitle"/>"/>" />
	<meta property="og:type" content="product" />
	<script type="text/javascript">
   document.write ('<meta property="og:url" content="'+window.location+'" />');
	</script>
	<meta property="og:image" content="<actinic:variable name="ProductImageFileName"/>" />
	<meta property="og:site_name" content="XYZ Ltd" />
	<meta property="fb:admins" content="52115xxx" />
</actinic:block>
        and yeah ProductImageFileName isnt working..

        Comment

          #5
          100th post! yay!

          Comment

            #6
            ProductImageFileName will only work inside a ProductList. If you are using SPP then you should be able to replace the following line:
            Code:
            <meta property="og:image" content="<actinic:variable name="ProductImageFileName"/>" />
            with:
            Code:
            <meta property="og:image" content="<actinic:block type="ProductList"><actinic:variable name="ProductImageFileName"/></actinic:block>" />

            Comment

              #7
              very good, works a treat, thank you!

              Comment

                #8
                will this work with other versions or is it limited to v8? Just need it to select the correct image, everthing else works ok.

                Comment

                  #9
                  Should be the same for all versions I think.

                  Comment

                    #10
                    So would I need to use that whole block of code or just the metatag relating to the image? Where would I put it?

                    I'm already using the addthis share tool on the page.

                    Comment

                      #11
                      You would need all the code above (as amended), put it in the outer layout near the other meta tags. It will only work with SPP.

                      Comment

                        #12
                        so you paste this block inside your
                        HTML Code:
                        <head></head>
                        tags

                        Code:
                        <meta property="og:title" content="<actinic:variable name="PageTitle"/>"/>" />
<meta property="og:type" content="product" />
<script type="text/javascript">
   document.write ('<meta property="og:url" content="'+window.location+'" />');
</script>
<meta property="og:image" content="<actinic:block type="ProductList"><actinic:variable name="ProductImageFileName"/></actinic:block>" />
<meta property="og:site_name" content="XYZ Ltd" />
<meta property="fb:admins" content="52115xxx" />
                        and change XYZ Ltd with your site name and 52115xxx with your facebook id (you may need to dig around for this in the social plugin section of facebook). theres another property called 'fb:app_id' but you need to have made a developers app first to get that.

                        Comment

                          #13
                          Hi

                          We're try to add this in V9 but I figured it would be easier to post here.

                          I've added this code in the meta tags:

                          <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%200">
                          <meta property="og:title" content="<actinic:variable name="PageTitle"/>"/>" />
                          <meta property="og:type" content="product" />
                          <script type="text/javascript">
                          document.write ('<meta property="og:url" content="'+window.location+'" />');
                          </script>
                          <meta property="og:image" content="<actinic:block type="ProductList"><actinic:variable name="ProductImageFileName"/></actinic:block>" />
                          <meta property="og:site_name" content="Leon Paul London" />
                          <meta property="fb:admins" content="xxxxxxxx" />
                          </actinic:block>

                          This script within the head tag:

                          <script src="http://connect.facebook.net/en_US/all.js"></script>
                          <script>
                          FB.init({
                          status : true, // check login status
                          cookie : true, // enable cookies to allow the server to access the session
                          xfbml : true // parse XFBML
                          });
                          </script>

                          and this code on in the page layout:

                          <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=210898538930176&amp;xfbml=1"></script>
                          <fb:like href="http://www.leonpaul.com/" send="false" layout="button_count" width="280" show_faces="true" font="segoe ui"></fb:like>

                          I don't really know hat I'm doing but what I would like to know is how to get the like button to like the specific product of the page that it on rather than the site itself.

                          Can anyone help?

                          Comment

                            #14
                            Originally posted by alexrpaul View Post
                            Hi

                            We're try to add this in V9 but I figured it would be easier to post here.

                            I've added this code in the meta tags:

                            <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%200">
                            <meta property="og:title" content="<actinic:variable name="PageTitle"/>"/>" />
                            <meta property="og:type" content="product" />
                            <script type="text/javascript">
                            document.write ('<meta property="og:url" content="'+window.location+'" />');
                            </script>
                            <meta property="og:image" content="<actinic:block type="ProductList"><actinic:variable name="ProductImageFileName"/></actinic:block>" />
                            <meta property="og:site_name" content="Leon Paul London" />
                            <meta property="fb:admins" content="xxxxxxxx" />
                            </actinic:block>

                            This script within the head tag:

                            <script src="http://connect.facebook.net/en_US/all.js"></script>
                            <script>
                            FB.init({
                            status : true, // check login status
                            cookie : true, // enable cookies to allow the server to access the session
                            xfbml : true // parse XFBML
                            });
                            </script>

                            and this code on in the page layout:

                            <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/al...76&amp;xfbml=1"></script>
                            <fb:like href="http://www.leonpaul.com/" send="false" layout="button_count" width="280" show_faces="true" font="segoe ui"></fb:like>

                            I don't really know hat I'm doing but what I would like to know is how to get the like button to like the specific product of the page that it on rather than the site itself.

                            Can anyone help?
                            I 'think' you just need to remove the url (in bold - make sure you leave the quotation marks in though) so Facebook defaults to the referring page. Sorry I don't have time to go through your code properly though.

                            You can see it working on the product pages of the site in my signature and view source to see how I have implemented it (and please feel free to like a few products too!)

                            edit:
                            Oops - just spotted I'd emboldened the wrong url - teach me for rushing!
                            Last edited by meden; 12-May-2011, 09:38 AM. Reason: clarification
                            The Pretty Dress Company

                            Comment

                              #15
                              Great thanks for your reply, pointed me in the right direction. It seems that its link http://www.leonpaul.com that needs to be removed in order for the product to be liked.

                              HTML Code:
                              <fb:like href="http://www.leonpaul.com/" send="false" layout="button_count" width="280" show_faces="true" font="segoe ui"></fb:like>
                              They only problem now is that the image its posting to Facebook seem to be random.

                              I asume its something to do with this line of code

                              HTML Code:
                              <meta property="og:image" content="<actinic:block type="ProductList"><actinic:variable name="ProductImageFileName"/></actinic:block>" />
                              I've tryied it like this.

                              HTML Code:
                              <meta property="og:image" content="<actinic:block type="ProductList"><actinic:variable name="MyThumb"/></actinic:block>" />
                              The MyThumb being a custom variable we have added to put a thumb nail in the also baugth list. Seems as though it sould work as every product has 70 x 70 px thumb added via this variable, but it dosn't seem to. I end up with Youtube logo from our main page.

                              Comment

                              Previous 1 2 template Next
                              Working...
                              X