One of the limitations to Blogger
is that it dosen't have access to a database to create fields for populating
content. In this tutorial we are going to show you how you can also use the
same content stored in the Google Drive Spreadsheet to populate your site with
the content as well as content from any
other Google Drive Spreadsheet.
This tutorial uses JQuery as the
Javascript library, as well as JSON as the format to pull in the content.
STEPS:
1. Create spreadsheet in Google
Drive or go to the spreadsheet created by your submission form.
2. Grab the docKey from the URL
that looks like https://docs.google.com/spreadsheets/d/THE-KEY/edit#gid=0
3. Use Row 1 in the spreadsheet to
be the column headers that are used in the variables in the code. 1-word
headers preferred for this example.
4. Go to File Publish to the Web, check automatically
republish when changes are made, and hit Start Publishing
CODE
EXAMPLE
<script
src=https://www.google.com/jsapi’type=’text/javascript’/>
<script
src=https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’type=’text/javascript’/>
<script
type=’text/javascript’>//<![CDATA[/**this script was written by Precious
Full Gist Blog https://www.fullgistblog.com
for Blogger Tips all updates to this script will be posted to Full Gist Blog
please live this message and give credit where credit is due!**/
var docKey=’1Xg095tdG_9VYOb93FSh0eK52I2g6SjGg-g-pJ3u95YU’;
// the docKey of your Google Docs spreadsheet
var insertAfter=’#Blog1’; // reference of object in your DOM
to insert the object into
var object Type = ‘<div>’; // object that we’ll be
inserting as a container for the feed information
var objectID = ‘thefeed’;// id of the object that is
being inserted
var url =’ https://spreadsheets.google.com/feeds/list/’+docKey
+’/od6/public/values?aIt=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 name = entry.gsx$name.$t;
var url = entry.gsx$name.$t;
var type = entry.gsx$name.$t;
var location= entry.gsx$name.$t;
wrapper.append(
$(‘<ul>’).append(
$(‘<li>’).text(name)
).append)
$(‘<li>’).text(url)
).append)
$(‘<li>’).text(location)
)
)
});
});
}});
});
//]]></script>
</head>
<body>
<div id=’Blog1’>this won’t be necessary in your
actual implementation, placeholder for the Blog1 object</div>
</body>
</html>
NOTE: Please note that the first two lines will likely
not be necessary in your template as they are likely already there. Add
everything from <script
type=’text/javascript’>//<![CDATA[ to //]]></script> into your
template, before </head>, to get it to work
A clean version of this code can be found here or you
reply in the comment box
To use multiple worksheet within one Google Spreadsheet,
you need to get the individual Worksheet IDs. To do that, ask for your
worksheet feed by going to:
https://spreadsheet .google.com/feeds/worksheets/YOUR_SREADSHEET_ID/private/full
[replace the variable with your own ID]
Within that document, easier to see if you format the
XML, you’ll see the different ids beginning with the first labeled “od6”.
No comments:
Post a Comment
We Love Comments