Facebook Comments - If they can do it in Geeklog

	Forum Index > glFusion > glFusion Add-on, Plugin Support
Facebook Comments - If they can do it in Geeklog

Printable Version

By: richardbkk (offline) May 14 2012 04:57 am (Read 2210 times)

richardbkk

Facebook comments under the stories in glFusion, if they can do it in Geeklog how difficult could it be to do it in glFusion?

See http://www.rudebastard.com/

Active Member

Group Comfort
Level:: +4

Registered: 07/29/08
Posts: 415
Location: Bangkok, Thailand

By: Mark (offline) May 14 2012 07:26 am

Mark

I don't see any comments at the site you referenced. If you want a Facebook link, use the AddThis plugin, it will provide Facebook and several other social networking site integrations.

Thanks!
Mark

glFusion - Enhanced Content Management

Admin

Group Comfort
Level:: +104

Registered: 10/21/05
Posts: 5904
Location: The Great State of
Texas

By: suprsidr (offline) May 14 2012 13:47 pm

suprsidr

rudebastard simply added the proper javascript to his templates for the facebook social plugin
http://developers.facebook.com/plugins/?footer=1

-s

Regular Member

Group Comfort
Level:: +3

Registered: 12/21/06
Posts: 74

By: Chief123 (offline) May 14 2012 21:08 pm

Chief123

Quote by: Mark

I don't see any comments at the site you referenced. If you want a Facebook link, use the AddThis plugin, it will provide Facebook and several other social networking site integrations.

Thanks!
Mark

Are you logged into Facebook? I can see the comments section.

Active Member

Group Comfort
Level:: +3

Registered: 12/29/08
Posts: 199

By: ironmax (offline) May 19 2012 22:49 pm

ironmax

To make it easy, simple and quick for your stories, paste the code below in your featuredstorytext.thtml and storytext.thtml files. All you should need to do is adjust the width to your preferences.

PHP Formatted Code

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script><fb:comments href="{article_url}" num_posts="10" width="800"></fb:comments>

You can also do this for the forums as well by inputting the below code into the topicfooter.thtml file after the closing table tag. I would do it in this file because it would become to messy with individual forum postings if done in the topic.thtml file. So this way its at the end of the forum postings.

PHP Formatted Code

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script><fb:comments href="{site_url}/forum/viewtopic.php?topic={topic_id}#{topic_id}" num_posts="10" width="800"></fb:comments>

Michael

Need web services? Contact Us at Spacequad Internet Services

Active Member

Group Comfort
Level:: +8

Registered: 09/14/06
Posts: 308

By: Rocky (offline) Aug 04 2012 14:37 pm

Rocky

MIchael,

This code doesn't seem to work any longer. Maybe Facebook has changed their system.

I got the new codes from the FB site, but there is a yellow box showing underneath the comment box, warning me to use "explicit url."

So I can't use href="{article_url}" for now.

Is there a way to work around it? I've searched the web and found a lot of complaints about it, but no solution.

Is there a veriable like href="http://domain.com/{article_id} ?

Thanks!

Sam

Active Member

Group Comfort
Level:: +4

Registered: 01/08/06
Posts: 519

By: ironmax (offline) Aug 04 2012 15:17 pm

ironmax

Quote by: Rocky

Sam,

It works for my dev site located at http://dev.spacequad.com and have had no issues. Here is a copy of the file used for the featuredstorytext.thtml file. See the bottom of code for how I have it implemented.

PHP Formatted Code

{# begin {templatelocation} #}

<div class="story-featured">

    <span class="story-icons">

{# displays the Submit to Digg.com icon. For more info visit http://digg.com/tools/integrate #}

                {!if digg_enabled}

                <span style="padding-right:3px;">

<script type="text/javascript">

digg_url = '{article_url}'; //permalink to article

digg_skin = 'icon'; //icon, compact, normal(if left blank)

digg_window = 'new'; //open's Digg.com window in a new window, if left blank will use same window

</script>

<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

                </span>

                {!endif}

{# end Digg.com icon code #}

        {plugin_icon_vars}

        {email_icon}

        {print_icon}

        {feed_icon}

        {edit_icon}

    </span>

    <h1>{story_title_link}</h1>

    <div class="story-information">

        <p>{story_date}</p>

        <p>{lang_contributed_by} {start_contributedby_anchortag}{contributedby_author}{end_contributedby_anchortag}</p>

        <p>{lang_views} {story_hits}</p>

        {!if plugin_meta_vars}

          <p>{plugin_meta_vars}</p>

        {!endif}

    </div>

    <div class="story-body">

        {story_anchortag_and_image}{story_introtext}{story_bodytext}

        {!if plugin_body_vars}

          {plugin_body_vars}

        {!endif}

    </div>

    <div class="story-footer">

        <p>{page_selector}</p>

        <p>{readmore_link}</p>

        {!if rating_bar}

        <p>

        {!endif}

        {plugin_itemdisplay}

           {!if comments_count}

            {comments_with_count}

           {!endif}

            &nbsp;&nbsp;{post_comment_link}

           {!if trackbacks_count}

            {trackbacks_with_count}

           {!endif}

        {!if plugin_footer_vars}

          <div>{plugin_footer_vars}</div>

        {!endif}

        {!if rating_bar}

          </p>

          {rating_bar}

        {!endif}

    </div>

</div>

<div id="fb-root"></div><script class="cc-onconsent-social" src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script><fb:comments href="{article_url}" num_posts="10" width="800"></fb:comments>

<div class="block-divider"> </div>

{# end {templatelocation} #}

If you still have issues, let me know, and I'll see if I can figure out what your doing wrong.

Michael

Need web services? Contact Us at Spacequad Internet Services

Active Member

Group Comfort
Level:: +8

Registered: 09/14/06
Posts: 308

By: Rocky (offline) Aug 05 2012 08:27 am

Rocky

I'll try again. Two questions:

- Do I have to replace appId=APP_ID with my actual APP_ID or leave the code as it is?
- Do you have any other codes elsewhere, such as in header, something like xmlns:fb="http://ogp.me/ns/fb#"? Is this the only code you need?

Thanks!

Sam

Active Member

Group Comfort
Level:: +4

Registered: 01/08/06
Posts: 519

By: ironmax (offline) Aug 05 2012 15:46 pm

ironmax

Quote by: Rocky

Sam,

Well I guess I forgot about the tiny tag in the htmlheader.thtml file. See below. As for the appid...no...just leave everything as is, with NO changes, and it should work.

PHP Formatted Code

</head>

<body dir="{direction}" style="background:#000000;">

<div id="fb-root"></div>

<div>

  <a name="top"></a>

  <a href="#content-start"> {# for screenreaders #}

  <img class="hidden" src="{layout_url}/images/speck.gif" alt="skip navigation"{xhtml}>

  </a>

</div>

{# end {templatelocation} #}

I think that should solve that should solve your problem.

Michael

Need web services? Contact Us at Spacequad Internet Services

Active Member

Group Comfort
Level:: +8

Registered: 09/14/06
Posts: 308

By: Rocky (offline) Aug 05 2012 19:05 pm

Rocky

Wow, it works!

I've been trying an entire day yesterday in different ways and couldn't figure it out.

Thank you very much!

Sam

Active Member

Group Comfort
Level:: +4

Registered: 01/08/06
Posts: 519

By: ironmax (offline) Sep 12 2012 00:01 am

ironmax

Here's an updated version of the Facebook comments. For those that are W3C conscious and want validated FB code, here it is.

htmlheader.thtml file. Place the below code just after the <body dir="{direction}" style="background:#000000;"> tag line.

PHP Formatted Code

<div id="fb-root"></div>

<script type="text/javascript">(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>

featuredstorytext.thtml and storytext.thtml files. Place below code just above <div class="block-divider"> </div> at the bottom of the file.

PHP Formatted Code

<script language="javascript" type="text/javascript">

//<![CDATA[

document.write('<div class="fb-comments" data-href="{article_url}" num_posts="10" width="800"></div>');

//]]>

</script>

Now if you want to do this for the forums, its only advisable to place the above code into the topics.thtml file towards the bottom, as it would get really messy having it after each post. Just replace the {article_url} with {site_url}/forum/viewtopic.php?topic={topic_id}#{topic_id} and you should be good to go. Not tested with the forum for this code.

Michael

Edit: To make this a fluid width, put the following into your style.css file.

PHP Formatted Code

.fb-comments, .fb-comments span, .fb-comments iframe {width: 100% !important;}

Need web services? Contact Us at Spacequad Internet Services

Active Member

Group Comfort
Level:: +8

Registered: 09/14/06
Posts: 308

By: richardbkk (offline) Oct 21 2012 01:29 am

richardbkk

I try to integrate the code into article.html and I only get "The comments plugin requires an href parameter."

Active Member

Group Comfort
Level:: +4

Registered: 07/29/08
Posts: 415
Location: Bangkok, Thailand

By: ironmax (offline) Oct 21 2012 14:12 pm

ironmax

Quote by: richardbkk

I try to integrate the code into article.html and I only get "The comments plugin requires an href parameter."

Richard,

Make sure you read thru all the posts in this thread and follow the example. The code supplied in this thread was made for use with glFusion and Geeklog. If you are getting an error about the href parameters, to me is sounds like you missed including data-href="{article_url}" portion or something is messed up with that line. If you want to have another view point on this, see my page at Spacequad Internet Services.

Michael

Need web services? Contact Us at Spacequad Internet Services

Active Member

Group Comfort
Level:: +8

Registered: 09/14/06
Posts: 308

By: richardbkk (offline) Oct 22 2012 19:23 pm

richardbkk

Quote by: ironmax

Quote by: richardbkk

I try to integrate the code into article.html and I only get "The comments plugin requires an href parameter."

Actually I can get the Facebook comments to work when I enter the code into storytext.thtml, but in article.thtml I get this "The comments plugin requires an href parameter." error.... It seems to be a glFusion error...

I need the facebook code in Article.thtml as the website I want to use it has often lots of comments... if it's in storytext.thtml it will breakup the clean look of the front page... (also people should only be allowed to enter comments if they have read the whole article....)

Active Member

Group Comfort
Level:: +4

Registered: 07/29/08
Posts: 415
Location: Bangkok, Thailand

By: ironmax (offline) Oct 22 2012 22:12 pm

ironmax

Quote by: richardbkk

Quote by: ironmax

Quote by: richardbkk

I try to integrate the code into article.html and I only get "The comments plugin requires an href parameter."

Richard,

It should still be the same code. I have not tested it in the /layout/theme name/article/article.thtml file. I can do some testing to come up with a possible alternative though. I'll start on that, and get back to you.

Edit:

Okay, here is the original code that Facebook supplied and all I did was suppliment the href with {article_url}

PHP Formatted Code

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

If Mark could jump in here, maybe he could figure out why the article url is not being picked up, like it is when used in the feature or story thtml files.

Michael

Need web services? Contact Us at Spacequad Internet Services

Active Member

Group Comfort
Level:: +8

Registered: 09/14/06
Posts: 308