Announcement

Collapse
No announcement yet.

Facebook Open Graph code

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

    Facebook Open Graph code

    I'm trying to implement the Open Graph code, with a Like button, that will allow site visitors to Like individual products to share them on their Facebook profiles. I've got it partly working using the code at the bottom of this thread but I can't get an image to show.

    The code I'm using for <head></head> is as follows:

    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">http://004.artinet.co.uk/acatalog/<actinic:variable name="ProductImageFileName"/></actinic:block>" />
    	<meta property="og:site_name" content="Like Button Test" />
    	<meta property="fb:admins" content="9424[rest of ID removed]" />
    The relevant products are either of the cameras at http://004.artinet.co.uk/acatalog/Cameras.html

    I've tried with with and without the full URL for the image, either way it's the same, an ugly great link and no image! Any ideas?
    ¤ The world wide web needn't cost the earth
    ¤ ARTISAN INTERNET LTD
    ¤ www.artinet.co.uk

    #2
    This line looks wrong:
    Code:
    	<meta property="og:title" content="<actinic:variable name="PageTitle"/>"/>" />
    Should be (I think):
    Code:
    	<meta property="og:title" content="<actinic:variable name="PageTitle" />" />
    Fix that and let us know what happens.

    Also it may be safer to put a big condition around it so it only activates on product pages and only on the first product. The sample code you linked to would produce gibberish on non-product pages. Try this:
    Code:
    <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22" >
    	<actinic:block type="ProductList" />
    		<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%201">
    			<meta property="og:title" content="<actinic:variable encoding="strip" name="PageTitle" />" />
    			<meta property="og:type" content="product" />
    			<script type="text/javascript">
    			document.write ('<meta property="og:url" content="'+window.location+'" />');
    			</script>
    			<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%21%3d%20%22%22">
    				<meta property="og:image" content="<actinic:variable name="CatalogURL" /><actinic:variable name="ProductImageFileName"/>" />
    			</actinic:block>
    			<meta property="og:site_name" content="Like Button Test" />
    			<meta property="fb:admins" content="9424[rest of ID removed]" />
    		</actinic:block>
    	</actinic:block>
    </actinic:block>
    I've also bunged a Condition around the og:image line so it's only generated if a product image exists.

    And used the CatalogURL variable so you don't need any hard-coded site URL. Should thus work for anyone.
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


      #3
      I've run the URL through the Facebook Linter and discovered that I'm using an app ID in fb:admins, not my admin ID, although I could have sworn I'd got the right one!

      I thought it would be 94243703589 as my original FB url was https://www.facebook.com/pages/Artis...ed/94243703589 before I got my short url but it looks like that's the app ID.

      Anyone know the definitive place to find out your admin ID? Facebook are a bit coy about telling you this in their 'help'.
      ¤ The world wide web needn't cost the earth
      ¤ ARTISAN INTERNET LTD
      ¤ www.artinet.co.uk

      Comment


        #4
        I didn't find my own admin ID but I used the ID from another profile that I've got so that gets round the Admin ID problem.

        The Linter now shows that everything is being picked up correctly:

        Data Source "product" extracted from <meta property="og:type" />
        Data Source "Digital Camera" extracted from <meta property="og:title" />
        Data Source "http://004.artinet.co.uk/acatalog/Digital_Camera.html" extracted from Our normalised version of the url
        Data Source "Digital Camera" extracted from <meta property="og:description" />
        Data Source Extracted 1 values from <meta property="og:image" />: http://004.artinet.co.uk/acatalog/x-camera1.jpg
        Data Source "100002088497154" extracted from <meta property="fb:admins" />
        Data Source "Like Button Test" extracted from <meta property="og:site_name" />
        However, there's still no image or name of the link showing when I Like the product, and the link shows as http://004.artinet.co.uk/cgi-bin/ss0...html&NOLOGIN=1

        Why should FB pick up a cgi-bin URL?

        Malcolm
        ¤ The world wide web needn't cost the earth
        ¤ ARTISAN INTERNET LTD
        ¤ www.artinet.co.uk

        Comment

        Working...
        X