First page  -  Tutorials  -  Quick tips  -  Info  -  Contact me
Go to sodadb

Tutorial: embed Sodadb in your website

by Derek on May 16, 2012

There are two easy ways to embed your Sodadb database in your own website.

1. Embed in your website by using an iFrame (example is here)
2. Embed in your website by using a lightbox-like popup (example is here)

And you can embed 3 different pages in your website
1. The main application,
2. The website plugin (API), for example »
3. The formOnly option, for example »
More info about the options can be found here »

Before publishing your database on the web, make sure to protect your database by clicking Option Menu - Protect your database

 

 

Method 1. embed in your website by using an iFrame
1. create an API key
Go to your database and click Option menuPublish your database
Choose the appropriate user-rights and click the save button.

This will activate your publish API. Your database can be accessed with this url:
http://sodadb.com/api.php?i=your API key

2. create a page in your website where you want the database to show and enter this code in your page:

<iframe id="loadHere" style="background: none repeat scroll 0% 0% #ffffff;" name="loadHere" src="https://sodadb.com/api.php?i=your API key here" frameborder="0" scrolling="yes" align="left" width="100%" height="600px"></iframe>

 

 

Method 2. embed in your website by using a lightbox-like popup

The method described here uses jquery and colorbox.

1. create an API key
Go to your database and click Option menuPublish your database
Choose the appropriate user-rights and click the save button.

2. download colorbox here

3. create a page in your website where you want a link to the database.

Enter this in the head section of your page

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="colorbox/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">// <![CDATA[
        $(document).ready(function(){
                $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
        });
// ]]></script>

Watch out for the path to your colorbox. This can be different on your server.

Enter this in the body section of your page

<a class="iframe" href="https://sodadb.com/api.php?i=your secret key">Click here to open my database ยป</a>

 

If you want to change how the popup looks, there are plenty of other options, please check out the examples on the colorbox pages.

 

Watch out: you need to replace the your secret key with your actual key.
Watch out 2: for IE8 to work you need to enter this before the html section of your page.

<!DOCTYPE html>

Comments are closed.