« Cool New Comment Notification emails | Main | Add Links to Recent Posts on Your Individual Entries »

John T. Unger

Add a Free Forum to Your TypePad Blog in Minutes!

John T. Unger May 3, 2007

I've had a lot of requests since I started this blog to add a forum for readers to talk amongst themselves. I just did, and if you have a pro account, you can too! Not only that, but it's free and it's really easy.

First, go take a look the forum I created for TypePad Hacks. Nice, eh? If you have any suggestions for categories or topics, let me know in the Feature requests section.

Now let's get you a forum of your very own.

Start by signing up for a free account at FreeWebs. They provide other services as well, such as free web hosting, image hosting, widgets and so on. The hosted items on their sites are ad supported, but you can also use them on your own sites and servers and it appears that there are no ads when you do this. I don't see any on the forum I created, anyway.

Now let's build a page in Typepad to host the forum.

  1. Go to the Design tab for your weblog.
  2. Click on the link to open your Main Index Template.
  3. Copy the code and return to your design tab.
  4. Click on Create new index template.
  5. Give your template a name in the Template Name field (maybe "forum") and type forum.html into the Output File field.
  6. Paste the code from your Main Index Template into the Template Body field.
  7. Find and delete the code that brings  the entries into your blog. If you haven't edited your Main Index Template it will be
    $MTWeblogIncludeModule module="entry-list-sticky"$>
    .
    If you have edited your Main Index Template it might be $MTInclude module="entry-list-sticky"$> or it could be something else (for instance, I have blogs where I pasted the entry-list-sticky code directly into the Index Template rather than creating a separate module). In any case, it will be between the div tags for the main column of your blog, so it will look something like this:

    <div id="alpha-inner" class="pkg">
    $MTWeblogIncludeModule module="entry-list-sticky"$>
    </div>
  8. Click Save.
  9. Log in to your account at FreeWebs and click on Add-ons/Widgets in the menu on the left, under the Build & Edit heading. When the page loads, you'll see Forums at the bottom of the right hand column in the feature list.
  10. Click Forums. A nifty little piece of ajax loads and allows you to choose from several different skins for your forum. Pick the one you like.
  11. Right below the live preview is a window with the JavaScript you need to add to your blog. Copy the code and return to TypePad.
  12. Paste the JavaScript into your forum template where you deleted the code for entry-list-sticky.
  13. Click Save.
  14. Click Publish.
  15. Preview your page. You now have a live forum on your blog!
  16. You'll need to set up categories before anyone can post to it, but that's pretty self-explanatory.
  17. Don't forget to add a link to you sidebar or menu so that people can find your forum from the blog!

More Like This: Advanced Templates , Blog Tools , Community , Dialogue , Web 2.0 , Widgets

Tags: , , , , , , , ,

Comments

Matt Martone says:

Sick hack. Thanks a ton.

Jued says:

That is SICK Man! Radical!!

Works like a charm!

David Smith says:

I can get this to work when I use Firefox, but when I view my site on Internet Explorer the forum fails to load. I get a 'Done but with errors on the page' message and a blank space where the forum should be.

I also cannot view the forum on this site when in IE, but I can when in Firefox.

Setting this up was extremely simple, and thanks for the hack, but I would like to find out what the problem is with IE...

john t unger says:

David,

Thanks for the heads up about IE… Since I work on a Mac, I don't always test some of the lighter, third party hacks on IE. I pretty much save that headache for layout and hacks that involve actual Template code (since it involves having to test them by viewing at browsershots.org). I know that's kind of a lapse, but hey, that's why I have the comments section too, right?

Anyway, I'm not sure what the conflict with IE stems from, but if you (or any other readers) find out, I'd love to hear about it in a follow-up comment.

Darla Mack says:

Excellent hack!!! Quick question. Would I be able to create different sidebars for my forum such as Sidebar3.inc and Sidebar4.inc to have different sidebar content then my blog page?

David Smith says:

John, I wish I could take credit for finding out something clever, but I can't. The forum has just started to work on my PC, using Internet Explorer, without any effort on my part.

It may well be that there was simply a problem with my software that has somehow been resolved. As nobody else has mentioned any problems with viewing the forum this seems likely!

Thanks again for the great hack, I'm off to work on my own forum now!

isela says:

John, I have a question that is not related to today's post. I am using a pre-defined theme and I was able to upload my own header to it using typepad's CSS instructions. However, before I was able to click on the banner at anytime and it would take me to my homepage, now it doesn't. Is there a way to fix this with CSS?

Thank you.

Frank Barnako says:

Here we go ... really elementary. I do have "Pro" account, but when I click on "Design" I don't see the tab for Main Index Template. I see links top order content, select content, etc. but now the "Template."

Can you tell me where it is?

john t unger says:

Hi Frank,

If you haven't yet converted your blog to advanced templates, you'll need to do that first. Click on "saved designs" and look for the item in the list that is marked "Current Design." Select the checkbox next to it and then click the button at the bottom of the list which says "convert to advanced." A dialog box will ask you if you're sure you want to do that. Click yes, then republish your blog. When you return to the Design tab, you will now see the templates set for the blog.

I advise making sure that you are happy with all your font and color choices etc before you convert… those are much easier to change in basic templates.

Adrian says:

Hi John,

Awesome job! I set it up and it works like a charm. The only issue is that another javascript element on the page and the addition of the FreeWeb code is messing with the prior element. Is there anyway to separate the Freeweb stuff so the other element isn't affected?

Thanks.

john t unger says:

Darla,

Yes, you can set up as many sidebar templates as you need in Advanced Templates, and call them in to various modified designs. Just base the Sidebar Template on the ones you have now, and modify the Index Template to call in the proper sidebar.
Isela,

The link from your banner to your index page is contained in the template, not the CSS… It's odd that changing the CSS would effect it, actually, but the pre-defined themes in TypePad have been set up in a way that does not support user modification (the idea being that they are an easy way to set up a blog for people who don't intend to do their own design). The best advice I have for you would be to load the blog, save all the image files used in the pre-defined template to your hard drive, create a new blog using custom layouts and re-create the elements that you like… It's a lot of work, but it's the only way you'll really be able to create a hybrid of the pre-defined template and the custom elements you want. You will probably want to test this on a separate, new blog and then apply the final design to your existing blog to be on the safe side.

Frank's question was answered via email.

Adrian,

You could upload the javascripts to your blog as separate files using file manager and call them in to the page by adding them to a custom head template, but I'm not sure that would help. I'd need to know more about the conflict issues (and probably more about JavaScript in general) to answer this one.

joshua says:

I just followed your instructions and it worked without a hitch (other than the fact that my endless editing of my templates had obliterated the entry list sticky code, but I figured out what to remove and where to put the forum code).

Thanks very much!

Note that:

http://www.hewnandhammered.com/hewn_and_hammered/forum.html

sometimes takes like 2 minutes to load, and sometimes comes up as a blank screen ... Is that a problem on the freewebs side, or do you think there's something I can do to make it more dependable?

jlt says:

In fact, I should be asking, I guess, do these load quickly (or even relatively quickly) for anyone else?

jlt says:

Sorry for spamming your comments. I've found the following:

the slowdown is on the freewebs side, as they're equally slow when on their site;

when new users log in & register, they are taken to the freewebs site and not returned to the embedded forum - there must be a way around this, right? because otherwise, what many people are going to see is not nearly as nice as the embedded blog. Is there a way around this, do you think? Is this something I could hire you to do?

JLT

OliverJ says:

Hi - let me also thank you for suggesting this excellent tool.

The one downside that I can see is that all of the content of the forum is hosted by freewebs, and accessed dynamically via the javascript, so I don't think the comments in the forum will be indexed by search engines.

This is a real shame as all that user generated content could have major SE benefits for my blog if it could be harnessed. Anyone got any ideas?

Darla says:

Hey John,

I just touched up my forum and decided to make the layout different from my regular site. I copied the main index template for the 2 column right and created an extra sidebar to make it different.

For those interested, the templates can be found here.

http://support.typepad.com/cgi-bin/typepad.cfg/php/enduser/std_adp.php?p_faqid=548&p_created=1158161859&p_sid=fyJ5UVNi&p_lva=&p_sp=cF9zcmNoPTEmcF9zb3J0X2J5PSZwX2dyaWRzb3J0PSZwX3Jvd19jbnQ9MTQ4JnBfcHJvZHM9JnBfY2F0cz0mcF9wdj0mcF9jdj0mcF9wYWdlPTEmcF9zZWFyY2hfdGV4dD1tYWluIGluZGV4IHRlbXBsYXRl&p_li=&p_topview=1

Thanks again for the great hack!!!

Baglow says:

Forgive the dumb question, guys, but I've just created the forum over on Freewebs, but I'll be damned if I can find the java code to copy over. I've got the Site Manager, which offers the Edit Pages and Links options. This allows me to edit, view, rename, delete and make the forum visible in the navbar, but that's it.

If anyone can point me in the right direction, it would be hugely appreciated.

Thanks,

Brian...

Ryan says:

I have been trying to find the forum add on/widget on the freeweb site for over an hour. I can not find it? They must have changed the layout/heading one the site. I feel like an idiot, any help?

kate says:

I've had the same problem, they don't have the code readily available any more!

Justyna says:

I know it's just the second step, but where is the link to the "main index template"?

The comments to this entry are closed.

TrackBack

TrackBack URL for this entry:
https://www.typepad.com/services/trackback/6a00d8341c4fdf53ef00d8353414cb69e2

Listed below are links to weblogs that reference Add a Free Forum to Your TypePad Blog in Minutes!:

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media

Subscribe

Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count

Search

Socialize

Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page


    Grazr

    Colophon

    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License