Facebook "Like" button on every product page?

This and some of the rest of the thread is getting into issues with the facebook end of the thing. And I have to say that I know diddly squat about facebook....

But maybe someone else has better knowledge than I :smile:

You have to edit the sizing of the Like box so that you don't see a big white space...

<iframe src="http://www.facebook.com/widgets/like.php?href=<?php echo zen_href_link(zen_get_info_page((int)$_GET['products_id']),'cPath= '.(int)$_GET['cPath'].' &products_id=' . (int)$_GET['products_id']); ?>"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>

As for sending an image and title to Facebook, yes it can be done, but requires the addition of Meta Tags. This requires some core file editing!

As an FYI, you can customize the look of the button (somewhat) - here's a link to the Facebook page.
http://developers.facebook.com/docs/reference/plugins/like

Awesome mod thanks for sharing this.

hey-you I would be interested in know what core files are to be changed to include images and titles on facebook if you would be so kind to point me in the direction :-)

niccol:

...

What you actually want to do is this:

Yup, seems to work only if the site is using SEF urls.

The default URLs with the character "&" in the url will cause error on the Facebook side.

Any idea how to overcome this (without installing the SEF add-on)? Thanks.

Replacing all the & amp; with** % 26** seems to work.

Using the urlencode() function.

yonghs:

Replacing all the & amp; with** % 26** seems to work.

Using the urlencode() function.

Could you please put the whole code here, would clarify a lot. This is nice function!

Here it is (this is found from a website... uses urlencode function):

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(zen_href_link(zen_get_info_page((int)$_GET['products_id']),'cPath='.(int)$_GET['cPath'].'&products_id=' . (int)$_GET['products_id'])); ?>&layout=standard&show_faces=true&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

Change the height to something you prefer

PS:
Or you can use strreplace function to just replace "& amp;" with "% 26"

:clap:
I changed my coding on the header page so that now the Like button works without giving me that error message. Go to this page, download the file, and then copy the facebook section to your header page, and it should work:

http://www.zenflavor.com/add-facebook-like-button-to-your-zen-cart-product-pages.html

myzcpt:

It puts the Like button there fine, and says that I "Like" it when I click it, but then it gives me an error message, and when I click on it, it says, "The page at http://mysite.com/index.php?main_page=product_info could not be reached."

Any ideas how to fix that?

Here's what I did...I'm not sure if it's the best way, but it works!

Do this at your own risk!!! Back-up all files first!

in "includes\templates\YOUR_TEMPLATE\common\html_header.php"

I placed this below the meta tag for "generator":

<?php if(strstr($_GET['main_page'], 'product_')) { ?>
    <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:type" content="product"/>
    <meta property="og:phone_number" content="ENTER PHONE NUMBER"/>
    <meta property="og:region" content="ENTER STATE CODE"/>
    <meta property="og:country-name" content="ENTER Country"/>
    <meta property="fb:admins" content="ENTER FB USERID"/>
<?php } ?>

Note that the above only works on product pages not document pages.

There's also many more meta tags that FB recognizes it. Take a look at their developer resources for me info...
http://developers.facebook.com/docs/opengraph

in "includes\modules\meta_tags.php"

Add the change in red to the query on (or around) line 200:

$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

I've inserted the following code at line 284 (for me), between the following lines in blue:

    } // 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
  break;

And than follow the other instructions in this thread for editing tpl_product_info_display

I hope this helps.

I've tried changing my tpl_product_info_display.php file, as instructed, but nothing changed on my page. Why not?

We worked this a little differently as we wanted to share the product image and the product information versus using "like."

Using the basic format for a facebook share WITHOUT a counter

<a name="fb_share" type="button" share_url="http://www.YOURSITE.com" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
```We modified it to use zen_href and include the variables FILENAME_PRODUCT_INFO and zen_get_all_get_params() to result in```php
<a href="http://www.facebook.com/sharer.php" share_url="<?php echo zen_href_link(FILENAME_PRODUCT_INFO, zen_get_all_get_params()); ?>" type="button" name="fb_share">Share on Facebook</a><script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
```We enclosed the code in a div with an id of autoFacebookShare and added that to the stylesheet in order to use css to control positioning.

Purists should note that this code will throw a tidy warning for the share_url call.

********************************
Further information that *may or may not* be helpful as it refers specifically to the basic sophyblue layout (mandi-raesDOTcom is example).

We wanted to put the three links across the bottom of a product's page so, we took a pretty basic SophyBlue template and added a wrapper for all the buttons (review, tell a friend, and facebook share) that we called tellAllWrapper , included a div around the review button called reviewButton, a div around the tell a friend called tellFriend, and the div for the facebook button.

In any three-column display, you need to align and enter data in Left, Right, Middle format in both the tpl file and the stylesheet.css.

So... We modified the tpl_product_info_display.php from```php
<!--bof Tell a Friend button -->
<?php
  if ($flag_show_product_info_tell_a_friend == 1) { ?>
<div id="productTellFriendLink" class="buttonRow forward"><?php echo ($flag_show_product_info_tell_a_friend == 1 ? '<a href="' . zen_href_link(FILENAME_TELL_A_FRIEND, 'products_id=' . $_GET['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_TELLAFRIEND, BUTTON_TELLAFRIEND_ALT) . '</a>' : ''); ?></div>
<?php
  }
?>
<!--eof Tell a Friend button -->

<!--bof Reviews button and count-->
<?php
  if ($flag_show_product_info_reviews == 1) {
    // if more than 0 reviews, then show reviews button; otherwise, show the "write review" button
    if ($reviews->fields['count'] > 0 ) { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS, zen_get_all_get_params()) . '">' . zen_image_button(BUTTON_IMAGE_REVIEWS, BUTTON_REVIEWS_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<p class="reviewCount"><?php echo ($flag_show_product_info_reviews_count == 1 ? TEXT_CURRENT_REVIEWS . ' ' . $reviews->fields['count'] : ''); ?></p>
<?php } else { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array())) . '">' . zen_image_button(BUTTON_IMAGE_WRITE_REVIEW, BUTTON_WRITE_REVIEW_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<?php
  }
}
?>
<!--eof Reviews button and count -->
```To
```php
<!-- bof share buttons by JEANDRET -->
<div id="tellAllWrapper">
    
<!--bof Reviews button and count-->
<div id="reviewButton">
    <?php
  if ($flag_show_product_info_reviews == 1) {
    // if more than 0 reviews, then show reviews button; otherwise, show the "write review" button
    if ($reviews->fields['count'] > 0 ) { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS, zen_get_all_get_params()) . '">' . zen_image_button(BUTTON_IMAGE_REVIEWS, BUTTON_REVIEWS_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<p class="reviewCount"><?php echo ($flag_show_product_info_reviews_count == 1 ? TEXT_CURRENT_REVIEWS . ' ' . $reviews->fields['count'] : ''); ?></p>
<?php } else { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array())) . '">' . zen_image_button(BUTTON_IMAGE_WRITE_REVIEW, BUTTON_WRITE_REVIEW_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<?php
  }
}
?>
</div>
<!--eof Reviews button and count -->


<!--bof Tell a Friend button -->
<div id="tellFriend"><?php
  if ($flag_show_product_info_tell_a_friend == 1) { ?>
<div id="productTellFriendLink" class="buttonRow forward"><?php echo ($flag_show_product_info_tell_a_friend == 1 ? '<a href="' . zen_href_link(FILENAME_TELL_A_FRIEND, 'products_id=' . $_GET['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_TELLAFRIEND, BUTTON_TELLAFRIEND_ALT) . '</a>' : ''); ?></div>
<?php
  }
?>
</div>
<!--eof Tell a Friend button -->

<!-- bof Facebook Auto Share by JEANDRET -->
<div id="autoFacebook">
    <a href="http://www.facebook.com/sharer.php" share_url="<?php echo zen_href_link(FILENAME_PRODUCT_INFO, zen_get_all_get_params()); ?>" type="button" name="fb_share">Share on Facebook</a><script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
</div>

<!-- eof Facebook Auto Share by JEANDRET -->

</div>
<!-- eof share buttons by JEANDRET -->
```Using the newly created divs and wrappers, we added the following to the end of our stylesheet.css```php
/*  styles for share buttons by JEANDRET  */
#tellAllWrapper {
    clear: both;
    height: 30px;
    padding: 1em;
}

#reviewButton {
    float: left;
    width: 30%
}

#tellFriend {
    float: right;
    width: 30%;

}

#autoFacebook {
    margin-top: 7px;
    text-align: center;
}
```We noticed that this link allows facebook to extract all data concerning the product.  It attempts to display it all and (so far) we have not been able to determine what information facebook uses.  It is not a function of zen cart as the link generated is the simple link to the product page.  It is some part of the facebook script that is pulling in a little more info than we would like.

However, we're willing to live with it for now as it is a facebook matter.

Has anyone implemented the Facebook Like button in the XFBML version? I already have the Fan Box sidebox so would like to stick with the XFBML. I just can't get the button to even show on the product page.

khopek:

Has anyone implemented the Facebook Like button in the XFBML version? I already have the Fan Box sidebox so would like to stick with the XFBML. I just can't get the button to even show on the product page.

You have the FB sidebox working with 1.3.9c ?

Not 1.3.9c..yet...but I am on 1.3.9a. You can see it on the deveopment site at eclecticaclothing . com [remove spaces of course]

I got it working and will be releasing a mod for this mod using facebook <xfbxml> Java SKD...

here the url to my post in the support forum under all other contributions:

http://www.zen-cart.com/forum/showthread.php?t=155698

ver 1.3.9c

Had this working with previous 1.3.8a cart. But since upgarding to 1.3.9c, when someone clicks on the LIKE Button it picks up my Facebook account and temporarily inserts my Facebook icon, but then fails with this ERROR:

"The page at http://www.cvtreasures.com/vintage-photos-stills-c-%20158%20/huslter-paul-newman-mosconi-production-photo-1961-p-2064 could not be reached."

??

And this is WHY. The REAL URL is :
"http://www.cvtreasures.com/vintage-photos-stills-c-158/hustler-paul-newman-mosconi-production-photo-1961-p-2064"

HOWEVER, as oyu can see the Facebook code is inserting characters before and after the "158". . Hence the URL becomes invalid....

"http://www.cvtreasures.com/vintage-photos-stills-c-%20158%20/hustler-paul-newman-mosconi-production-photo-1961-p-2064"

kevinmc3:

ver 1.3.9c

Had this working with previous 1.3.8a cart. But since upgarding to 1.3.9c, when someone clicks on the LIKE Button it picks up my Facebook account and temporarily inserts my Facebook icon, but then fails with this ERROR:

"The page at http://www.cvtreasures.com/vintage-photos-stills-c-%20158%20/huslter-paul-newman-mosconi-production-photo-1961-p-2064 could not be reached."

??

And this is WHY. The REAL URL is :
"http://www.cvtreasures.com/vintage-photos-stills-c-158/hustler-paul-newman-mosconi-production-photo-1961-p-2064"

HOWEVER, as oyu can see the Facebook code is inserting characters before and after the "158". . Hence the URL becomes invalid....

"http://www.cvtreasures.com/vintage-photos-stills-c-%20158%20/hustler-paul-newman-mosconi-production-photo-1961-p-2064"

No one has any idea on the above issue?

-M-:

Could you please put the whole code here, would clarify a lot. This is nice function!

Hi,
I tried replacing **&amp **with % 26, but it actually made the resulting URL worse like below:
The page at [url]http://www.cvtreasures.com/rare-antiques-memorabilia-c-73/circus-poster-ringling-brothers-rare-tightrope-hubert-castle-p-2063%%2026;layout=standard%%2026;show_faces=true%%2026;width=450%%2026;action=like%%2026;colorscheme=light[/url] could not be reached.

But, your code without that change result in correct Valid URL:

Code:

Results in SAME ERROR, BUT the actual URL is VALID, unlik eother Errors which resulted because the URL in Error was INVALID. Now really confused. here is error with above code:

The page at [url]http://www.cvtreasures.com/rare-antiques-memorabilia-c-73/circus-poster-ringling-brothers-rare-tightrope-hubert-castle-p-2063[/url] could not be reached.

But, as you can see if you copy and paste the URL, it is a GOOD URL.

Yesterday I tried some more to position the button, together with AddThis and the Facebook Share button. This is what I came up with. I'm no expert in css or coding, far from, but this one works flawlessly with Opera 10+, Firefox 3.5+, IE7 and IE8. Used with Zen Cart 1.3.8a. I haven't bothered updating ti 1.3.9 since I've read in this thread it screws up the Facebook Like button links.

If you're using SEO links you'll have to edit the Facebook Like button below to

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo zen_href_link(zen_get_info_page((int)$_GET['products_id']),'cPath= '.(int)$_GET['cPath'].' &products_id=' . (int)$_GET['products_id']); ?>&layout=button_count&show_faces=false&width=80&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:80px; height:35px"></iframe>

Below code will produce this: http://i45.tinypic.com/9tgvnb.jpg
The image text to the left translates to "have you seen this? -->"

1. Find includes\templates\template_default\templates\tpl_product_info_display.php and COPY it to includes\templates\YOUR_TEMPLATE\templates\tpl_product_info_display.php edit the file in YOUR_TEMPLATE and no other, keeping the template_default intact as backup.

2. Here's the code with comments. Read them and edit as needed. You do NOT need to edit other files.

<!--bof Socialize -->
<style type="text/css">
	.share {clear:both; width:100%; height:35px;} <!-- clear:both prevents floating elements around the div -->
	div.share ul {float:right; list-style-type:none; padding:0; } <!-- floats the menu to the right -->
	div.share li {float:left; display:inline; padding:0 5px;} <!-- float:left reverses the reversed menu... remove and you'll see --> 
</style>

<div class="share">
	<ul>
		<li>
			<img src="IMAGE_LINK" alt="" title=""> <!-- add image or type a text like "share:" to promote the Socialize bar. Or remove the li to delete -->
		</li>
		<li>
			<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> <!-- seperate Facebook share button -->
		</li>
		<li>
			<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(zen_href_link(zen_get_info_page((int)$_GET['products_id']),'cPath='.(int)$_GET['cPath'].'&products_id=' . (int)$_GET['products_id'])); ?>&layout=button_count&show_faces=false&width=80&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:80px; height:35px"></iframe> <!-- Facebook button_count Like button using standard Zen Cart product links -->
		</li>
		<li>
			<span class="addthis_toolbox addthis_default_style"> <!-- simple www.addthis.com expandable button. Register to get statistics and edit USERNAME. Remove the img src tag to use addthis standard icon -->
				<a href="http://www.addthis.com/bookmark.php?v=250&username=USERNAME" class="addthis_button_compact">
				<img src="DIFFERENT_MORE_ICON" width="16" height="16" border="0" alt="More" /> More</a>
			</span>
			<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=USERNAME"></script>
		</li>
	</ul>
</div>
<!--eof Socialize -->

3. Position as wanted. Mine displays directly below the bread crumbs, i.e. directly below the <div class="centerColumn" id="productGeneral"> found in tpl_product_info_display.php

Most likely nothing that most of you can't produce on your own, but now it's a matter och copy and paste :)

This is a great bit of code,

It is working for me, though the product image disapears in IE 8

Please can someone figure out a better way of using the clear:both function (it has me beat)

Here is my version of the code:

<!--bof Socialize -->
<style type="text/css">
	
.share {clear:both; width:100px; height:35px;} 


	div.share ul {float:right; list-style-type:none; padding:0;} 
	div.share li {float:left; display:inline; padding:0 5px;} 
</style>

<div class="share">
	<ul>

		<li>
			<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> <!-- seperate Facebook share button -->
		</li>
		<li>
			<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(zen_href_link(zen_get_info_page((int)$_GET['products_id']),'cPath='.(int)$_GET['cPath'].'&products_id=' . (int)$_GET['products_id'])); ?>&layout=button_count&show_faces=false&width=80&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:80px; height:35px"></iframe> <!-- Facebook button_count Like button using standard Zen Cart product links -->
		</li>
		<li>
			<span class="addthis_toolbox addthis_default_style"> <!-- simple www.addthis.com expandable button. Register to get statistics and edit USERNAME. Remove the img src tag to use addthis standard icon -->
				<a href="http://www.addthis.com/bookmark.php?v=250&username=USERNAME" class="addthis_button_compact">
				 More</a>
			</span>
			<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=USERNAME"></script>
		</li>
	</ul>
</div>
<!--eof Socialize -->