BelVG Free Facebook Like: No Like Button

magento.stackexchange https://magento.stackexchange.com//questions/31007

Question

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.

enter image description here

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

Was it helpful?

Solution

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.

OTHER TIPS

That was an un-fun way to spend the afternoon. There were myriad problems, but they boiled down to the BelVG extension using the text standart for the layout when they should be using standard. When the Facebook like iframe was handed standart as a parameter, it returned no like buttons.

Red herrings here included

  • The above mentioned "fb:like failed to resize in 45s", likely triggered by an empty iframe. ALl the CSS rules I found to "fix" this targeting the wrong HTML elements (although I'm sure they were right at the time)

  • That the various versions of the extension and Facebook's own code used appId, app_id, and omitted the application id completely, leading to wasted effort of trying to figure out if this was needed at all

  • That's there's various versions of the "Javascript SDK", each with different initialization parameters, leading to wasted effort trying to figure out if the like syntax had changes over the years.

I eventually solved this by diffing a generated iframe src for a Facebook provided code snippet with a the code generated by the Magento extension, and swapping parameters until it started working.

Anyone that deals with the various third party Facebook technologies on a regular basis has my pity and sympathy.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top