Facebook "Like" button on every product page?

[dbltoe]

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

<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

<!--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

<!-- 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

/*  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.

[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.

[kevinmc3]

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 ?

[khopek]

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]

[creinold]

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

[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-p...to-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-p...to-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?

[kevinmc3]

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=li ke%%2026;colorscheme=light[*/url] could not be reached.


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

Code:
<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'])); ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;col orscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; heightx"></iframe>

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.

[scrap]

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']); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;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'])); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;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&amp;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 :)

[colinS)]

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'])); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;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&amp;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 -->