CODEWITHSUNDEEP
facebookmagentobuttonfacebook-likeproduct
americanknight
americanknight

Reputation: 759

Magento - Getting Facebook like button on every product of list page

I've put a Facebook Like button with every product on my list pages in Magento. Here's a screenshot:

enter image description here

I'm having 2 problems:

  1. When the Like button is clicked, and the popup appears, the image that will be shared on Facebook isn't usually the image of the product. It seems to be scraping random images from the page.
  2. The content that will be shared includes HTML tags. It's scraping the text from the product's description field, which includes HTML tags. It's worth noting that the meta descriptions of my product pages seem to also be pulling their content from the product description field, including html tags.

As far as I can tell, I've setup everything correctly, but maybe I'm missing something. Here's what I've done so far:

In head.phtml I've added these meta tags, which, following Facebook's Open Graph protocol, are supposed to define the correct image and text (I specify the short description, which doesn't contain any HTML tags, instead of the long description):

<?php
$product = Mage::registry('current_product');
if($product)
{
?>
<meta property="og:title" content="<?php echo trim($product->getName()); ?>"/>
<meta property="og:description" content="<?php echo trim($product->getShortDescription()); ?>"/>
<meta property="og:url" content="<?php echo $this->helper('core/url')->getCurrentUrl();?>"/>
<meta property="og:type" content="product"/>
<meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($product, 'image') ;?>"/>
<?php
}
?>

In header.phtml, I added the script that enables the like button:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

And in list.phtml, I added the button element where I want it to appear, dynamically specifying the URL of the product that's to be liked:

<div class="fb-like" style="display:none;" data-href="<?php echo $_product->getProductUrl() ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

Any ideas of why this isn't working? Thanks.

Upvotes: 0

Views: 2327

Answers (1)

MagePal Extensions
MagePal Extensions

Reputation: 17656

You may want to use php strip_tags(). Take a look at Strip out HTML and Special Characters

E.g.

<meta property="og:description" content="<?php echo strip_tags(trim($product->getShortDescription())); ?>"/>

Upvotes: 1

Related Questions