[SOLVED] Facebook LIKE for Products

[HandCraft]

Hello,

 

In our site http://www.handcraft.co.in we do have Share button at the top but i need facebook 'Like' button for each n every product.

 

Also at the top [besides Share button] i wish to provide f Like or Recommend button exclusively.

 

Any free/paid module available?

 

I am bit confused whether to provide f 'Like' button or f 'Recommend' button. Plz guide!! Thanks in advance

[Richard S]

Google is really best friend on this kind of topics.

 

http://www.econtentsite.com/Prestashop/facebook-like-button-for-prestashop-product-pages.html

http://www.presto-changeo.com/en/prestashop-free-modules/45-facebook-like-button.html

 

 

Hello,

 

In our site http://www.handcraft.co.in we do have Share button at the top but i need facebook 'Like' button for each n every product.

 

Also at the top [besides Share button] i wish to provide f Like or Recommend button exclusively.

 

Any free/paid module available?

 

I am bit confused whether to provide f 'Like' button or f 'Recommend' button. Plz guide!! Thanks in advance

[HandCraft]

Thanks for ur kind reply but I would like to know whether f "Like" button will be better of "Recommend" button?

[Richard S]

It's really on your choice. For example, recommend might be better because it makes an illusion that person bought the product and recommends it to others. Like does not sound like that.

[ysns]

I use this code to put social codes in my product page. I am not a programmer so please get backup before use it.

Before start get facebook and other social webbsite button codes from develelopers web site

for facebook

http://developers.facebook.com/docs/reference/plugins/like/

for twitter

http://twitter.com/goodies/tweetbutton

 

I already put googleplus code below.

 

How to do

1.Open your product.tpl with notepad.

2.put this code where ever you like. I put below description block but you can put somewhere else.

<table>
<tr>
<td style="padding: 10px 20px 20px 20px; margin: 0px 0px 0px 0px">FACEBOOK CODE</td>
<td style="padding: 10px 20px 20px 20px; margin: 0px 0px 0px 0px">TWITTER CODE</script></td>
<td style="padding: 10px 20px 20px 20px; margin: 0px 0px 0px 0px"><div id="googleplus"></div><g:plusone></g:plusone></td>
</tr>
</table>

3.To use google plus you need to put googleplus script before body in footer.tpl like this

{literal}
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'tr'}
</script>
{/literal}</body>

4.You can change positions changing padding and margin number.

I hope it works

[HandCraft]

Thanks a lot Richard....I will use that Recommend button n will let u know as well....

 

 

It's really on your choice. For example, recommend might be better because it makes an illusion that person bought the product and recommends it to others. Like does not sound like that.

[HandCraft]

Thanks YSNS..........May I know how googleplus will be useful? If u hv google+ on ur site, may i hv ur site name plz?

 

I use this code to put social codes in my product page. I am not a programmer so please get backup before use it.

Before start get facebook and other social webbsite button codes from develelopers web site

for facebook

http://developers.facebook.com/docs/reference/plugins/like/

for twitter

http://twitter.com/goodies/tweetbutton

 

I already put googleplus code below.

 

How to do

1.Open your product.tpl with notepad.

2.put this code where ever you like. I put below description block but you can put somewhere else.

<table>
<tr>
<td style="padding: 10px 20px 20px 20px; margin: 0px 0px 0px 0px">FACEBOOK CODE</td>
<td style="padding: 10px 20px 20px 20px; margin: 0px 0px 0px 0px">TWITTER CODE</script></td>
<td style="padding: 10px 20px 20px 20px; margin: 0px 0px 0px 0px"><div id="googleplus"></div><g:plusone></g:plusone></td>
</tr>
</table>

3.To use google plus you need to put googleplus script before body in footer.tpl like this

{literal}
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'tr'}
</script>
{/literal}</body>

4.You can change positions changing padding and margin number.

I hope it works

[HandCraft]

Plz give me links of few sites where f "Share" or "Recommend" or "Like" buttons are used? I need to see output also.

[ysns]

here you can find print screen

[HandCraft]

Thanks YSNS

 

here you can find print screen

[HandCraft]

Once i will hv done f integration, i will let u know guys here....then u plz give ur opinions...Thanks!!!

[yacenty]

ysns: Your mod looks nice - have You tried to implement Facebook module on main page of shop to show how many fans do we have and show some faces of them?

[HandCraft]

YACENTY....we hv around 350 Likes on our FB page. So will u advice to show this number while installing FB module on 1st page of our site?

 

ysns: Your mod looks nice - have You tried to implement Facebook module on main page of shop to show how many fans do we have and show some faces of them?

[yacenty]

I use this code to put social codes in my product page. I am not a programmer so please get backup before use it.

Before start get facebook and other social webbsite button codes from develelopers web site

for facebook

http://developers.facebook.com/docs/reference/plugins/like/

for twitter

http://twitter.com/goodies/tweetbutton

 

 

could You tell me a little bit more which options should be filled in and how?

Just now - with default FB variables it works but a little bit crazy

 

could You share Your settings to achive what You had aleady showed us in screenshot?

 

Thanks in advance

 

Handcraft: I do not understand Your question - I Had already added FB page who likes us and it gives us some impact on the visitors - we get it more, and many of them are from FB

[ysns]

Hello

Before start anything get back up your files.

This is for 1.3.7. Probably this is the worst way to do it. However I am not a programmer like you so if it works its ok for me

Open your product.tpl (you can find it in public_html/themes/yourtheme/product.tpl) with Notepad+ or something like that.

Now you need to decide where you want to put your social buttons. I put them as it shown in printscreen. So in my case its below {$HOOK_PRODUCT_FOOTER} . In the code you will see {$HOOK_PRODUCT_FOOTER} also in table. I put it inside the table to align it with others.

After you decide the place put this table. (Be carefull where to put sometimes it brokes the code. In my case it show like this

{/foreach}
				</ul>
			</div>
		</div>
		<div class="clear"></div>
	</ul>
{/if}
{$HOOK_PRODUCT_TAB_CONTENT}
</div>
</div>
{/if}
<!-- THIS IS SOCIAL PLUGIN CODES-->
<table>
<tr>
<td style="padding: 0px 0px 0px 15px; margin: 0px 0px 0px 0px">{$HOOK_PRODUCT_FOOTER}</td>
</tr>
<tr>
<td style="padding: 0px 0px 20px 20px; margin: 0px 0px 0px 0px">FACEBOOK CODE</td>
<td style="padding: 0px 0px 20px 0px; margin: 0px 0px 0px 0px"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></td>
<td style="padding: 0px 0px 20px 60px; margin: 0px 0px 0px 0px"><div id="googleplus"></div><g:plusone></g:plusone></td>
</tr>
</table>
<table>

I assume you are like me dont know anything about coding so here is the explanation. I am going to explain twitter facebook is also same. For google plus one you need to put another script to footer. Google will guide you for this.

This is the code for twitter

<td style="padding: 0px 0px 20px 0px; margin: 0px 0px 0px 0px"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></td>

Bold one is the script you take from http://twitter.com/goodies/tweetbutton. All you need to do is put this code between <td style>YOUR CODE<td>.

Logic is same with facebook.

For google plus you need to put an extra script inside the footer.tpl

 

 

<!-- [[%FOOTER_LINK]] -->
			</div>
		</div>
</div>
{/if}
{literal}
<!-- GOOGLE PLUS SCRIPT -->
</noscript>	
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'tr'}
</script>
{/literal}</body>
</html>

 

You can use this code below. All you need to get your own facebook like code.

 

FOR product.tpl

<!-- THIS IS SOCIAL PLUGIN CODES-->
<table>
<tr>
<td style="padding: 0px 0px 0px 15px; margin: 0px 0px 0px 0px">{$HOOK_PRODUCT_FOOTER}</td>
</tr>
<tr>
<td style="padding: 0px 0px 20px 20px; margin: 0px 0px 0px 0px">FACEBOOK CODE</td>
<td style="padding: 0px 0px 20px 0px; margin: 0px 0px 0px 0px"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></td>
<td style="padding: 0px 0px 20px 60px; margin: 0px 0px 0px 0px"><div id="googleplus"></div><g:plusone></g:plusone></td>
</tr>
</table>
<table>

 

For footer.tpl

<!-- [[%FOOTER_LINK]] -->
			</div>
		</div>
</div>
{/if}
<!-- GOOGLE PLUS SCRIPT -->
{literal}
</noscript>	
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'tr'}
</script>
{/literal}</body>
</html>

 

I hope it works for you.

Regards

[yacenty]

this is already done,

there is other topic like I asked before - how to configure it on FB side.

Just now when I click - LIKE, FB shows my main page and do not show picture of the product - this is the clue.

here is the live example:

http://www.agro-modele.pl/pl/ciagnik-john-deere-9530t-na-gasienicach-478.html

 

the site is not yet fully finished, anyway - big thanks for Your help

[HandCraft]

Even we also done...plz see it....still half finished

 

My link

[ysns]

yacenty

I am also trying to figure out how facebook social plugins works. If I find something usefull I will post here but for now thats all I know

[yacenty]

Handcraft - on Your site it seems it's working OK

what have You done to get picture and right page name?

[HandCraft]

Dear YACENTY.......U know wat i did? Instead og itching my head n spending my energy over it, i just hired developer, paid him n got it done......Within a week time u will see many more changes on our site......for any help just mail me at [email protected]

[yacenty]

I have also hired, but he is responsible for new layout and implementing it on site.

In the meantime I'm trying to do some addons by my own

 

Thanks for info

[HandCraft]

CLOSED............Thanks

[subulica]

I use this code to put social codes in my product page. I am not a programmer so please get backup before use it.

Before start get facebook and other social webbsite button codes from develelopers web site

for facebook

http://developers.fa...e/plugins/like/

for twitter

http://twitter.com/goodies/tweetbutton

 

I already put googleplus code below.

 

How to do

1.Open your product.tpl with notepad.

2.put this code where ever you like. I put below description block but you can put somewhere else.

<table>
<tr>
<td style="padding: 10px 20px 20px 20px; margin: 0px 0px 0px 0px">FACEBOOK CODE</td>
<td style="padding: 10px 20px 20px 20px; margin: 0px 0px 0px 0px">TWITTER CODE</script></td>
<td style="padding: 10px 20px 20px 20px; margin: 0px 0px 0px 0px"><div id="googleplus"></div><g:plusone></g:plusone></td>
</tr>
</table>

3.To use google plus you need to put googleplus script before body in footer.tpl like this

{literal}
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'tr'}
</script>
{/literal}</body>

4.You can change positions changing padding and margin number.

I hope it works

dont workerd for me

[kingsinnersoul]

DELETED

Edited June 3, 2013 by kingsinnersoul (see edit history)

[jahidulewu]

I want to show like button on each product.

 

I use this code on my page.

 

{literal}

<div id="fb-root"></div>
<script>(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_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div class="fb-like" data-href="http://bengalmart.com/home/16-shirt.html" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
{/literal}

 

data-href="http://bengalmart.com/home/16-shirt.html" this code is a single product. not all product? How I get like in others product?

 

Please help me on this.

[vekia]

isntead of url to product add:

{/literal}http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}{literal}

[jahidulewu]

Dear Vekia

 

thanks for your code. is it the actual product? Before like my page shows "3,973,597 people like this. Be the first of your friends."

 

But No one gives like in this product?

 

Here is my url.

 

http://bengalmart.com/home/16-shirt.html

 

 

Thanks

Md. Jahidul Islam

[vekia]

i don't think so

you use this module? or maybe modified it?

[jahidulewu]

I just copy paste this code

 

 

 

{literal}

<div id="fb-root"></div>
<script>(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_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div class="fb-like" data-href="http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

 

 

 

Yes I used this module in my localhost.  In where I use your code?

Edited January 12, 2014 by jahidulewu (see edit history)

[vekia]

and url that you pasted? you use code there?