Disclaimer: I am woefully behind the times when it comes to social/Facebook integrations. i.e. I don't know what I don't know, so my apologies if this is a simple obvious thing.
I've installed the Facebook Connect and Like Free extension from Magento connect. With this extension enabled, I can see the following HTML code on the catalog_product_view
page.
<fb:like href="http://magento-1-9-0-0.dev/test/test-product.html" layout="standart" show_faces="false" width="450" colorscheme="light"></fb:like>
However — no Facebook like button is rendered on my page. I've placed some Start
and End
debugging around the section of PHP which renders this
<?php if($this->helper('facebookfree/active')->isActiveLike()):?>
Start
<fb:like href="<?php echo $this->helper('core/url')->getCurrentUrl()?>" layout="<?php echo $this->helper('facebookfree/active')->getLikeLayout()?>" show_faces="<?php echo $this->helper('facebookfree/active')->isFacesLikeActive()?>" width="<?php echo $this->helper('facebookfree/active')->getLikeWidth()?>" colorscheme="<?php echo $this->helper('facebookfree/active')->getLikeColor()?>"></fb:like>
End
<?php endif?>
And nothing shows up between those words in my browser.
I know/assume fb:like
isn't a standard HTML element, but what's supposed to render this as an actual like link?
I was getting an error in my console about the URL not matching my facebook application's URL settings, but I corrected that.
This is a stock, non production system with a mostly fresh install of 1.9 CE. It's also running from a local development instance on my laptop.
Also, if I let the page sit there for 45 seconds, I get the following error in my javascript console.
fb:like failed to resize in 45s
Best Answer
Step 1: Skip the extension (if you only want "Like" buttons).
Step 2: Get the latest snippet from: https://developers.facebook.com/docs/plugins/like-button/
Step 3: Use the HTML5 snippet (works with any doctype) instead of XFBML.
What you're likely missing is the Fackbook (yep) JS SDK. Normally FB wants you to place this right after the
<body>
tag opens. Either the extension is doing this wrong, it's outdated, it's missing or can't override the<html>
tag with FB's SDK namespace (not needed in the HTML5 snippet), or there's a JS error blocking execution.Otherwise it should just render. You can test the snippet manually just by dropping both groups of code into the same place.