1

Topic: Step By Step - How to Embed a forum into your VLD Website

Ok, after much trial and error.... I found a solution that will work for everyone...

This is pretty slick because it allows you to hide the fact you are using <iframes> thanks to a little java code..

I am still using frames on my website, but I have taken away the borders and added transparency, and the code that triggers the onload resize javascript:

Give it a shot and let me know if you like it...


1.) First, view your start page and then right click and select "view source".

2.) Save this as forum.tpl

3.) Open the file up your editor (I use Notepad++). You can use notepad too, but that doesn't give your line numbers, etc.

4.) Remove all of the code starting with <div id="content_wrap">.......and stopping just before the.....<div id="footer_wrap">

5.) Replace it with the  following (taking note of what forum folder path you have phpbb2/3, vBulletin, Vanilla..etc..  located on your server):

<iframe width="100%" id="iframe_id" name="iframe_name" src="http://www.mysite.com/forum/" scrolling="no" frameborder="0" ALLOWTRANSPARENCY="true" onload=resize_iframe();></iframe>


I have also included an iframe resize javascript code, that is controlled by the child window.

<script type="text/javascript">
<!--

moz=document.getElementById&&!document.all
mozHeightOffset=20

function resize_iframe(){
document.getElementById("iframe_id").height="" // required for Moz bug, value can be "", null, or integer
document.getElementById('iframe_id').height=window.frames["iframe_name"].document.body.scrollHeight+(moz?mozHeightOffset:0)
}

// -->
</script>


6.) Now upload the forum.tpl to your server into the template folder that you are using (in my case it is dark_yellowish).

7.) Now go into your CP, Content, Manage pages, General, and then "Add page".

8.) Give it a NAME, LABEL, and Custom Template name as: forum (without the .tpl). Don't fill anything in the Page editor box. Now save it!

I have also inserted a link to this page on my header.tpl after:

<div id="headernav">

with the following:

                    <!-- IF loggedin == "1" -->
                    <li><a href="{virtual_path}{ifelse:fancy_urls,"1","p/forum/index.html","index.php?m=pages&p=forum"}" title="forum">Forum</a></li>
                    <!-- ENDIF -->




What a headache this was, but very gratifying working it through....  Thanks to everyone who posted how-to's on this topic...

Hope it helps you all...

2

Re: Step By Step - How to Embed a forum into your VLD Website

I placed it near the bottom:

Here is some code to show you (forum.tpl):

        <div id="footer_wrap">
            <div id="footer">
                                    <a href="http://www.mysite.com/invitefriends/" title="Invite friends"  >Invite friends</a> |
                                                    <a href="http://www.mysite.com/contactus/" title="Contact us"  >Contact us</a> |
                                <a href="http://www.mysite.com/page/tos/" title="Terms of service"  >Terms of service</a>                <!-- CREDIT LINE: UNAUTHORIZED REMOVAL WILL VOID LICENSE -->
                            </div>
        </div>
        <div class="clear"></div>

        <script type="text/javascript">
<!--

moz=document.getElementById&&!document.all
mozHeightOffset=20

function resize_iframe(){
document.getElementById("iframe_id").height="" // required for Moz bug, value can be "", null, or integer
document.getElementById('iframe_id').height=window.frames["iframe_name"].document.body.scrollHeight+(moz?mozHeightOffset:0)
}

// -->
</script>
    </div>
</div>
<div class="clear"></div>
<script type="text/javascript">var virpath = "http://www.mysite.com/";</script>
</body>
</html>


Hope that helps...  Let me know if you like it...

Last edited by wclang (2009-03-09 10:56:48)

3

Re: Step By Step - How to Embed a forum into your VLD Website

From the image it seems it loads your forum header and footer but its not loading the forum & categories? Is that correct?

What msg board are you using? How customized are your forums? Did you make any major changes to the forum code?


Remove the Java Resize Code... Does your forums showup?

4

Re: Step By Step - How to Embed a forum into your VLD Website

This is what I did:

I created a custom page as above. Then I created forum.tpl and added the following:

<!-- INCLUDE forumheader.tpl --> (forumheader is a copy of header.tpl but I removed sidebar)

here I just add the iframe as above


<!-- INCLUDE footer.tpl -->

Works perfectly only one problemos - I have set scrolling to 'auto' and width to '100%' but I still see that ugly scrollbar :S

"The hardest thing in the world to understand is the income tax."

5

Re: Step By Step - How to Embed a forum into your VLD Website

Thats why if you turn off scrolling and enable the java script code. The forum will automatically resize itself so there isn't a need for the scroll bar. Also, make sure you have the ALLOWTRANSPARENCY="true" inserted into your code....

6

Re: Step By Step - How to Embed a forum into your VLD Website

This is a great mod wclang,but I have 1 problem. If you click on a member's link to view their VLD profile. It
doubles the page. 2 main menu bars and 2 members menus. Doubled the frame. How can I fix this?

"Never be afraid to try something new. Amateurs built the Ark,Professionals built the Titantic."

7

Re: Step By Step - How to Embed a forum into your VLD Website

I can't get the resize code to work on Firefox.  In IE the height auto adjusts perfectly but in Firefox it doesn't do anything.  Can someone please throw in a suggestion.  I would be very greatful.

8

Re: Step By Step - How to Embed a forum into your VLD Website

Since nobody has replied maybe I need to be a little more clear for what I am asking.

I went ahead and installed punbb 1.3.4 (I guess this is the latest version)

I managed to get everything to work just fine except for one thing.

In Firefox browser I can't get it to auto resize the height.

In Internet Explorer It auto resizes just fine.

I used the Java Resize Code that wclang supplied but it doesn't work for Firefox.

If anybody out there in the Vld forums has a solution and wouldn't mind given me a hand solving this problem I would be very greatful.

Thanks guys!  smile

9

Re: Step By Step - How to Embed a forum into your VLD Website

question, what is the start page?

10

Re: Step By Step - How to Embed a forum into your VLD Website

and the startpage is ... the first page then you get to your site ...in this case header.tpl ...

... I try to get it work with bluenet templates ... but it will not work ...

ramil helpt me and now it work like a charm ... thanks ramil ...

the solution is = in header.tpl the link to the forum must be /page/forum/

I have /forum/ and it don´t work ... "stupid me" smile

maybee this can help someone else here ... I hope so ...

Last edited by gugu (2010-01-27 12:28:41)

Give the world the best you have, and the best will come to you.
Tutorials and Mods for VldPersonals  Add CometChat to your vldPersonals site

11

Re: Step By Step - How to Embed a forum into your VLD Website

May I advise you not use iframe. Custom the forum template as your site template and all will be fine.

Content from iframs is not indexed by searche engines so ... take a look on my 2 sites in Forums to see what i mean. Good work.

12

Re: Step By Step - How to Embed a forum into your VLD Website

It takes some effort to get the forum to look like it's part of your system.

I agree with Robest, and advise against the use of an iFrame.

Go to any member's site, have a look at their layout, then go to their forum.
Those who have spent the time and effort to integrate the look and feel of their forum will certainly stand out from those who don't, whose forum looks like it is, an add-on that they haven't spent much time on.

Can you not see and feel the difference between those who put in the effort and those who don't?

Alas I have no forum active, to show you the effort I went to, to make it look like part of the system, with no loss of continuity. I was using phpBB v2 as the forum was hacked into, and I am still working on something better.

Anyhow, decide which group you want to be in.

13

Re: Step By Step - How to Embed a forum into your VLD Website

I hope someone will make a tutorial how to do this without iframe !

Give the world the best you have, and the best will come to you.
Tutorials and Mods for VldPersonals  Add CometChat to your vldPersonals site

14

Re: Step By Step - How to Embed a forum into your VLD Website

this was useful, but only because the content that will go into the forum is not really for the search engine. Here are some pros and cons as I see it.


1. change the design of the header and footer (top and bottom part) of the forum just like the rest of the site.
    Pro: Search engine friendly for the content inside the forum. (only if the content is publicly viewable.)
    Con: ads other elements in the forum is not controlled from the main platform. There will be separate management for the ads in the forum. Changing of any design elements will have to be done in 2 different places.

2. placing the forum content into the main platform as "iframe"
    Pro: Design/ads are better controlled from the main platform; therefore, the website looks better integrated together.
    Con: not as search engine friendly for the contents inside the forum.

15

Re: Step By Step - How to Embed a forum into your VLD Website

you had right about it ... but sometimes not so easy to do ...
I know someone make it for punbb but none for phpbb3 ...
and if someone knows how to do ... please tell us wink

Give the world the best you have, and the best will come to you.
Tutorials and Mods for VldPersonals  Add CometChat to your vldPersonals site

16

Re: Step By Step - How to Embed a forum into your VLD Website

perfect!!! thank you wclang :-)