FlashChat Integration with 1.1.1 Final, 1.1RC3 & 1.1RC2 Default Theme

[Simplemachines Cowboy]

As the title says, here is a tutorial for integrating FlashChat version 4.x.x and the SMF 1.1.1 DEFAULT THEME (it also works with the older RC2 & RC3).
Thanks to marcnyc for the original groundwork, mikemill for the template work, jaybachatero for quality control & ^DooM^ for the last bit.

First off, install FlashChat.
http://www.tufat.com/docs/flashchat/installer.html
Make sure you only upload the "chat" folder from the .zip file, and upload it to the same folder that has your SMF installation i.e. if your smf is at www.helloworld.com/smf then the chat folder should be at www.helloworld.com/smf/chat.
Make sure that you also choose the "Check here if you wish to integrate FlashChat" option so it will integrate into SMF.
DO NOT follow any of the FlashChat instructions for placing a chat button or adding a Who's Chatting Box. It's all for rc1 and older.

OK, we will assume that you have accomplished the install with no ill effects.

Right now, FlashChat will open in a new window completely ignoring the template and style and theme of SMF.
So you have a chat that recognizes your registered users because it uses the same database but it launches independently and looks completely different and is an "outsider" to the board.
Here is how you can change this.
These instructions will launch your chat inside the board's theme/template so that you still have the header of the board above the chat and the footer of the board below it.
Here is how (I assume that you installed SMF in the folder called /smf/ - if you are not just change "/smf/" with the name of your smf folder on your server.
These instructions are for the 1.1 RC2, RC3 & 1.1.1 DEFAULT THEME - no guarantees on any other theme.

1. Open smf/index.php.

2. Find this line:

Code Auswählen Erweitern


'boardrecount' => array('Admin.php', 'AdminBoardRecount'),


and AFTER that code add this code (about line 220):

Code Auswählen Erweitern


'chat' => array('Chat.php', 'Chat'),


3. Create a file called Chat.php with your text-only editor such as Notepad (PC) or BBEdit (Mac) and add this code inside it:

Code Auswählen Erweitern


<?php
// Version: 1.1.1; Chat

if (!defined('SMF'))
die('Hacking attempt...');

function Chat() {
// This is gonna be needed...
loadTemplate('Chat');
}
?>


4. Save this file inside /smf/Sources

5. Create a file called Chat.template.php with your text-only editor such as Notepad (PC) or BBEdit (Mac) and add this code inside it:

Code Auswählen Erweitern


<?php
// Version: 1.1.1; Chat

function template_main()
{
global $context, $settings, $options, $txt, $scripturl;

echo '
<script language="JavaScript" type="text/javascript"><!--
function checkAll(onOff)
{
for (var i = 0; i < document.searchform.elements.length; i++)
{
if (document.searchform.elements[i].name.substr(0, 3) == "brd")
document.searchform.elements[i].checked = onOff;
}
}
// --></script>
<form action="', $scripturl, '?action=search2" method="post" name="searchform" id="searchform">
<table width="80%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td>', theme_linktree(), '</td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center" class="tborder">
<tr class="titlebg">
<td>Chat</td>
</tr><tr>
<td class="windowbg">';

// load the chat
echo '<iframe width="100%" height="500" src="http://www.yourserver.com/smf/chat/flashchat.php"></iframe>';

echo '
</td>
</tr>
</table>
</form>';
}

?>


6. Save this file inside /smf/Themes/default/

7. The code above assumes that your server is called www.yourserver.com and that you have installed SMF in the root's folder "smf" and FlashChat in its subfolder "chat". You don't need the full URL, you can also (and it is recommended that you do) use "chat/flashchat.php" as your URL if you have created the "chat" folder inside the "smf" folder. Change paths according to your installation.

8. Add a "Chat" tab to the tab array:

A. In smf/Themes/default/index.template.php, between the lines "//Show the [home] button" and "// Show the [help] button", add this block of code (You can place these between any two buttons; I prefer it here):

Code Auswählen Erweitern


// Show the [chat] button.
if ($context['user']['is_logged'])
echo ($current_action=='chat' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'chat' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=chat" target="_blank">' , $txt['chat_1'] , '</a> 
</td>' , $current_action == 'chat' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


This will open FlashChat in a separate browser window; if you don't want that remove the target="_blank".

B. Somewhere in smf/Themes/default/languages/index.english.php, add this code:

Code Auswählen Erweitern


$txt['chat_1'] = 'Chat';


C. Add Chat to the list of current actions:
In smf/Themes/default/index.template.php, find:

Code Auswählen Erweitern


if ($context['current_action'] == 'search2')
$current_action = 'search';


Add this code AFTER the above:

Code Auswählen Erweitern


if ($context['current_action'] == 'chat')
$current_action = 'chat';



Next, we will show you how to add some "Users in Chat" notices on your board.

1. Adding a Who's Chatting box underneath the Members Online section.

In /smf/Themes/default/boardindex.template.php, AFTER this block of code:

Code Auswählen Erweitern


// Assuming there ARE users online... each user in users_online has an id, username, name, group, href, and link.
if (!empty($context['users_online']))
echo '
', $txt[140], ':<br />', implode(', ', $context['list_users_online']);

echo '
<br />
', $context['show_stats'] && !$settings['show_sp1_info'] ? '<a href="' . $scripturl . '?action=stats">' . $txt['smf223'] . '</a>' : '', '
</div>
</td>
</tr>
<tr>
<td class="windowbg2" width="100%">
<span class="middletext">
', $txt['most_online_today'], ': <b>', $modSettings['mostOnlineToday'], '</b>.
', $txt['most_online_ever'], ': ', $modSettings['mostOnline'], ' (' , timeformat($modSettings['mostDate']), ')
</span>
</td>
</tr>';


ADD this code:

Code Auswählen Erweitern



// flashchat users
echo '
<tr>
<td class="titlebg" colspan="2"><font color="#000000">FlashChat Users</font></td>
</tr>
<tr>
<td class="windowbg">&nbsp;</td>
<td class="windowbg2" width="100%"><iframe frameborder="0" height="100" src="', $GLOBALS['boardurl'], '/chat/info_embedded.php" style="width: 100%; margin: 0; padding: 0; border: 0; overflow: hidden;" scrolling="no" border="0" allowtransparency="true"></iframe></td>
</tr>';



2. Show how many of the currently online users are actually in the chat (this will be shown in the ONLINE USERS section at the bottom of the INDEX page, right next to where it says "X visitors, X users").

In /smf/Themes/default/boardindex.template.php, & search for the comment string & echo ':

Code Auswählen Erweitern


// "Users online" - in order of activity.
echo '


REPLACE BOTH THOSE LINES with this code:

Code Auswählen Erweitern


// "Users online" - in order of activity.

    $chatrequest = db_query("
            SELECT COUNT(*) AS numb
            FROM  YOURDATABASENAME_fc_connections
            WHERE userid IS NOT NULL", __FILE__, __LINE__);
         list ($chatcount) = mysql_fetch_row($chatrequest);   
         mysql_free_result($chatrequest);
     
if ( $chatcount == "1" ) {
$singularplural2 = "";
} else {
$singularplural2 = "s";
}

echo '

MAKE SURE YOU CHANGE "YOURDATABASENAME_FC_CONNECTIONS" TO THE PROPER PATH!
Yes, you will place the above code in index.template.php also.

Find this line (look about 10 lines below the echo ' in the above inserted code)

Code Auswählen Erweitern


', $context['show_who'] ? '<a href="' . $scripturl . '?action=who">' : '', $context['num_guests'], ' ', $context['num_guests'] == 1 ? $txt['guest'] : $txt['guests'], ', ' . $context['num_users_online'], ' ', $context['num_users_online'] == 1 ? $txt['user'] : $txt['users'];


REPLACE all of that with:

Code Auswählen Erweitern


', $context['show_who'] ? '<a href="' . $scripturl . '?action=who">' : '', $context['num_guests'], ' ', $context['num_guests'] == 1 ? $txt['guest'] : $txt['guests'], ', ' . $context['num_users_online'], ' ', $context['num_users_online'] == 1 ? $txt['user'] : $txt['users'];

echo ', ' . $chatcount . ' User'.$singularplural2.' in Chat';


This will make your forum's Members "Online" read something like: "0 Visitors, 4 Users, 2 Users in Chat". Please note that marcnyc's code does actually take into account the possibility that just one user is online and will adjust the sentence grammatically so that it will read "1 User in Chat", as opposed to "1 Users in Chat"

3. Add "Users in Chat" sentence in ALL pages except the chat page itself (this will add a sentence at the top of your board section, right above the HOME, HELP, SEARCH, ADMIN, PROFILE, CALENDAR, CHAT, LOG OUT navigation bar tabs).
This code will also adjust the sentence to make sure it is grammatically correct AND it will NOT show the sentence in the actual chat page because the user doesn't need to see it (he/she already has this information from the chat room) and because the user count would not be up to date, since the page was already parsed and doesn't update in real time, like the chat room does.

WARNING: the way this is implemented it will REPLACE the always visible "News" display to the left of the Quick Search text box. If you wish to have the news displayed you will need to figure out a place to put the code yourself!

In /smf/Themes/default/index.template.php, Find this block of code:

Code Auswählen Erweitern


// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<td width="90%" class="titlebg2">
<span class="smalltext"><b>', $txt[102], '</b>: ', $context['random_news_line'], '</span>
</td>';

REPLACE all of that with:

Code Auswählen Erweitern


// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))

echo '
<td width="90%" class="titlebg2">
<span class="mediumtext">', template_flash_chat(), '</span>
</td>';

// echo '
// <td width="90%" class="titlebg2">
// <span class="mediumtext"><b>', $txt[102], '</b>: ', $context['random_news_line'], '</span>
// </td>';


I left the random_news_line commented out so you can replace it quickly if you would like to do so.

At the very bottom of /smf/Themes/default/index.template.php, find this line:

Code Auswählen Erweitern


<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '">&nbsp;</td>';


Directly under that line REPLACE EVERYTHING WITH THE FOLLOWING CODE:

Code Auswählen Erweitern



}

function template_flash_chat()
{
$chatrequest = db_query("
            SELECT COUNT(*) AS numb
            FROM  YOURDATABASENAME_fc_connections
            WHERE userid IS NOT NULL", __FILE__, __LINE__);
        list ($chatcount) = mysql_fetch_row($chatrequest);   
        mysql_free_result($chatrequest);
if ( @$_GET['action'] != "chat" ) {
if ( $chatcount == "1" ) {
$singularplural1 = " is ";
$singularplural2 = "";
} else {
$singularplural1 = " are ";
$singularplural2 = "s";
}
return 'Currently there ' . $singularplural1 . ' <font color="red">' . $chatcount . ' User'.$singularplural2.' in FlashChat!<br/>';
}
}


?>

MAKE SURE YOU CHANGE "YOURDATABASENAME_FC_CONNECTIONS" TO THE PROPER PATH!
Yes, you also placed the above code in boardindex.template.php. That is correct.
The last line in that code is what the output is.
It also displays using a color for the font - red for the displayed number and the word User(s).

OK here is a new trick.
It changes the "Unknown Action" in the users online list (action=who)

Find this code in Sources/Who.php

Code Auswählen Erweitern

// Unlisted or unknown action.

ABOVE that line add this block of code.

Code Auswählen Erweitern

//show who is in the chat
elseif (isset($actions['action'])&&($actions['action']=='chat'))
{
    $data[$k] = 'Currently in the <a href="' . $scripturl . '?action=chat">Chat Room</a>';
}
That will show who is in the chat and link the words 'Chat Room' to the chat.

Make sure you have $scripturl set in the global line of Who.php's determineActions function.

Find:

Code Auswählen Erweitern

function determineActions($urls)
{
global $txt, $db_prefix, $user_info, $ID_MEMBER;

And replace with:

Code Auswählen Erweitern

function determineActions($urls)
{
global $txt, $db_prefix, $user_info, $scripturl, $ID_MEMBER;

That's it!

Feel free to show me how to do any of this better.

Cowboy

Edit: Dec 2006: This works fine with 1.1.1 final.

[Grandnegis]

Thanks alot man. I followed your instructions right and it looks awesome.

[Simplemachines Cowboy]

Glad I could help!

[cferd]

Nice work.

I have SMF 1.1 RC2 Bridged to Joomla 1.07.

The chat looks better than I hoped for, but only in unwrapped mode. Would I need to modify much to get it to work with SMF wrapped? I'm currently getting a "The page cannot be found" error.

[Simplemachines Cowboy]

Good question.
I use the forum and chat stand-alone.
Post your question in the Portals, Bridges, and Integrations section.

[cferd]

Nevermind.  I just had to provide the full URL in Chat.template.php and it works great with SMF wrapped in Joomla, thanks 

[Zombie]

How would I change the font color in the iframe?

[Prasad007]

Wow ! Thanks man!!

[Simplemachines Cowboy]

Just add font html to it:

Code Auswählen Erweitern

<td class="titlebg" colspan="2"><font color="#000000">FlashChat Users</font></td>

I didn't even notice that it wasn't the right color to match the other stuff in the info center.
Thanks for pointing that out.

ALSO -
The original iframe uses "catbg" which is the dark blue.
I changed the tutorial to use "titlebg" which blends into the info center better, and changed the font to black.

[RBH]

after this install, i have a category bar above the chat with the word chat in it. what would i do to change this from chat to something else. even though it looks like a category bar, it isnt listed in the boards section of the admin panel.

[Zombie]

I'm talking changing the info from black to white in this bit of code.

Code Auswählen Erweitern

<td class="windowbg2" width="100%<iframe frameborder="0" height="100" src="', $GLOBALS['boardurl'], '/chat/info_embedded.php" style="width: 100%; margin: 0; padding: 0; border: 0; overflow: hidden;" scrolling="no" border="0" allowtransparency="true"></iframe></td>


I've tried html, changing the css but I can't get it to change.

[Simplemachines Cowboy]

It's pulling the room names and users from FlashChat.
Maybe in /chat/info.embedded.php?
I am at work today but I'll look into it tomorrow or Tuesday.

[Simplemachines Cowboy]

RBH, I am not exactly clear where you are talking about.
Can you specify which piece of code added that section or at the very least post a screenshot?

Thanks

[HoTmetal]

Nice work.

I have SMF 1.1 RC2 Bridged to Joomla 1.07.

The chat looks better than I hoped for, but only in unwrapped mode. Would I need to modify much to get it to work with SMF wrapped? I'm currently getting a "The page cannot be found" error.

Why not just install it as a com in joomla?? This would solve your problem..

[RBH]

here is a shot of the bar directly above the flashchat. it uses my theme color and looks like a category bar running across the top of it with the name chat in it. just trying to figure out where it pulls this from so that i can change the name from chat to something else.

[cferd]

Why not just install it as a com in joomla?? This would solve your problem..

If I did, and I have done that on prior ocassions, it would leave me with another annoyance. I would have to depend on the Joomla cookie method, and frankly, SMF handles it better.

But aside from that, will it actually work? I mean, will FlashChat appear in an SMF theme inside of Joomla with the tip provided by Cowboy in this thread?

Oh, and p.s. Read my next post after the one you quoted 

[cferd]

RBH,

The "Chat" is not being pulled from anywhere. It's hardcoded into Chat.template.php.

[RBH]

cferd, sweet thanks! i found it and changed the text to what i want. 

[Simplemachines Cowboy]

RBH, please add to the post and show what you did.

Thanks

[RBH]

it was pretty easy. open chat.template.php, mine was located in my themes/default, then look for

Code Auswählen Erweitern

<td>Chat</td>

it's easy to find because there isn't but a few lines of code, then change "Chat" to whatever ya want.