How to get facebook to show the right image on magento shared pages.

On magento it maybe problematic to get og:image right for the right image to show if you share on facebook.
First of all, you need to make a default image, that is at least 200x200 pixels. Otherwise facebook will ignore it and choose it's own image(And facebooks choice of images is usually very poor...)

So, to get the og:image right in facebook is a problem for magento because you have so much  modules to go through to see if there is an image.

So I wrote my own simple processing application to be put in app/design/frontend/base/templatename/page/html/head.phtml

This code will recognize if we are on a product page and wish to share the product image, if we're on a cms page and wish to share the image in the cms page or we are on an aw_blog page from ahead works blog module and want an image from the blogpost.

By default from blogposts and cms pages it will take the first image that is present within the content text.
IF there is an image with -SOCIAL- in the path or image name, it will present that one to facebook as the "chosen" image for sharing. That way you are not forced to use the first image always as the sharing image. Remember that your image that you choose to share has be to be at least 200 by 200 pixels in dimensions for facebook.

To check if your page gets processed properly use the facebook debug tool
https://developers.facebook.com/tools/debug

That way you can resolve any errors that are shown on that page.

If no images can be found in a blogpost, make sure you show a default image. Set the default absolute url in the variable $__JX_default_image.

Please let me know if you extended this for other pages/plugins that are in magento, so I can update this snippet so more programmers can benefit from it.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<meta property="og:image" content="<?php 
$__JX_default_image = 'http://static.host.com/media/wysiwyg/-SOCIAL-/logo.jpg';
if (Mage::registry('current_product'))
 {
 echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'image');
 }
 

elseif($content = Mage::getSingleton('blog/post')->getData('post_content'))
 {
 $cms_content = Mage::helper('cms')->getPageTemplateProcessor()->filter($content);
 $trip = 0;
 $src = array();
 $pos = 0;
 while(strpos($cms_content,'<img ',$pos)!== false)
  {
  $trip++;
  if($trip == 100)break;
  $pos = strpos($cms_content,'<img ',$pos);
  $src[] = substr($cms_content,
     strpos($cms_content,' src="',$pos)+6,
     strpos($cms_content,'"',
      strpos($cms_content,' src="',$pos)+6)
       -
      (strpos($cms_content,' src="',$pos)+6));
  $oldpos = $pos;
  $pos = strpos($cms_content,'"',strpos($cms_content,' src="',$pos)+6);
  }
 $theone = isset($src[0]) ? $src[0] : false;
 if($theone != false)
  {
  foreach($src as $img)
   {
   if(strpos($img,'-SOCIAL-') !== false)
    {
    $theone = $img;
    }
   }
  }
 else
  {
  $theone = $__JX_default_image;
  }
 echo $theone;
 }

elseif($page = Mage::getModel('cms/page')->load(Mage::app()->getRequest()->getParam('page_id', Mage::app()->getRequest()->getParam('id', false))))
 {
 $cms_content = Mage::helper('cms')->getPageTemplateProcessor()->filter($page->getContent());
 $trip = 0;
 $src = array();
 $pos = 0;
 while(strpos($cms_content,'<img ',$pos)!== false)
  {
  $trip++;
  if($trip == 100)break;
  $pos = strpos($cms_content,'<img ',$pos);
  $src[] = substr($cms_content,
     strpos($cms_content,' src="',$pos)+6,
     strpos($cms_content,'"',
      strpos($cms_content,' src="',$pos)+6)
       -
      (strpos($cms_content,' src="',$pos)+6));
  $oldpos = $pos;
  $pos = strpos($cms_content,'"',strpos($cms_content,' src="',$pos)+6);
  }
 $theone = isset($src[0]) ? $src[0] : false;
 if($theone != false)
  {
  foreach($src as $img)
   {
   if(strpos($img,'-SOCIAL-') !== false)
    {
    $theone = $img;
    }
   }
  }
 else
  {
  $theone = $__JX_default_image;
  }
 echo $theone;
 }
else
 {
 echo $__JX_default_image;
 }
 ?>"/>

Comments

Post a Comment

Popular Posts