spacer
spacer
spacer
Integrating FuseTalk into your Website
Platform: ColdFusion

The integration of FuseTalk within a website is probably the most requested piece of information which is requested from our support staff. Over the years, the most requested integration question has been a way to wrap FuseTalk inside a customer's current look and feel. Typically, a customer wants to have their own header, left and/or right navigation, and footer (i.e. http://www.fusetalk.com/forum). There are two, easy to use techniques which you can use in order to accomplish website integration.

Custom Templates
The first, and oldest integration technique, is by using our custom header, footer templates. Both are ColdFusion files which are included at the top and bottom of every FuseTalk template. They can be used, amongst other things, to wrap your current website look and feel. These templates can be found inside the {FUSETALK_ROOT}/forum/include/custom folder of your FuseTalk install. The header has the name of top.cfm and the footer has the name of bottom.cfm.

Example of wrapping a simple look and feel around FuseTalk

<table width="100%">
    <tr>
        <td> MY NAVIGATION BAR </td>
    </tr>
</table>

<table width="100%">
    <tr>
        <td>MY LEFT NAV</td>
        <td>
            <!--- FuseTalk will Start Here --->

Listing 1 - Top.cfm

            <!--- FuseTalk will End Here --->
        </td>
        <td>MY RIGHT NAV</td>
    </tr>
</table>

<table width="100%">
    <tr>
        <td> MY FOOTER BAR </td>
    </tr>
</table>

Listing 2 - Bottom.cfm

FuseTalk Custom Tag
The second method is by using a custom tag which we created for FuseTalk. The main advantage to using the custom tag is that not only does it let you integrate your look and feel around FuseTalk; it also lets you keep your website Url when browsing FuseTalk.

For example, in a typical FuseTalk environment when a user is view messages the Url which is listed in the browsers Address bar looks something like this: http://www.fusetalk.com/forum/messageview.cfm?catid=2&threadid=20. If you decide to use the custom tag, you can have the every FuseTalk Url look like this: http://www.fusetalk.com/forum.cfm.

Many of our customers who use the custom tag for the following reasons:

  Security
If you are using a complex system for your file system security; securing one template (i.e. forum.cfm) is much easier that securing all the templates which are found in FuseTalk.

Website Statistics
Customers who wish to generally track forum traffic find it easier to track one template (i.e. forum.cfm) instead of all the FuseTalk template.

Framework Integration
If you have a complex framework for your website or application, it should be easier to integrate one template (forum.cfm) instead of all FuseTalk templates.

Step by Step example of using the custom Tag
1. Copy the content of the {FUSETALK_ROOT}/samples/integration folder into your website folder.
2. Rename the sample.cfm template which you copied in Step 1 to forum.cfm (if you already have a template called forum.cfm, you can choose any other name. The filename DOES NOT needed to be called forum.cfm).
3. Edit the forum.cfm template using a text editor (Dreamweaver, Notepad, Homesite).

The first time you edit the forum.cfm template you should only see the CFModule tag and a few lines of comments which gives a brief explanation of each module parameter. View the following code listing to see a sample of wrapping your look and feel around the custom tag.

<table width="100%">
    <tr>
        <td> MY NAVIGATION BAR </td>
    </tr>
</table>

<table width="100%">
    <tr>
        <td>MY LEFT NAV</td>
        <td>
            <!--- FuseTalk will Start Here --->

            <cfmodule
            template="fusetalk.cfm"
            pathtoforum="/fusetalk/forum"
            forumid="1"
            urltoforums="http://www.acmecorp.com/fusetalk/forum/"
            urltowebsite="http://www.acmecorp.com/forum.cfm">


            <!--- FuseTalk will End Here --->
        </td>
        <td>MY RIGHT NAV</td>
    </tr>
</table>

<table width="100%">
    <tr>
        <td> MY FOOTER BAR </td>
    </tr>
</table>

Listing 3 - Forum.cfm

The Custom Tag Parameters
Template: This should always be fusetalk.cfm
PathToForum: is the relative path to where the root of the forums reside
ForumId: is the forumid you wish to include
UrlToForums: is the full url into the forum root, including the trailing slash
UrlToWebsite: is the url to the this template (i.e. forum.cfm)

Hopefully this article has given you a better understanding on how the integrate FuseTalk into your current look and feel. If you have any other questions about external authentication please do not hesitate to contact support@fusetalk.com. Also there are numerous example in the documentation an in the samples directory of your FuseTalk install that will help guide you through the process.

To discuss this article or to ask questions please visit our forums.