1. What is It?

---

IFrame (pronounced "eye-frame") is an excellent and easy way for users to combine their own website with the resources from WiserEarth's directory.  An iFrame - or inline frame - is the HTML way to embed an HTML source/document into your page. IFrames are not difficult to implement, and they can even be styled through CSS.

 

Say for example that you created a website about Sea Turtles, and you wanted to provide information for organizations, events, and web resources for people interested in saving sea turtles.  But you would have to scour the web yourself, and painstakingly populate your website one entry at a time to get a substantial amount of information. 

Instead, why not take advantage of WiserEarth's directory, which already has combed the web for that information?  With an Iframe, you can do exactly that - take the information from WiserEarth and place it within your website, providing a mostly seamless integration between the two.  Let's take a look at some examples:

 

Example 1:  Integrating a WiserEarth group into your IFrame

Green October Alignment (http://www.greenoctober2008.org/)

 

 

Green October has made full use of WiserEarth's groups feature - on the homepage, you'll see a series of links pointing to Events, Organizations, Groups, People, etc.  If you click on any of these links, you'll pull up the information that's posted in the WiserEarth Green October group - but without any hint that the information is actually coming from WiserEarth.

 

The benefit of this is that Green October can customize their own website to look exactly as they want, fitting the top portion of the page with their own logo and graphics, and seamlessly pull in the information on WiserEarth without disrupting the user experience.

 

Example 2:  Integrating WiserEarth's search into your IFrame

Conservation Pages (http://www.conservationpages.org/)

 

Conservation Pages uses the IFrame to focus in on just the Search feature of Wiserearth.  More specifically, it only pulls in search results from the Solutions directory of WiserEarth.  The homepage presents the user with a clear and simple statement of what the site is intended to do - search for solutions for biodiversity conservation projects. 

 

Visitors to the website just type in a keyword, and they see the search results displayed seamlessly under the Conservation Pages logo. This is a great way of tapping into WiserEarth's large directory without using the WiserEarth navigation.  By selectively choosing just Solutions, the website becomes clear and easy to use.

 

Plus, its low-cost: for the website owner of Conservation pages, designing and posting the website cost less than $1,250 with ongoing costs around $100 a year to pay his web hosting fees!  WiserEarth does not charge anything for use of its IFrame feature.

 

 

2. Summary of Benefits of Using an IFrame:

---

• Low Cost, low maintenance - you don't need to create or maintain your own database
• Customization - you get to decide what navigation to provide to the user and what they see
• Branding - you get to brand the browsing experience, the only WiserEarth presence is a small credit at the bottom of the page.
• Low Tech - most anyone with basic web skills can do it, no programming required

 

3. How Do I Make a Website Like This Myself? (i.e. Technical Requirements)

---

First you will need to have your own website hosted somewhere, which you can do by registering for a web address (URL) and finding a web hosting service. Note: These are things that WiserEarth does not provide - please Google 'web hosting' to find out more on this. Once you have that set up, you're ready to begin.

 

Integrating a WiserEarth group into your IFrame

1. If you want to share a specific collection of recordspulled from group, organization, people, resources, job or event records, create a WiserEarth group to collect them into a single module using the add or create options. View tutorial on WiserEarth group >>

2. Then click on 'See All' to view all the records of a specific group module (e.g. Related Organizations) on one page, copy the web address (URL) from your browse.

3. Add '/no_layout/1' to the end of the web address that you have copied, so the address

"http://www.wiserearth.org/organization/greenoctober...group" would become "http://www.wiserearth.org/organization/greenoctober...group/no_layout/1".

4. Using the given example, your HTML should look similar to this:

 

<iframe src="http://www.wiserearth.org/organization/greenoctober...group/no_layout/1" >

Alternative text in case iFrame content can not be seen.

</iframe>

 

Integrating WiserEarth search into your IFrame

1. There is no need to create a WiserEarth group - simply type in your keywords and perform your search as you would regular on WiserEarth.

2. If you like, click on the "Advanced Search" link at the top right of the page, select your preferred search terms and drop-downs and narrow your search further and press enter.
3. Copy the resulting web address from your browser.

(Note: The difference from above is this one doesn't have the "/" in front, using the character "&" and the "=" sign.)
4. Add  '&no_layout=1' to the end of the web address that you have copied, so its address "http://www.wiserearth.org/resource/keywords=Solar....&publisher=" would become "http://www.wiserearth.org/resource/keywords=Solar....&publisher=&no_layout=1". 

 

 

4. Contact for Assistance

---

We are happy to help any members who are interested in setting this up on their own websites, so if you have any questions, concerns, just email support@wiserearth.org, and we'll follow up as soon as possible with your inquiries.