Disclaimer:This is not an attempt to match the app worth billion dollars.

Are you tired of the old YM buttons for your blog or CS?

You can have your own facebook-like chat panel right on your site with the cool slide toggle effect. Skip to the steps. Facebook released its open flatform May 24, 2007.

Facebook Open Platform is a snapshot of the infrastructure that runs Facebook Platform. It includes the API infrastructure, the FBML (Facebook Markup Language) parser, the FQL (Facebook Query Language) parser, and FBJS (Facebook JavaScript), as well as implementations of many common methods and tags...bla bla bla

Unless I have a real need to try drupal for facebook, I am not going to learn Facebook APIs yet just to have this simple app. Simple, huh? Well, I know what I am saying. I do theming:) I just haven't said clearly what to achieve. It's actually a matter of some theming, facebook-like chat panel. Remember the title? And yes you can do it all through a simple tweak of CSS and jQuery. You can't wait to see the demo. Go ahead! Just toggle the Chat with Me button on the bottom right. Well? Uncool? Hm, if you come back here, then I should think it's cooler than you expect:) There are some slide toggle jquery tutorials out there. Mostly are a kind of slide down toggle. Till I post this, I just couldn't find any reference to the one that I wanted to achieve, so I think I can begin a slide up toggle:) I should credit WebDesignerWall for the jQuery code I adapted here so that I don't have to reinvent the wheel. Check the original simple slide panel tutorial here. Other similar tutorials:

If you need unobtrusive toggle, where the last state is still remembered on reload, or page navigation, you have to install jquery-cookie as well. You can get it here. Unless it also retains the flow of conversation on reload, I don't think I have to install this 15.6Kb plugin on my site. You should let me know if you have any luck with it though:) Ok, enough wordy mambo jumbo!

I must assume you have a working drupal site. Other CMS will do just fine.

Prepare yourself

Go get some coffee.

  1. You can create your own stand alone IM if you are ready to go extra miles, of course. Or, drupal has some modules:

    You can also choose a client widget:

    Choose the one that you like most.

  2. If using drupal modules, follow their instructions. Some may produce a block ready to be placed anywhere. If a client widget, then copy the code first.

Start the actual theming

  1. I assume drupal 6 here. Prepare some region into your themename.info:
    regions[dockleft] = dock left regions[dockmiddle] = dock middle regions[dockright] = dock right
  2. Add the regions somewhere after footer in your page.tpl.
<?php if ($dockleft || $dockmiddle || $dockright): ?>
  <div id="dockbottom">
    <div class="clear-block" id="dockbottom-inner">
      <?php if ($dockleft): ?>
        <div class="dockleft-block">
          <?php print $dockleft; ?>
        </div>
      <?php endif; ?>
      <?php if ($dockmiddle): ?>
        <div class="dockmiddle-block">
         <?php print $dockmiddle; ?>
        </div>
      <?php endif; ?>
      <?php if ($dockright): ?>
        <div class="dockright-block">
         <?php print $dockright; ?>
        </div>
      <?php endif; ?>
    </div>
  </div>
<?php endif; ?>

3. Create the CSS:


/* DOCK - bottom */
#dockbottom {
  bottom: 0;
  position: fixed;
  clear: both;
  width: 960px;
  border: 1px solid #999;
  border-bottom: 0;
  padding: 2px 0 0;
  height: 37px;
  background-color: #fff;
  z-index: 11000; /*Allow layering*/
}

#dockbottom-inner {
  text-align: left;
  width: 100%;
  height: 32px;
  float: left;
  padding: 5px 0 0;
  position: relative;
  overflow: visible; /*Make sure it doesnt crop the widget*/
  background-color: #ccc;
}

#dockbottom-inner .block-inner {
  padding: 0
}

.dockleft-block {
  float: left;
  display: block;
  margin-right: 20px;
  min-width: 30%;
  width: auto!important
}

.dockmiddle-block {
  float: left;
  display: block;
  margin-right: 20px;
  min-width: 30%;
  width: auto!important
}

/*this is specific to chat/meebo/gtalk, etc.*/
.dockright-block {
  display: block;
  width: 200px;
  position: absolute;
  right: 10px;
  bottom: 0;
  width: auto!important;
  overflow: visible
}

/*reset default*/
.dockright-block .block {
  margin-bottom: 0;
  padding-bottom: 0;
  text-align: center
}

#chat {
  width: 175px;
  height: 255px;
  position: relative;
  z-index: 11002; /*value above #dockbottom-inner*/
  display: none; /*hide the widget, let jquery play*/
  padding-top: 8px;
  background-color: #E8E9ED;
  border: 1.5px solid #ADADAD;
  border-bottom: 0
}

.slider {
  float: right;
  position: relative;
  z-index: 11003; /*value above #chat*/
  width: 175px;
  height: 25px;
  padding: 5px 0 0;
  margin-bottom: 5px;
  background-color: #E8E9ED;
  border: 1.5px solid #ADADAD;
  border-top: 0;
}

.toggleup,
.toggledown {
  text-align: center;
  display: block;
  line-height: 22px;
  background-color: #E8E9ED; /*Match .slider*/
}

4. Paste the jQuery into your script.js, see my previous post on how to deal with drupal:

//toggle chat block on dockright bottom, assuming placed on .dockright-block
$(".toggleup").click(function(){
  $("#chat").slideToggle("slow");
  $(this).toggleClass("toggledown");
  return false;
});

See webdesignerwall tutorial as mentioned above for better explanation.

5. Clear the theme registry by visiting admin/build/themes.

6. Drupal now recognize your new regions, go to the block administration, admin/build/block. Select your theme.

7. Add a chat block if using one of drupal modules, or a client widget into the dock right block as we have prepared before. If you are using a client widget, you must create a new empty block, paste your code in the new block. Here is a sample of mine, I use meebo. Make sure you put your own widget. Adjust the width accordingly with your CSS above:

<div id="chat">
  <object data="http://widget.meebo.com/mm.swf?blablabla" height="250" type="application/x-shockwave-flash" width="160">
    <param name="movie" value="http://widget.meebo.com/mm.swf?blablabla" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
  </object>
</div>
<div class="slider"><a class="toggleup" href="#">Chat with Me</a></div>

Choose Full HTML input format. Pick the location. Hit Save. See I also change meebo output to have valid XHTML. I even add transparent wmode to make it obey z-index layering. Someday you may need it for flash advertisement or such along with your nice menus in your complex layout. Here is the actual meebo code for you to compare:

<object height="250" width="160">
  <param name="movie" value="http://widget.meebo.com/mm.swf?blablabla" />
  <embed height="250" src="http://widget.meebo.com/mm.swf?blablabla" type="application/x-shockwave-flash" width="160"></embed>
</object>

8. Now that we have created the new block, we must place it into the actual region, dock right in our case. Pick it and hit Save. That's it. If you are connected to internet, you'll see your chat block is slowly filled with meebo widget:) If you don't want a chat block, you can fill it with a login block, author pane, dock menus, article tools, or anything you can imagine, just go wild:) You know what really cool is, it's all pure CSS and jquery. You can spice it up with your own cool background images that match your site design if you like. Here is the final product exactly according to the above codes, even without background images:

facebook chat panel

See a live demo here with some spices. Speak to me if you are lucky to find me online:) Enjoy your new chat block. As always, I am open to corrections. Feel free to correct me.

Facebook chat panel like