Add the Church Site Tips page to your site

The iframe method

You can easily add our tips page to 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 allows your site visitors to tell others about it, and their recommendation emails will contain your own URL. (This content is also available to reproduce in printed publications.)

We also offer an alternate method of insertion using Javascript/CSS. But the iframe method described below is simple, and just involves adding an iframe to your page which will automatically resize to fit its contents. It also has the advantage of working almost as well for users with Javascript disabled.

  1. Create a new page in your website, with an easy short file name such as ‘tips’, ‘ideas’ or ‘church’ – not too long because it is printed in the custom ‘tell a friend’ email and news release. Link to it from your normal navigation system.

  2. Copy/paste into this new page the code for this entire page from the text box below, using a text editor or the text editing mode of your HTML editor.

  3. Use your normal CSS for the rest of your site, but though you may need to adjust the values for left and right body margin and padding to less than normal, so that the iframe extends to the edges of the page, if that is necessary within your page layout. If you do this, you may then need to adjust margins or padding for header and footers. But ensure that you use our own CSS specifications too.

  4. Create a page headline and introduction to the content. You can use similar wording to that at the top of our Tips page.

  5. Ensure there is a navigation menu at the top or side of your page, or some other way for direct visitors to access the rest of your site. You can also adjust the width of the iframe to less than 100%, and position it to left or right of your page, so that you can insert your own left/right-hand navigation menu or other margin content. The main body content will happily sit within your own main page DIV and only expand to that width.

  6. This iframe method also allows you, if you wish, to link to this page using a Partner ID which will place your name and URL on all pages of the IE Day site. All you need to change in the code below would be the addition of ?partner=yourID to the link within your iframe coding: more.

The code

Just copy/paste the entire code below into a new completely empty page (or copy different elements into your standard page template). Take care that you only highlight and copy text that is within this box. There are explanatory notes in red that you can hover for more information. Adjust the DOCTYPE and CHARSET to those you use on your site. Then customize it to your own requirements:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Your own title here</title>

<meta name="description" content="Add descriptive sentence or two here for benefit of search engines">

<style type="text/css" media="screen">
Further specific CSS for your page here
div#warning { display: none; }

<style type="text/css" media="print">
div#warning { display: block; color:black }
<noscript><style type="text/css">.iframe { height: 500em; }</style></noscript>

<script type="text/javascript">
This code is from Dynamic Web Coding at
See Terms of Use at
regarding conditions under which you may use this code.
This notice must be retained in the code as is! Of course, code can be placed in a separate JS file if you prefer

function getDocHeight(doc) {
  var docHt = 0, sh, oh;
  if (doc.height) docHt = doc.height;
  else if (doc.body) {
  if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
  if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
  if (sh && oh) docHt = Math.max(sh, oh);
  return docHt;

function setIframeHeight(iframeName) {
  var iframeWin = window.frames[iframeName];
  var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
  if ( iframeEl && iframeWin ) { = "auto"; // helps resize (for some) if new doc shorter than previous
  var docHt = getDocHeight(iframeWin.document);
  // need to add to height to be sure it will all show
  if (docHt) = docHt + 140 + "px";

function loadIframe(iframeName, url) {
  if ( window.frames[iframeName] ) {
   window.frames[iframeName].location = url;
  return false;
else return true;
function call_print()
{ window.parent.ifrm.print(); }



Your page header/navigation here

<h1>Your choice of headline here</h1>

Your own introduction

<div id="warning">
<h3>Sorry! Printing error! To print these tips correctly, you must click on the printer graphic at the end of the tips page</h3>

<img src="" width="1" height="1" border="0" alt="">
<iframe class="iframe" name="ifrm" id="ifrm" src="" scrolling="auto" frameborder="no" style="border:none;width:100%;margin:0 0 0 0;padding:0;">
<h3>Church Site Tips</h3>Ideas to make church sites reach into the community<br>
<a href="">More</a>
Find out how to build church websites that are evangelistic: <a href="">Church site tips</a>

Your optional page footer

<a name="end"></a>


printer graphic

Adding a print button

Because you cannot print the contents of an iframe by just pressing the browswer print button, it will help your site visitors if you add a print button in your page footer. If you wish to add this function, use the following code in your page footer (or anywhere else on the page):
<span onclick="call_print();"><img src="" style="vertical-align: text-bottom; cursor: help; margin-left: 8px; margin-top: 6px;" alt="printer graphic" title=" To print this printer-friendly page, click here " border="0" height="16" width="23"></span>

Alternate styles available

The code above will create mouseover text within the page. If you would like this mouseover content appear in the left or right margin of the page, look for the line of code on your page that starts <iframe class="iframe" and change the page file name churchtips-iframenomargin.php to one of the file names shown below (click on link to view style):
• pale brown left margin: churchtips-iframeleftbrown.php
• pale blue left margin: churchtips-iframeleftblue.php
• pale blue right margin: churchtips-iframerightblue.php
• pale brown right margin: churchtips-iframe.php

In addition, we can add extra text in the page which is customized for your site, and will amend or amplify any of the numbered points to fit your own needs. Please write about this.

If your site has a framed structure, you can call up our page within your main frame.

Footnote: iframe resizing scripts explained

When the page within an iframe is on the same domain as the host page, a single Javascript within the host page is sufficient to resize the iframe to fit its contents: example. But when the framed page is on a different domain (as in the system described here), a Javascript is needed within both pages. We are using the code from Dynamic Drive.
Home > Church tips >Insert code < You are here   
Worldwide total of web users: info icon More stats: World | Social networking

Link here  Blog this/add to newsletters     Bookmark and Share Evangelism Day
Add to
your site?
Printed from Internet Evangelism Day © Jul 2018
Can be freely reproduced in print with attribution to
Oops, Evangelism Day page formatting error! Click here to restore.
FREE communication ebooks

How Internet Evangelism Day can help YOUR church

Free newsletter
Please can you...
Please share this page or about IE Day on
– ready-made wording about this page
Link  Blog