Integrate the Church Site Design Tool into to your site

Draw more visitors to your pages...

... help church websites to be more effective

You can easily integrate our Church Site Tool content into your site by copy/pasting some code onto your page. It is particularly suitable for church-related websites, such as church directories and pastors’ resources. It will blend seamlessly into your page, and will draw additional visitors to your site. The ‘Tell-a-friend’ and news-release links allow your site visitors to tell others about it, and their recommendation messages will contain your own URL. (This content is also available to reproduce in printed publications.)

Examples of sites using this resource:
American Tract Society | ReChurch | Evangelical Alliance UK

Instructions and code

1. Easy 20-second method: hidden frame

Copy/paste the code below into a text-editing program such as Wordpad, (or the text-editing mode of an HTML-editor, and save it with a name such as churchtool.html
Add the final actual URL of your page as it will be when online, to the second frame link as the id for the link: so that line looks something like
<frame name="main" src="http://ied.gospelcom.net/churchtool.php?id=http://www.yoursite.com/churchtool.html" scrolling="auto" frameborder="no">
Link to this new page from your main menu. It will be integrated into your site as your own resource
You can if you wish change the coding to create your own narrow top frame to brand the page as part of your site

then copy/paste this code as explained:

2. Direct insertion into your site

Don’t be worried, these instructions are easier than they look! If you have problems, ask us for help.

This is how it will look on your site. Just copy/paste [help] the following blocks of code: one into your page head, and one into the location on your page where you wish the content to appear. After adding the code, check the source code of your page appears identical to the code in the three boxes below, because some editing or content management systems may try to convert angle brackets and quote marks into character code, or can insert line-break code within the CSS without being asked!

Add your normal page header and navigation menu, and your normal footer information at the end of the page. If you wish, include an introductory paragraph, or footnotes at the end. Link to this new page on your site in your navigation menu.

Place in page head

– below your title and any meta tags. then copy/paste this code as explained:

<link rel="stylesheet" href="http://ied.gospelcom.net/scripts/designsyndicate.css" media="screen" type="text/css" />

<style type="text/css" media="screen">
#floatdiv {display:block;z-index:999999;position:fixed;right:0px;top:250px;font-family:verdana,arial,sans-serif;padding:15px 0 0 0;width:166px;height:113px;text-align:center;visibility:hidden;border:none;background: url(http://ied.gospelcom.net/images/balloon.png) no-repeat transparent; }
html>body #assess a:hover span { position:fixed;left:10px;top:10px;  } /* hides this spec from IE browsers */
.iframe { height:500em;border:0;width:100%; }
.hiddenlinks, .warning { display: none; }
</style>

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#floatdiv {display:block;z-index:999999;position:absolute;right:0;top:250px;background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://ied.gospelcom.net/images/balloon.png',sizingMethod='scale'); }
div#assess a:hover span { position:absolute;left:10px; }
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css" media="screen">
#floatdiv {display:block;z-index:999999;position:absolute;right:0;top:250px;background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://ied.gospelcom.net/images/balloon.png',sizingMethod='scale'); }
div#assess a:hover span { position:fixed;left:10px;top:10px; }
</style>
<![endif]-->

<!--[if IE 6]>
<style type="text/css" media="screen">
.iframe { width:100%; position:relative;left:0px; z-index:999; }
</style>
<![endif]-->

<!--[if lte IE 5]>
<style type="text/css" media="screen">
div#assess a {background: url(http://ied.gospelcom.net/images/1pixtran.gif) #fff2b6; } 
</style>
<![endif]-->

<link rel="stylesheet" type="text/css" media="print" href="http://ied.gospelcom.net/scripts/designprint.css">

<script type="text/javascript" language="JavaScript" src="http://ied.gospelcom.net/scripts/statusbarhide.js"></script>
<script type="text/javascript" language="JavaScript" src="http://ied.gospelcom.net/scripts/siteassesstotal.js"></script>

Place in page body

– within whatever normal content holder (div or table cell) that contains your main page content. then copy/paste:

<a name="top"></a>
<form name="selectboxForm" id="selectboxForm" action="http://ied.gospelcom.net/report.php" method="post" onSubmit="redirectOutput(this)">
<div id="floatdiv">
<span style="font-size:90%;text-align:left;">
<img class="scoreballooninfo" src="http://www.soon.org.uk/arrowright.gif">Your total:</span>
<textarea type="text" id="total" class="scoreballoon" readonly name="total" id="total">0</textarea>
</div>
<script language="JavaScript" src="http://ied.gospelcom.net/getDayContentDesign1.php?pageID=http://ied.gospelcom.net/church-site-design.php" type="text/javascript">
</script>
<script language="JavaScript" src="http://ied.gospelcom.net/getDayContentDesign2.php?pageID=http://ied.gospelcom.net/church-site-design.php" type="text/javascript">
</script>
<noscript>
<span class="warning">
<b>Sorry! Printing error! Your Javascript is disabled. To print this set of pages
contained in an iframe correctly, place your cursor anywhere on the main page, for
instance on the photo, then please press CTRL + A (at the same time) to highlight the
entire page, then use use your browser print button, first choosing the 'selection'
option rather than 'all pages' or 'numbered pages'.</b>
</span>
<iframe class="iframe" name="ifrm" id="ifrm" src="http://ied.gospelcom.net/churchdesign-iframe.php" scrolling="auto" frameborder="no">
</iframe>
<noframes>
<a href="http://ied.gospelcom.net/church-site-design.php">Church Site Design Self-assessment tool</a>
Your church website has enormous potential as part of your outreach strategy to reach into your
community. However, not all churches understand how to design a site that will do this effectively. 
This self-assessment questionnaire can help you assess your site, and find new ideas or areas that 
could perhaps be modified. 
</noframes>
</noscript>

Plus, also add at the end of your page, near the closing tag, the following code:
 <script type="text/javascript" src="http://ied.gospelcom.net/scripts/functionAddEvent.js"></script> <script type="text/javascript" src="http://ied.gospelcom.net/scripts/toolTipLib.js"></script> <script type="text/javascript" src="http://ied.gospelcom.net/scripts/dictionary.js"></script> </body> <a name="end"></a>

And that’s it! You have a new page of content. This code will draw down the latest Assessment Tool content into your page. But please read the notes below too.

Making it print nicely

Many people will want to print this questionnaire.

If you want to make your page very printer-friendly, enclose other page elements such as menu, footer etc, which need not appear when printed, within class="hide" tags. (If these items already have a class, you can add two class items together thus: class="menu hide".) This, in conjunction with our own provided print style link, will make the page print correctly for the many people who wish to keep it for reference.

Then test your page by printing it – best with a ‘print preview’ option to save paper. (If your printer interface does not offer this option, get a trial version of pdfFactory.) Only the tips should appear, without your own navigation or other page elements.

There may be other unwanted interactions between the rest of your style, and our print style sheet. If your own style in the page header, or style link, is not specified as "screen", please add media="screen"> this thus:
style within page: <style type="text/css" media="screen">
style in separate file:
<link rel="stylesheet" type="text/css" media="screen" href="URL of your CSS file">

And if when you do a printing test, the appearance of the main table goes too wide, then try this code similar to this in your page header:
<style type="text/css" media="print"> .designcontent, .designcontent1, .designtable { width:15cm; } </script>

Important notes – please read!

You should retain your own style sheet link or CSS specification on this page too. The rest of your page content will be styled by this.
If you wish to style the top headline differently, for instance with your own color scheme, add your own H1 and H2 style specifications in the screen style specification we have provided and these will over-ride our CSS.
Your page style will, no doubt, already contain left and right margins – it is very hard to read a page which is full width, where the content goes to the edge of the screen.
We have already set the font for this content as Verdana, though you can over-ride this if you wish. We also highly recommend the following style for this (or any page):
{ font-family: verdana, helvetica, sans-serif, arial; font-size: 90%; line-height:150%; }
– it is widely held that increased line spacing, coupled with slightly less than browser default font-size, and the readable uncramped font Verdana (designed specifically for computer screens), are the ideal combination for webpages.
The code is designed to draw down our content by Javascript (in two blocks, so that the first part will quickly appear for those on slow dialup connections). For the 5% of users who have Javascript disabled, there is a fall-back noscript iframe link. The width of this is specified as 100% by the class '.iframe'. All browsers except IE6 interpret this to mean 100% of the page element (div or table cell) that the iframe is place in. IE6 may interpret it as 100% of screen width, so that if your page element is less than 100% wide, our content goes off the screen. We have therefore added an IE6-only style which forces the content to the left. Do test your page appearance with Javascript disabled, if possible in several browsers including IE6.
However, if you have inserted the tool within a div or table that has a defined fixed pixel width, then you may need to change the code in the page head within conditional IE6 tags – the one that starts: 
We can even include specific extra wording in ‘your’ version within the numbered points. If you would like a sentence or two about your own ministry, for instance in reference to church template site providers, please ask.
You may wish to add a section of further links and comments after our content. This might include reference to your own ministry, highlight links to other pages on your site, or include off-site links to other pages about church websites.
Write an enticing and meaningful <title> in your page head which may include your site or ministry name plus something about church websites.
Although one photo is already included, you can also use any of our other photos on your page; note they are too big for webpages in their current sizing, so download and resize for your needs. You can also use our spanner graphics if you wish.
If you want the gray box at the end to be invisible in your site, add to your CSS in the head of the page .tell {display: none; }
If you have problems, or suggestions for improving our CSS or other aspects of the system, please email.

3. Alternate easy methods: for framed sites and normal sites

If your site has a framed structure, you can link directly to:
http://ied.gospelcom.net/churchdesign-iframe.php and this will call up the content seamlessly within your main content frame, without our own header, footer or navigation links.

For a link to the tool within a non-framed page, that does not display our header, menu etc, then make a direct link to:
http://ied.gospelcom.net/churchtool.php

Home > Church tips >Insert code < You are here

Blog this/add to newsletters

the web evangelism resource guide
... & annual worldwide focus day for Christians

Internet Evangelism Day

Internet Evangelism Day

seizing the potential

Printed from Internet Evangelism Day © May 2008
Can be freely reproduced in print with attribution to InternetEvangelismDay.com.

Oops, page formatting error! Click here to restore.