How to Set Up SimpleList

SimpleList is designed to be a simple and easy way for you to include a list of some kind in your website or blog. Not sure why you’d use this, or what it is exactly? Check out this widget’s main page for more information on SimpleList.

---

How to Set Up SimpleList: Short Version

1. Make a single-column google spreadsheet
2. Put some info in it, then publish the spreadsheet. 
3. Copy the unique key for that google spreadsheet
4. Use the code generator, and copy and paste the output onto your website

---

How to Set Up SimpleList: Long Version

1. Make a single-column google spreadsheet

Use Google Drive to create a new spreadsheet, then in the first sheet delete all but the first column. You can hold more data in this file, but the first sheet must only have one column (or, at least, have nothing entered into any cells outside of the first column). Here is an example spreadsheet, and here is an even more stripped-down version so you can see what it should look like.
More information: how to create a google spreadsheet;  how to remove columns.

2) Publishing your spreadsheet

Once you have information in your spreadsheet you will need to publish it in order for the SimpleList code to be able to see the data. Follow this guide to publishing a google spreadsheet, or watch this video tutorial.

3) Copy the unique key for that google spreadsheet

Every file in Google Drive has its own unique key to identify it. You will need to find the key for the spreadsheet you intend to use. Open up the spreadsheet using Google Drive, and look at the address bar at the top, where the URL is. Somewhere in there you will find “key=”, followed by a long string of letters and numbers (up until a “#” or “&” sign). This long string is your unique spreadsheet key.

For reference, the key for this spreadsheet is:
0Alf3YdTm82z1dG85Z1Q4VnpkRXRZLVEwTDNtV1ZuTlE.

4) Paste this key into the code generator

Using the code generator, paste the key you have just found into the appropriate box there.

You may, if you wish, change the CSS style ID too. This is just in case you would like to change how your list appears on your website. All items from the spreadsheet appear within a “<div>” tag, with its ID set to this value; i.e. “<div id=’YourCSSCode’>”. You only need to change this if you know something about styling HTML using CSS!

5) Copy and paste the generated code on your website. 

This part is simple - copy and paste the code generated by the tool above somewhere onto your website or blog and your list should appear when you refresh the page!

Thank you for using SimpleList!

SimpleList Code Generator

I have written more detailed instructions here on how to set up SimpleList for your website; this post is a code generator so you can quickly and easily include it on your website. Just fetch the unique key from the google spreadsheet you plan to use and paste it below.

---

1) Enter your google spreadsheet key here:



2) Enter your own CSS style ID here (or leave as-is to randomise):


3) Copy and paste this code onto your website or blog:

<script src="https://googledrive.com/host/0B1f3YdTm82z1cy1tWUxWQ0tqVTQ"></script>
<script type="text/javascript">
    SimpleList('{Your Google Spreadsheet Key}','');
</script>

SimpleList Example

Here is an example of the SimpleList module in action. This uses a simple piece of javascript code, easily placed on your website or blog, and calls data from a google spreadsheet to produce a list of items such as the one below. The list can be customised using CSS, or you can choose from one of our themes. See the code generator to make your own!

The example here uses the data in this google spreadsheet and uses this CSS to style it.

The following javascript code is used:

<script src="https://googledrive.com/host/0B1f3YdTm82z1cy1tWUxWQ0tqVTQ"></script> <script type="text/javascript"> SimpleList('0Alf3YdTm82z1dG85Z1Q4VnpkRXRZLVEwTDNtV1ZuTlE','SimpleListExample'); </script>

And here is the example in action: