Facebook Like Button

You can't change the button except some specified parameters. You do have choice of light or dark scheme but the dark isn't well done. So what you see is what you get.

Not the button color, just the color of the text NEXT TO the button.

The answer is the same - it is all controlled by facebook.

Okay. So how do you change from dark to light?

I suggest first going to this link
http://developers.facebook.com/docs/reference/plugins/like/
You can then chose between the two and see the difference.

Then if you want to change yours, open the tpl_product_info_display.php

on line 23

FB.init({appId: 'your application id', status: true, cookie: true,

add in colorscheme="dark"

FB.init({appId: 'your application id', status: true, cookie: true, colorscheme="dark"

(I think- didn't run and test this)

Hey first thank you so much for this. This is awesome. I just had a question (I'm sorry if this has already been asked but I did not see it).

Is there a way to track the likes for each product? Or is there a way to have the likes go both on the customers profile as well as our company page? Just thinking it would be nice to some how be able to track how many likes have been done for each product.

Thanks!

Serious:

Okay. So how do you change from dark to light?

This is how I changed mine since my store is a dark background:

in tpl_product_info.php:

find:

<div id="likeButton"><fb:like></fb:like></div>

change to this:

that red line will let it show on dark backgrounds with no problems that I have found on mine or any that I manage

I love the mod but have a glitch. I do not believe it is compatable with Tabbed Products Pro.
I have tried to winmerge the two files (html_header and tpl_product_info_display)but Facebook Like button wins out.
Any ideas maybe how to get these two mods to get along?

bubbadan:

I love the mod but have a glitch. I do not believe it is compatable with Tabbed Products Pro.
I have tried to winmerge the two files (html_header and tpl_product_info_display)but Facebook Like button wins out.
Any ideas maybe how to get these two mods to get along?

a link to see what it is doing would be good

any error messages?

The only extra in the html_header.php files are the lines meta tags called meta property="etc and no there should be no conflict there.

Placement in the product_info file would be crucial and tabbed products is a javascript heavy mod. The facebook fbml is some sort of scripting like javascript so I guess it's possible . I just don't think it's likely. If you don't put that bit of script in the exact right place for the tabbed products mod, then it will not show up. Now where the right place would be, I don't know.

panservolvo:

Hi. I'm trying to get this to work. I have updated the 3 files like the readme.txt sais, but the like-button does not even show up on the products page.. what to do? :S

Hah! I finally figured it out. After 10 months :P
I had the facebook sidebox active, somehow that blocked out the like buttons. I updated the sidebox to the newest version (from FB) and like-buttons are working like they should :)

Hi,
I get this error when I click the Like Button.

Your page's type requires that a meta tag of the form <meta property="og:image" ...> be present. 

I may have misses some code, although I was careful I had to paste in the altered code because of my previous changes to those files.

I did place this in the html_header.

<html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?> xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title><?php echo META_TAG_TITLE; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<meta name="keywords" content="<?php echo META_TAG_KEYWORDS; ?>" />
<meta name="description" content="<?php echo META_TAG_DESCRIPTION; ?>" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="" />
<meta name="generator" content="" />
<meta property="fb:admins" content='nadixxxxxxx' />
<meta property="fb:app_id" content='13260628xxxxxxx' />
	<meta property="og:title" content="<?php echo META_TAG_FBTITLE; ?>"/>
    <meta property="og:site_name" content="<?php echo TITLE; ?>"/>
    <meta property="og:image" content="<?php echo META_TAG_FBIMG; ?>"/>
    <meta property="og:url" content="<?php echo $canonicalLink; ?>"/>
    <meta property="fb:admins" content="13260628xxxxxx"/>
    <meta property="og:type" content="product"/>

And I modified the modules/meta_tags.php to add the p.products_image Like so:

//added  p.products_image for facebook opengraph / like button
  $sql= "select pd.products_name, p.products_model, p.products_price_sorter, p.products_tax_class_id, p.products_image,
                                      p.metatags_title_status, p.metatags_products_name_status, p.metatags_model_status,
                                      p.products_id, p.metatags_price_status, p.metatags_title_tagline_status,
                                      pd.products_description, p.product_is_free, p.product_is_call,
                                      mtpd.metatags_title, mtpd.metatags_keywords, mtpd.metatags_description

as well as the:

// CUSTOM META TAGS
    if($product_info_metatags->fields['products_image']!='') {
        $FBimgURL = (($request_type == 'SSL') ? HTTPS_SERVER . DIR_WS_HTTPS_CATALOG : HTTP_SERVER . DIR_WS_CATALOG ) . DIR_WS_IMAGES . $product_info_metatags->fields['products_image'];
        define('META_TAG_FBIMG', $FBimgURL); 
    } else {
        define('META_TAG_FBIMG', '');
    }
    define('META_TAG_FBTITLE', str_replace('"','',zen_clean_html($product_info_metatags->fields['products_name'])));
  } // EOF

Then added the Like button to tpl_product_info_display.php:

<!-- bof Facebook Like Button -->
    <p><fb:like></fb:like></p>

    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({appId: '13260628xxxxxxx', status: true, cookie: true,
                 xfbml: true});
		FB.Event.subscribe('edge.create', function(href, widget) {
// Do something, e.g. track the click on the "Like" button here
});
      };
      (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
          '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>
<!-- eof Facebook Like Button -->

But I still get the error when I click the like button.

Any thoughts?

Nadia

what's your website? if you don't want to post it here, pm me.

https://www.ClubTranzit.com

Make sure you test on the product pages not document product pages. hint..the pages with clothing for sale are product pages

well, it worked and posted to my facebook page with the photo so I don't know what the problem might be!

Wierd, it works now without the error but I didnt leave a comment and it automatically choose the color attribute swatch as the image. :(

well that's really weird - it's supposed to pull the product image. This whole thing is really tricky and a moving target with facebook. The only reason why I did this mod is because one of my customers asked for it. I never accept facebook work any more!

The truth is you have to depend on facebook's stuff working right and all the time. Sometimes things don't work that way.

Well the good thing is I switched back to the Like tags I got from Facebook while leaving the meta_tags and html_header the same and it is now pulling the product image.

I had to take out the Like button in this module because it is a little too wide.

Buy, yea over all it seems intermittant, I think its just a facebook thing.

And also the Google +1 button grabs any image on the page anyway.

HEy why not do Facebook work...It's seems like good job security if facebook always makes bugs to chase down. You could spend hours chasing a bug that doesn't exist and bill the client for the labor. ;)

Frustration is not my thing! Glad you got it sorted.