Skip to content

Instantly share code, notes, and snippets.

@mhawksey mhawksey/index.html
Created Oct 12, 2011

Embed
What would you like to do?
SpreadEmbed - Simple site to convert Google Spreadsheet column of links into objects using embed.ly
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SpreadEmbed</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.embedly.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1');
</script>
<script type="text/javascript">
/*
Copyright 2011 Martin Hawksey
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
$(document).ready(function() {
$('#loader').hide(500);
$('#theRest').hide();
});
function getEmbedly(){
$('#loader').show(500);
var url = document.getElementById('vizUrl').value;
var col = document.getElementById('gsCol').value;
var head = document.getElementById('gsHead').checked;
var row = 1;
if (head) row = 2;
if (col!='') url+='&range='+col+''+row+':'+col+'50';
$('#urlout').html("<a href='http://hawksey.info/spreadembed/se.html?url="+encodeURIComponent(url)+"'>Permalink</a>");
var query = new google.visualization.Query(url);
query.send(handleSelectResponse);
}
function handleSelectResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var arr = new Array();
for (i=0; i<data.getNumberOfRows(); i++){
$("#stuff LI").remove();
arr.push(data.getValue(i, 0));
}
$.embedly(arr, {maxWidth:500, key: "2b457b60f04a11e0b79e4040d3dc5c07"}, function(oembed){
if (oembed != null) {
$("#stuff").append('<li>'+(oembed.code)+'</li>');
}
});
$('#loader').hide(500);
}
// Mod from http://ouseful.open.ac.uk/datastore/gspreadsheetdb2.php
function preview() {
if (document.getElementById('gsKey').value!='') key=document.getElementById('gsKey').value;
if (/key=([^&]*)/.test(key)) key=/key=([^&]*)/.exec(key)[1];
var url='https://spreadsheets.google.com/feeds/worksheets/'+key+'/public/basic?alt=json';
$.getJSON(url,function(json){
var vizUrl=document.getElementById('vizUrl');
for (var u in json['feed']['entry']) {
vizUrl.options[u]=new Option(json['feed']['entry'][u]['title']['$t'],json['feed']['entry'][u]['link'][2]['href']);
}
$('#theRest').show(500);
});
}
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">Powered by <a href="http://api.embed.ly"><img src="http://static.embed.ly/images/logo.png"/></a></div>
<div id="content" class="main">
<h1>SpreadEmbed</h1>
<p align="center">This tool is inspired by <a href="http://enterprise20.squarespace.com/journal/2011/10/6/curated-archive-of-the-business-gets-social-gartnerchat.html">this brilliant idea</a> by <a href="http://ethnologician.org/about-me/" target="_blank">Saqib Ali</a> and put together by <a href="http://mashe.hawksey.info" target="_blank">mhawksey</a>.</p>
<div id="desc">
<p><strong>What is it? </strong> - It takes a list of urls stored in a published Google Spreadsheet, passes them to the Embed.ly API and produces a page of embedded objects. For example <a href="https://docs.google.com/spreadsheet/ccc?key=0AqGkLMU9sHmLdGVuQzlLb3dNakpCamJGSEtGUTN3bkE&hl=en_GB" target="_blank">this spreadsheet</a> is used to generate <a href="http://hawksey.info/spreadembed/se.html?url=https%3A%2F%2Fspreadsheets.google.com%2Ftq%3Fkey%3D0AqGkLMU9sHmLdGVuQzlLb3dNakpCamJGSEtGUTN3bkE%26sheet%3Dod6%26pub%3D1">this page</a>.</p>
</div>
<form id="embedform" class="main-form">
<p>
<label for="gsKey">1. Google spreadsheet key (e.g. <em>rvWgEEGK9xuUQBR1EFcxHWA</em> ) or spreadsheet URL</label>
<input type="text" id='gsKey' value="0AqGkLMU9sHmLdGVuQzlLb3dNakpCamJGSEtGUTN3bkE" size=60 onChange="preview()">
<input type="button" value="2. Get Sheet Names" onclick="preview()" />
</p>
<div id="theRest">
<p>
<label for="vizUrl">3. Select sheet name:</label>
<select name="vizUrl" id="vizUrl">
<option value="">-Select Sheet-</option>
</select>
</p>
<p>
<label for="gsCol">4. Enter column letter with urls</label>
<input type="text" id='gsCol' size=3/>
</p>
<p>
<label for="gsHead">5. Sheet has header row
<input name="gsHead" type="checkbox" id="gsHead" value="true" checked="checked" />
</label>
</p>
<p align="center">
<input type="button" value="6. Go Embed.ly It!" onclick="getEmbedly()" />
</p>
</div>
</form>
<div id="urlout"></div>
<div id="loader"> <img src="ajax-loader.gif" width="32" height="32" alt="loader" /><br />
</div>
<ul id="stuff">
</ul>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SpreadEmbed - Static</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="script/jquery.embedly.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1');
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content" class="main">
<div id="loader"> <img src="ajax-loader.gif" width="32" height="32" alt="loader" /><br /></div>
<ul id="stuff">
</ul>
</div>
<script>
//http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
$(document).ready(function() {
sourceUrl=decodeURIComponent($.getUrlVar('url'));
getEmbedly(sourceUrl);
$('#loader').hide(500);
})
var visualization;
function getEmbedly(sourceUrl){
var query = new google.visualization.Query(sourceUrl);
query.send(handleSelectResponse);
}
function handleSelectResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
//var ansSet=document.myform.ansSet
var arr = new Array();
for (i=0; i<data.getNumberOfRows(); i++){
$("#stuff LI").remove();
arr.push(data.getValue(i, 0));
}
$.embedly(arr, {maxWidth:500, key: "2b457b60f04a11e0b79e4040d3dc5c07"}, function(oembed){
if (oembed != null) {
$("#stuff").append('<li>'+(oembed.code)+'</li>');
}
});
}
</script>
</body>
</html>
BODY {background-color:#333333;}
#content{background-color:#FFFFFF;margin:0px auto 20px auto ;width:800px; padding:10px 0}
#embedform, #desc {width:600px;margin: 0px auto 20px auto ;}
#embedform .url{border:1px solid #AAAAAA;font-size:1.5em;margin:10px 0;padding:5px;width:75%;}
#embedform p{margin:3px 0}
#embedform .submit{float:right;font-size:1.7em;margin-top:10px;}
#embed {margin:auto;text-align:center;width:600px;}
#header{
text-align:right;
margin:0 auto;
width:800px;
height:75px;
background-color: #FFFFFF;
}
#loader{width:800px;text-align:center;}
#urlout{width:700px;text-align:right;}
a img {border:none;}
li {list-style:none; margin:20px; }
h1 {margin-top:0px;text-align:center}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.