Facebook Comments for Ultimo Magento Theme

Facebook Comments for the Ultimo Magento Theme

Howdy ,

Myself & Dave are working on the next part of the designing a Responsive Magento website for $99 course and we came up with something we know you’d love!

Facebook comments in the custom tabs :)

Custom Tabs

We’re using the Ultimo Magento theme for this course, which is super flexible and highly inexpensive.

This theme comes with over 50 static blocks ( you’ll find out about these in the theory section ) and on the product page there you can have two extra tabs for your own content that is displayed on all your products.

We went through the obvious things that you could enter on these tabs such as:

  • Delivery Information
  • Returns info
  • Sizing
  • And so on…

However we thought we could do one better and what we’d like to see on our store is Facebook comments.

Facebook Comments on Magento

Ultimo Facebook Comments

There are Magento extensions that can add this feature in for you, however using the Facebook Developers page here they can be loaded in using Javascript.

However…

The thing is that when we started to play with these comments we noticed something undesirable.

After leaving a comment on the product, this was updated on our Facebook profiles (all good so far)

But the link that was left behind on Facebook was a custom one and had lots of extra tracking info in the URL that we landed on, so our product page now ended with stuff like ?fb_comments=123 etc….

Facebook then treated that page as a separate page and the previous comments left didn’t show and that’s just “pants”.

So we’ve tweaked the code a little for you and now the Facebook comments code only uses the true page URL and strips out the junk after the ? symbol (which is common not only to Facebook but to other sharing social platforms) and the end result is what you can see over to the right (click for larger version).

Why Facebook Comments?

The reason why explicitly chose Facebook comments is simple.

When a customer comments on your product page, by default the checkbox is ticked to “Also post on Facebook”.

That means when a customer asks a question or leaves a comment, this is also added to their Facebook timeline.

And if it’s on their timeline… yep you guessed that’s then viewable by their friends :)

Can’t Wait, Want Now?

The code to do this is actually dead simple and if you can manage copy & paste (the theme for the entire course) then you too can have Facebook comments on your Magento website using the Ultimo theme.

If you…

  1. Go to CMS > Static Blocks
  2. Search for the identifier called “block_product_tab2”
  3. Enable this block
  4. Change the block title to “Facebook Comments”
  5. Then drop the code below into the content section
  6. Hit Save Block
  7. Throw a party :)

Step 7 is optional and the code is below.

The Facebook Comments Code:

<div class="fb-comments" data-numposts="12" data-colorscheme="light" data-href=""></div>
<div id="fb-root"></div>
<script type="text/javascript">
/* 
	Facebook Comments for Magento in static blocks v1.1
*/
jQuery(document).ready(function() {

	// Strip params
	function getPathFromUrl(url) { return url.split("?")[0]; }

	// Update data-href attribute
	jQuery(".fb-comments").attr('data-href', getPathFromUrl( location.href ) );
	
	(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_GB/sdk.js#xfbml=1&version=v2.0";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
});
</script>

Magento doesn’t need to be complicated, Magento is copy & paste simple :)

Enjoy, Matt & Dave

14 replies
  1. Michelle
    Michelle says:

    This is great thanks, is there anyway of them using this to leave a comment if they are just logged into the magento? also my auto tick for Facebook doesnt come up, thanks Michelle

    Reply
  2. VideoGuy
    VideoGuy says:

    Nice one!
    Not sure if this is actually a “daft” question, but here goes:

    Should this plugin not have the ability to link up with your facebook page?
    That way, the client’s comment would not only pass through onto their own fb profile, but directly onto your fb page.

    I would imagine the synergy between your fb page and your website would arouse more interest from those who are linked to you on fb or am I wrong in this?

    Reply
    • Matthew Ogborne
      Matthew Ogborne says:

      Howdy JP,

      Not a daft question at all.

      That is something I looked at originally, but it gets messy as you have to create a facebook app, so went with the simple option.

      I say the simple option, but this way it’s posted on the persons timeline, while it would be nice for the facebook page, personally I would go with their timeline as it’s likely to attract more people.

      That said there are more options are here https://developers.facebook.com/docs/plugins/comments

      Matt

      Reply
    • Matthew Ogborne
      Matthew Ogborne says:

      Hi Calum,

      Not sure you’ll need to check. The script loads on ready() so the page should be loaded by then.

      If you’re concerned about speed, you could move this to a lazy loading function or attach to the tab click event so it’s loaded on demand.

      Oh and I’d not feel too bad about adding this in, we saved oodles on the social sharing icons by using AddThis rather than the separate counts that we both know lag the pages :)

      Matt

      Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *