Like button, FB comments in CMS pages

[Mipou]

Hi everyone

 

I'd like to know how we can create a like button, or facebook comments, or a like boxe in a CMS page.

 

In fact for a very simple like button, it is possible to do with iframe.

I found the code in developers.facebook.com, et i used the html editor to add the button.

 

<iframe src="https://www.facebook.com/plugins/like.php?href=YOUR_URL"

scrolling="no" frameborder="0"

style="border:none; width:450px; height:80px"></iframe>

 

But FB comments or likebox, or send to are not available with iframe.

We have to put this somewhere

 

 

<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/fr_FR/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

 

 

 

And I don't know where to insert this part of the code.

 

Thanks for your help.

[CartExpert.net]

Hi.

 

You insert that code where you want the button to appear.

 

Do not forget to use {literal}{/literal} for the script.

 

Regards.

 

Robin.

 

The CartExpert Team

[Mipou]

Hi CarExport.net

 

Thank you for your answer, but I don't understand where I have to insert the code.

 

 

In fact, Facebook give us two parts of code.

 

1 - SDK javascript, which is

 

<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/fr_FR/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

 

How do you have to put {literal}{/literal} ?

With literal, we can put this part in the html editor ?

 

2 - the code that makes the button appear, which is

 

<div class="fb-comments" data-href="http://" data-num-posts="10" data-width="670"></div>

 

Could you please explain me where to insert these two parts of the code ?

 

Thank you very much

 

Best regards

[CartExpert.net]

Hi.

 

Why do you want to put it in the HTML editor? Why not put it in the product.tpl?

 

 

Actually the Javascript code makes it appear.

 

The {literal} has to be used in the TPL files if you insert Javascript code that has the { } characters.

 

So your script should look like:

{literal}
<script>

/*CODE GOES HERE*/

</script>
{/literal}

 

Regards.

 

Robin.

 

The CartExpert Team

[mihaipatriche]

I tried to do the same thing (put a Facebook comment box in a csm page) but it did not work, for some reason the editor does not admit it.

 

this is the code:

 

<div class="fb-comments" data-href="http://quaqo.com" data-num-posts="2" data-width="470"></div>

 

 

 

and:

 

 

<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/ro_RO/all.js#xfbml=1&appId=161758987288786";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

 

 

 

I manage to put it with an iframe but as you all know the iframe is not resizable and you have to put scrolling bars on the side of the comment box to see all the comment.

 

 

anybody knows what to modify to this code:

 

<div class="fb-comments" data-href="http://quaqo.com" data-num-posts="2" data-width="470"></div>

 

so the editor won't delete it.

 

tnks very much.

[davnem]

Hi mihaipatriche,

 

Actually I was looking for the same reason to put any FB plugin on any CMS page (not only there in my cause) as you couple of days.

 

I found following solution that might help you or anyone who wants to put some FB plugin or any html tag on particular CMS page.

 

There are two pcs of code:

1. FB SDK

2. FB plugin

 

I put the the SDK - which is DIV and SCRIPT - on header.tpl right before <div id="page">

 

<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_GB/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

 

I put the SDK on header.tpl as I want to use couple other FB plugins not only on CMS. I believe you can put the SDK into cms.tpl or anywhere else - try it if you need it for some reason.

 

The second part is the FB plugin. I put FB like box on cms.tpl

 

<div class="fb-like-box" data-href="http://www.facebook.com/pages/Teastoryco/357274950975831" data-width="640" data-height="220" data-show-faces="true" data-stream="false" data-header="true"></div>

 

You just need to put this bit code {if $request_uri|strstr:"13"}FB-PLUGIN-PUT-HERE{/if} on cms.tpl. The best place is of course just before or just next to {$cms->content} it is depending on your needs how to display it.

 

The number 13 is id of the CMS page you want to use the html code there. For this part thanks Emmanuel Paris for the hint.

 

Lets it, I think it's pretty much what you should do.

 

 

I hope it help

 

David Nemec

[luckylids]

Hi.

 

Why do you want to put it in the HTML editor? Why not put it in the product.tpl?

 

 

Actually the Javascript code makes it appear.

 

The {literal} has to be used in the TPL files if you insert Javascript code that has the { } characters.

 

So your script should look like:

{literal}
<script>

/*CODE GOES HERE*/

</script>
{/literal}

 

Regards.

 

Robin.

 

The CartExpert Team

 

 

 

I have been struggling for hours with this fb SDK everywhere I wend they all kept saying to put the javascript within the body in header.tpl or in the footer.tpl - well I did that and my page disappeared nothing shows up its just blank. Thats because EVERYONE but cartexpert failed to mention you need the {literal} {/literal}

[CamillaVA]

Anybody knows if this works in 1.5.4.1 ?

[flower34]

Have this problem too the like button show. but when click like it does not update to facebook activity.

 

Any one got this to work ?