[SOLVED] Add Facebook Comments to CMS page

[NOSaint]

Hey guys,

 

I have PS 1.5.4 and I'd like to add the Facebook Comments feature to one of my CMS pages. Any ideas on how to do it?

 

https://developers.f...ugins/comments/

Edited August 29, 2013 by NOSaint (see edit history)

[vekia]

use this code:

<div id="fcbcfooter"><div data-href="http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}" class="fb-comments" data-width="500px;" data-num-posts="10"  data-colorscheme="light"></div></div>

 

at the end of cms.tpl file located in your theme directory.

 

of course you can change width (500px) number of posts (10) and color sheme (light / dark)

[NOSaint]

Thanks Vekia!

 

Can I adapt it to appear on a specific page or will it appear on every CMS page?

[NOSaint]

Am I missing an additional line of code?

It is not appearing on any of my CMS pages...

[vekia]

you have to add also special code in the page header:

<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&appId=506964709387702";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

+ remember to change the 506964709387702 to your appId (but you can use it if you want)

 

is there any chance to check your website? i will do it with pleasure

[NOSaint]

Thanks Vekia!

 

Yes I added that code to the end of the cms.tpl using the {literal} tags and it appeared.

 

But it's now appearing on every CMS page. Is there a way to make it only appear on certain pages?

 

http://www.knittwitt.com/content/10-pinterest

[vekia]

in this case you will have to define if conditions

 

{if $smarty.get.id_cms==3 OR $smarty.get.id_cms==2 OR $smarty.get.id_cms==9}

comments code here

{/if}

 

where the OR $smarty.get.id_cms==2 is an ID number of CMS page

for these pages your comments will appear, for all pages not defined in IF condition facebook comments will not appear

[NOSaint]

Awesome!

 

Where do I put the conditions?

Anywhere or is there a certain place in the cms.tpl file?

 

also...do those conditions work with pretty urls turned on?

Edited August 28, 2013 by NOSaint (see edit history)

[vekia]

exactly there where you want to display facebook comments.

ofcourse inside this if condition - insert the code for facebook comments.

[NOSaint]

Ok something is not right. The code is actually appearing on the webpage now.

 

Can you tell me what I'm doing wrong? Currently I'm working in my cms.tpl file. I've inserted the code at the end of the file because that's where I want the comments to appear. But I only want them to appear on certain CMS pages so I'm trying to write the if/condition rule. When I do, the rule actually appears on the webpage and furthermore the FB Comments still appear on every CMS page.

 

This is the code I'm using right now at the end of the cms.tpl file

 

{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&appId=93355466934";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{if $smarty.get.id_cms==3 OR $smarty.get.id_cms==14 OR $smarty.get.id_cms==9}
<div class="fb-comments" data-href="http://www.knittwitt.com/blog" data-width="470"></div>
{/if}
{/literal}

[vekia]

use this code:

{if $smarty.get.id_cms==3 OR $smarty.get.id_cms==14 OR $smarty.get.id_cms==9}
{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&appId=93355466934";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://www.knittwitt.com/blog" data-width="470"></div>
{/literal}
{/if}

 

now it will work because {if} conditions are out off the {literal} tags

 

{literal} tag means that smarty syntax will not be "compiled" so you see the code in the page body.

[NOSaint]

Thanks Vekia as always!

 

I have it figured out I believe! Finally!

 

The main problem I discovered is that using the FB comments code on the cms.tpl file will put the FB comments box on EVERY CMS page. So it'll appear on any page you create using the CMS module in the BO. But that's not what I wanted in this situation. I only wanted the FB Comments box to appear on specific pages. To achieve this I used an updated code and put it at the end of the page inside html code of the CMS page I created. You have to remove the literal tags once you do so because as Vekia stated they show up on the page.

 

Doing it this way is more time consuming because it means that I'll need to adapt the code every time I create a new CMS page that I want the FB comments box on. But, applying the code in the cms.tpl (as I originally wanted) will not only put the box on every page, but every comment will appear as the same on every CMS page. So for example, if you put "testing" in the FB comments box on the Terms & Conditions page...the FB comment box on the "About us" page will also display "testing".

 

The only work around that I've found so far is putting the html code on each individual page. If someone has a better way I'm all ears!

 

Thanks again Vekia!

[vekia]

yea thanks for explanation, im convinced that your solution will be heplful for all merchants here with similar problem.

I think that this topic is a nice know-how, i will create in nearest future little tutorial about that - whole topic is worth it!

[geebass]

Trying to get this to work and I can't where does the code go in the header.tpl

 

after <body

 

tag

[geebass]

no matter where I put it it is changing nothing I am using a themed page.  Techmarket and I am editing the the cms and header.tpl in the theme directory but it is doing nothing. any ideas

[geebass]

I'm using 1.5.6.2 btw