Using a Google Drive Spreadsheet equally a database for Blogger

0
10

One of the “limitations” to Blogger is that you lot don’t bring access to a database to exercise fields for populating content. In previous posts we’ve showed you lot how to create a cast using Google Drive together with to comprise it into your Blogger website; inwards this tutorial we’re going to exhibit you lot how you lot tin hand the sack likewise job that same content, stored inwards the Google Drive Spreadsheet, to populate your site amongst the content, every bit good every bit content from whatever other Google Drive Spreadsheet.

This tutorial uses JQuery every bit the Javascript library, every bit good every bit JSON every bit the format to line inwards the content. While the instance exclusively shows it inwards a uncomplicated listing format, in that location are many dissimilar ways you lot tin hand the sack job this information together with functionality, such every bit edifice an interactive rolodex for example.

The Steps:

  1. create spreadsheet inwards Google Drive or instruct to the spreadsheet created past times your submission form
  2. grab the docKey from the URL that looks similar https://docs.google.com/spreadsheets/d/THE-KEY/edit#gid=0
  3. use Row 1 inwards the spreadsheet to hold upwards the column headers that are used inwards the variables inwards the code. 1-word headers preferred for this example
  4. go to File -> Publish to the Web, cheque “automatically republish when changes are made”, together with hitting “start publishing”
The code example:

<script src=’//www.google.com/jsapi’ type=’text/javascript’/>
<script src=’//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>//<![CDATA[
/**
this script was written past times Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
whatever updates to this script volition hold upwards posted to BlogXpertise
delight exit this message together with hand credit where credit is due!
**/
var docKey = ‘1Xg095tdG_9VY0b93FSh0eK52I2g6SjGg-g-pJ3u95YU’; // the docKey of your Google Docs spreadsheet
var insertAfter = ‘#Blog1’; // reference of object inwards your DOM to insert the object into
var objectType = ‘<div>’; // object that we’ll hold upwards inserting every bit a container for the feed information
var objectID = ‘thefeed’; // id of the object that is beingness inserted
var url = ‘http://spreadsheets.google.com/feeds/list/’ + docKey +’/od6/public/values?alt=json’;
$(document).ready(function(){
google.load(‘feeds’, ‘1’, { ‘callback’ : function(){ 
($.getJSON(url, ‘callback=?’)).success(function(data){
$(insertAfter).after(
$(objectType).attr(‘id’,objectID)
);
var wrapper = $(‘#’+objectID);
            $(data.feed.entry).each(function(i,entry){
var elevate = entry.gsx$name.$t;
var url = entry.gsx$url.$t;
var type = entry.gsx$type.$t;
var location = entry.gsx$location.$t;
wrapper.append(
$(‘<ul>’).append(
$(‘<li>’).text(name)
).append(
$(‘<li>’).text(url)
).append(
$(‘<li>’).text(type)
).append(
$(‘<li>’).text(location)
)
)
});
        });
    }});
});
//]]></script>
</head>
<body>
<div id=’Blog1′>this won’t hold upwards necessary inwards your actual implementation, placeholder for the Blog1 object</div>
</body>
</html>

Notes:

Please banking concern notation that the firstly 2 lines volition probable non hold upwards necessary inwards your template every bit they are probable already there. Add everything from <script type=’text/javascript’>//<![CDATA[   to  //]]></script>  into your template, earlier </head>, to instruct it to work.
A build clean version of the code tin hand the sack hold upwards institute here.

To job multiple worksheets inside i Google Spreadsheet, you lot quest to instruct the private Worksheet IDs. To exercise that enquire for your worksheet feed past times going to:

https://spreadsheets.google.com/feeds/worksheets/YOUR_SPREADSHEET_ID/private/full

(replace the variable amongst your ain ID)

Within that document, easier to come across if you lot format the XML, you’ll come across the dissimilar ids start amongst the firstly labelled “od6”. 


Sumber http://www.blogxpertise.com/