Comments - Lightbox

geoff777 · 2009-11-07 15:44:43

Hi I’m trying to make it easier to post comments on my site (and avoid page refreshing).

At present on my frontpage I have a number of articles with a comments invite link below each.
This comment invite link takes you to the individual article with a comment form below.
By the time the user has done this, then previewed & submitted .. it seems a long process with a few page refreshes.

I’d like a lightbox to appear on the frontpage or individual article and the process be handled from inside the box.

I’m trying an7_comments which seems to fit the bill but can’t get it working.

Anyone know if this is possible, and if so, how I achieve this?

Thanks

Last edited by geoff777 (2009-11-07 15:46:04)

Neko · 2009-11-07 20:01:03

I was thinking about the same thing… that Lightbox would be perfect in order to post comments.

While I was trying to figure out a way to achieve your very same goal, I realized that Lightbox doesn’t save textarea states and that could be tricky when you want to re-review the original article or other comments before posting yours. So I gave up. In a perfect world it would be a perfect solution. Actually, it is far from it. It solves some usability/interface problems while introducing new ones.

Just my 2c.

Last edited by Neko (2009-11-07 20:02:58)

THE BLUE DRAGON · 2009-11-08 15:14:25

Hey why not move on and start using the ‘Facebook comments box’ ?
make the comments more social and avoid page refreshing.

If you do want to, so here is how to do it:
1.
First of all you need to create your application at: http://www.facebook.com/developers
after creating your application you edit the settings by switching to the ‘Connect’ tab on the left side,
there you enter your site url.
example:
Connect URL: http://www.mysitedomain.com
Base Domain: mysitedomain.com
that are the only 2 things you need to edit in your application.
and you click on ‘Save Changes’
(of course you can also upload a Logo and Icon images if you wish to.)

Copy your API Key
that all you need to do on facebook.

2.
Download this cross-domain receiver file (right click – save target as…), and upload it to your site root folder.

3.
add: xmlns:fb="http://www.facebook.com/2008/fbml" to the <HTML> tag.

4.
add this script between the <HEAD> tag:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

5.
create a new form type misc and name it as you want (example: fb_comments).
in the form put this code:

<fb:comments xid="<txp:article_id />" url="<txp:permlink />" title="<txp:title />"></fb:comments>
<script type="text/javascript">
    FB.init("abcdefghijklmnopqrstu-YOUR-API-KEY-HERE-vwxyz1234567890","/xd_receiver.htm");
</script>

and replace: abcdefghijklmnopqrstu-YOUR-API-KEY-HERE-vwxyz1234567890 with your API Key

6.
add:

<txp:if_comments_allowed>
<txp:output_form form="fb_comments" />
<txp:else />
Comments are disable for this article.
</txp:if_comments_allowed>

to your regular articles forms (for example: default)
where you want the comments to be (for example below after the <txp:body /> tag)
and you are setup!

If you want (and I’m sure you do) you can customize the look and more with XFBML and CSS
for that visit this page.
be sure to manage your clients as admins so they will receive notifications and be able to delete comments.

and if you don’t want to use facebook comments, so OOPS! lol ;)

Last edited by THE BLUE DRAGON (2009-11-08 15:15:14)

amavai · 2010-09-11 14:25:37

Hi!

Thanks for your explanation about Facebook comments box.

I would like to ask you if this system works for non-facebook user as well..

Many thanks,

Amavai

THE BLUE DRAGON · 2010-09-13 12:16:09

amavai wrote:

I would like to ask you if this system works for non-facebook user as well..

1. This post is old, there is a new version now, visit my tutorial on facebook devs forums:
http://forum.developers.facebook.net/viewtopic.php?pid=221601#p221601

2. Yes it is also letting anonymous visitors (non facebook users) to be able to post comments.

amavai · 2010-09-13 16:12:18

thank you very much Blue Dragon!

I will take a look at that post.

Amavai

amavai · 2010-09-28 18:44:14

Hi Dragon,

Could you please let me know where i can find information about personalization of fb:comments and textpattern?

I have this code, and is working fine. But the comments are repeating the same across every article. Did you know the way to attack this with one form instead putting this code in every article?

<fb:comments xid="1234" url="http://www.mysite.com/blog/" width="470" title="<txp:permlink />"></fb:comments>

Thank you!

THE BLUE DRAGON · 2010-09-28 22:21:53

amavai wrote:

But the comments are repeating the same across every article. Did you know the way to attack this with one form instead putting this code in every article?

1. You need to set a unique XID to each box, you doing it by using the article id#,
You can use the permlink for the URL attribute,
and you can use the article-title for the TITLE attribute.
so in the end you got this:

<fb:comments xid="<txp:article_id />" url="<txp:permlink />" title="<txp:title />"></fb:comments>

2. Yes of course you can just create a form for it for example we will call it “fb_comments”,
and it will incude this code:

<txp:if_comments_allowed>
<fb:comments xid="<txp:article_id />" url="<txp:permlink />" title="<txp:title />"></fb:comments>
</txp:if_comments_allowed>

I personally prefer to use a short-url, this is done by install the smd_short_url plugin
and using it like this: url="<txp:site_url /><txp:article_id />"

after that you can just drop the form in your regular articles’ form using “output_form”:

<txp:output_form form="fb_comments" />

3. I really need to write a full fb-plugins tutorial for txp, I will do it soon and will post it on txptips.

amavai · 2010-09-29 11:40:41

Hi!

thank you very much for your help! it’s work ok! great tip!

After testing some times, I notice that there is no moderation for the comments through this application.. do you know where I can find info to block automatic comments without administration check? Like txp comment system, the admin first read the comment before decide to put it live or not…

Many thanks!

THE BLUE DRAGON · 2010-09-29 12:14:35

amavai wrote:

do you know where I can find info to block automatic comments without administration check? Like txp comment system, the admin first read the comment before decide to put it live or not…

I don’t know how to moderate comments before they go live,
but you can use my retrieve/manage comments tutorial to create one page where you can view and manage all the comments across your site.

Later on I will publish a code for txp where you will get the right title&link to the page where the each comment is coming from.
(I already got it working and running in all my sites [and in a facebook app])

You can also use my email notifications tutorial to receive email notifications when someone post a new comment on your site.

Again I will publish a txp code soon, but you can still use it and change things to work good for you.

Textpattern CMS

Textpattern CMS support forum

#1 2009-11-07 15:44:43

Comments - Lightbox

#2 2009-11-07 20:01:03

Re: Comments - Lightbox

#3 2009-11-08 15:14:25

Re: Comments - Lightbox

#4 2010-09-11 14:25:37

Re: Comments - Lightbox

#5 2010-09-13 12:16:09

Re: Comments - Lightbox

#6 2010-09-13 16:12:18

Re: Comments - Lightbox

#7 2010-09-28 18:44:14

Re: Comments - Lightbox

#8 2010-09-28 22:21:53

Re: Comments - Lightbox

#9 2010-09-29 11:40:41

Re: Comments - Lightbox

#10 2010-09-29 12:14:35

Re: Comments - Lightbox

Board footer