Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Tips, Tricks & Tutorials
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
Prev Previous Post   Next Post Next
  #1  
Old June 19th, 2012, 09:13 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Smile Add Facebook Like Button to Product Detail Page

UPDATE: June 22, 2012

I've written 4 new tutorials for adding the Facebook Like button to specific areas in your store.

Please have a read as they are considerably different than my initial instructions below.

Adding a like button to your store's front page
Adding a like button to your product detail pages
Adding a like button to your category pages
Adding a like button to each product on the category page (ADVANCED)


Here's how to add a Facebook "Like" button to your product details page. This requires that you are using the Datafeedr plugin 3.8 or greater.

1. Go here: The Factory > Your Store > VIEWS > PRODUCT DETAIL > Default

2. Add a Text Module to the view (where you want the Like button to appear. Adding a Text module is optional but for this tutorial, we'll keep it simple).

3. Click the template icon ( ) for the new Text Module.

4. Copy and paste the following code into your Text module:
HTML Code:
<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo datafeedr_tools()->current_url(true); ?>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" 
scrolling="no" 
frameborder="0" 
style="border:none; overflow:hidden; width:450px; height:80px;" 
allowTransparency="true">
</iframe>
6. Save.

6. While you are still in the PRODUCT DETAIL view, go to the View menu and click the View <head> Elements link:



7. In the text area that appears, paste the following code at the end of the text area:

HTML Code:
<meta property="og:image" content="http://<?php echo $_SERVER['HTTP_HOST']; ?>[product.image tag='0']" />
8. Save.

9. Go here: WordPress Admin Area > Tools > Datafeedr

10. Click the [Update Settings Only] button.

Now the like button should be appearing on your pages like so:



You can learn more on how to configure the iframe here http://developers.facebook.com/docs/.../plugins/like/ under Step 1 - Get Like Button Code.


Eric
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Facebook "like" button in product detail page charlesk Questions 12 June 19th, 2012 09:15 AM
Product Detail Page webmaster Questions 2 September 3rd, 2011 08:17 PM
Back button on Detail page caused problem with sidebar jdrom Problems 0 July 10th, 2011 10:50 PM
Adding a back button to your Product Detail page ayorofrance Tips, Tricks & Tutorials 9 June 2nd, 2011 11:09 AM
Get rid of the tag cloud on the product detail page ericnmon Questions 2 May 23rd, 2011 03:14 PM


All times are GMT -5. The time now is 12:51 PM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.