Facebook comment in highslide MOD

Post by **jabhi** » 27 Jun 2012, 08:25

Can you make edits for adding facebook comment system to highslide MOD like here :
http://www.roadrash.no/hs-support/capti ... ents1.html
I think it requires facebook appID.

Post by **Stoker** » 27 Jun 2012, 10:19

Isnt there instructions on that site?

Post by **jabhi** » 27 Jun 2012, 11:53

I asked them and they said like this :

I can’t give you a guide for how to add the Facebook comment system to Highslide since we don’t have any official solution for this.

We do have this demo page: http://www.roadrash.no/hs-support/capti ... ents1.html This demo page is based on a solution added to the forum by another Highslide user some time ago.
You need to study the source code to see how it works. Be aware that this solution requires a small piece of custom CSS, a highslide caption div with a custom wrapper, and custom coding in the Highslide settings and in the onclick event. You also need a Facebook appID.

I am unable to understand that advice since I don't know coding, that's why I asked your help.

Post by **jabhi** » 13 Jul 2012, 07:06

They gave me below code :
overall_header

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" lang="en" xml:lang="en">

Head section,

Code: Select all

<script type="text/javascript" src="highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

Code: Select all

hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75;
hs.captionOverlay.position = 'rightpanel';
hs.captionOverlay.width = '400px';
hs.preserveContent = false;

// use the highslide-heading as caption below the images
hs.headingOverlay.position = 'below';
hs.numberPosition = 'heading';

and

Code: Select all

hs.Expander.prototype.onAfterGetCaption = function(sender) {
   sender.caption.innerHTML = document.getElementById(sender.custom.fbid).innerHTML;
};

In body part,

Code: Select all

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

and

Code: Select all

    <a href="images/gallery1.jpg" class="highslide" onclick="return hs.expand(this, null, {fbid: 'img101'})">
           <img src="images/gallery1.thumb.jpg" alt="Caption for first image" /></a>
        <div class="highslide-caption"></div>
        <div class="highslide-caption-fix" id="img101"><fb:comments href="http://www.roadrash.no/hs-support/images/gallery1.jpg" num_posts="5" width="365" publish_feed="false" xid="id1"></fb:comments></div>

I think body part need some modification and where should I place this ?