SpreadEmbed: Turning a Google Spreadsheet of links into a page of embedded objects

#embedly_twitter_83506155{background:url(http://a1.twimg.com/images/themes/theme19/bg.gif) #FFF04D; padding:20px;} #embedly_twitter_83506155 p{background:#fff;padding:10px 12px 0px 12px;margin:0;min-height:48px;color:#000;font-size:18px;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} #embedly_twitter_83506155 .embedly_tweet_content{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} #embedly_twitter_83506155 p span.metadata{display:block;width:100%;clear:both;margin-top:0px;height:40px; padding-bottom: 12px;} #embedly_twitter_83506155 p span.metadata span.author{line-height:15px;color:#999;font-size:14px} #embedly_twitter_83506155 p span.metadata span.author a{line-height:15px;font-size:20px;vertical-align:middle} #embedly_twitter_83506155 p span.metadata span.author img{float:left;margin:0 10px 0 0px;width:48px;height:48px} #embedly_twitter_83506155 p a {color: #0099CC; text-decoration:none;} #embedly_twitter_83506155 p a:hover{text-decoration:underline} #embedly_twitter_83506155 .embedly_timestamp{font-size:13px;display:inline-block;margin-top: 5px;} #embedly_twitter_83506155 .components-above span.embedly_timestamp{font-size:10px;margin-top: 1px;line-height:12px} #embedly_twitter_83506155 a {color: #0099CC; text-decoration:none;} #embedly_twitter_83506155 a:hover{text-decoration:underline} #embedly_twitter_83506155 .tweet-screen-name {font-size: 14px; font-weight: bold;} #embedly_twitter_83506155 .tweet-full-name {padding-left: 4px; color: #999; font-size: 12px;} #embedly_twitter_83506155 .tweet-actions{margin-left: 10px;font-size:13px;display:inline-block;width:250px} #embedly_twitter_83506155 .components-above span.tweet-actions{font-size:10px} #embedly_twitter_83506155 .controls{line-height:12px!important} #embedly_twitter_83506155 .tweet-actions a {margin-left:5px} #embedly_twitter_83506155 .tweet-actions a b{font-weight:normal} #embedly_twitter_83506155 .components-above span.tweet-actions a b{vertical-align:baseline;line-height:12px} #embedly_twitter_83506155 .components-above .tweet-text{font-size:13px;vertical-align:baseline} #embedly_twitter_83506155 .tweet-image {float: left; width: 40px;} #embedly_twitter_83506155 .tweet-user-block-image {float: left; width: 48px; height: 48px} #embedly_twitter_83506155 .tweet-row {margin-left: 40px; margin-top: 3px;line-height: 17px;} #embedly_twitter_83506155 .tweet-user-block {margin-left: -40px;} #embedly_twitter_83506155 .stream-item {padding-bottom: 0px; margin-left: 12px;} #embedly_twitter_83506155 .simple-tweet-image img {margin-top: 4px;} #embedly_twitter_83506155 .simple-tweet-content {margin: 0 0 13px 0px; font-size: 14px; min-height:48px;} #embedly_twitter_83506155 .in-reply-to-border {border-color: #EBEBEB; border-style: solid; border-width: 1px 0 0;} #embedly_twitter_83506155 .in-reply-to-text {margin-left: 4px; padding-left: 8px; padding-right: 10px; color: #999; font-size: 12px;} #embedly_twitter_83506155 .tweet-actions i {background: transparent url(http://a2.twimg.com/a/1306889658/phoenix/img/sprite-icons.png) no-repeat;width:15px;height:15px;margin:0 4px -3px 3px;outline: none; text-indent:-99999px;vertical-align:baseline;display:inline-block;position:relative;} #embedly_twitter_83506155 .tweet-actions a.retweet-action i {background-position:-192px 0;} #embedly_twitter_83506155 .tweet-actions a.reply-action i {background-position:0 0;} #embedly_twitter_83506155 .tweet-actions a.favorite-action i {background-position:-32px 0;}


@mhawksey just used the twitteralytics script to create the following tweet archive: http://t.co/8aE8DwHM . thx for the awesome script! 🙂
Oct 06 via webFavoriteRetweetReply

One of the great things about open development is people take your stuff and do interesting things with it that you never thought about. As you’ll see from the embedded tweet above that’s exactly what Saqib Ali did, taking my Google Spreadsheet Twitter Archive mashup and combining it with the Embed.ly oEmbed API to create this curated page of tweets, brilliant!
Inspired by this, in this post I highlight why using a spreadsheet as a data source for embedded objects might be useful and how I made the SpreadEmbed prototype which allows you to do this.

What is SpreadEmbed?

image
You take a spreadsheet like this with a column of links, run it through SpreadEmbed and get a page like this. That’s all there is to it.
On a technical level SpreadEmbed reads a column using the Google Visualization API, passes the links to Embed.ly and generates a page from the result.

Why use a Google Spreadsheet as a data source?

Of course you could use a tool like Storify (which also is powered by Embed.ly) to do this but as I highlighted in this recent post there are limitations to far back you can go in the twitter search. I also like the concept of reusing a spreadsheet of tweets because as I’m discovering in my own analysis of event hashtags there are some very complex and interesting stories to tell which would benefit from some actual quotations. So for me I can filter a large archive of tweets and render it in a more visually appealing way (rather than as in this post directing people to a spreadsheet of data).
Another consideration is Google Spreadsheets are in themselves very collaborative environments allowing multiple editors, submissions via Google Forms or custom interfaces (I’ve started collecting article suggestions using a custom bookmarklet).

How SpreadEmbed was made: Some highlights

Putting this prototype together took about 4 hours to get it working and about the same again with tweaks. Fortunately there was already an example on the Embed.ly github, which embeds YouTube clips from a Twitter search. As my prototype iterates across cells most of the work has already been done.
The remaining headache was providing a way to access cell data from a user defined spreadsheet. The solution was using Tony Hirst’s Google Spreadsheets as a Database code (just for fun … (more because I wanted to see if I could do it) I wrote some code to generate a dropdown list of sheet names to allow the user to indicate where there links were). The source code is here, feel free to re-use/mod.

Limitations and better ways

One of the reasons I’m presenting SpreadEmbed as a proof of concept/4 hr hack and not a service is if you are making more than 10,000 calls a month the the embed.ly API you gotta pay. Also there are probably better ways of doing it. Saqib hasn’t said how exactly he did his version, but I’m guessing you can just copy and paste a list of urls into a post and if you’ve got an embed.ly type plugin it’ll do the rest of your work for you.
Anyway it was all just for fun  …

#embedly_twitter_84467416{background:url(http://a3.twimg.com/profile_background_images/68812920/Untitled-1.gif) #e8e8e8; padding:20px;} #embedly_twitter_84467416 p{background:#fff;padding:10px 12px 0px 12px;margin:0;min-height:48px;color:#000;font-size:18px;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} #embedly_twitter_84467416 .embedly_tweet_content{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} #embedly_twitter_84467416 p span.metadata{display:block;width:100%;clear:both;margin-top:0px;height:40px; padding-bottom: 12px;} #embedly_twitter_84467416 p span.metadata span.author{line-height:15px;color:#999;font-size:14px} #embedly_twitter_84467416 p span.metadata span.author a{line-height:15px;font-size:20px;vertical-align:middle} #embedly_twitter_84467416 p span.metadata span.author img{float:left;margin:0 10px 0 0px;width:48px;height:48px} #embedly_twitter_84467416 p a {color: #fd4912; text-decoration:none;} #embedly_twitter_84467416 p a:hover{text-decoration:underline} #embedly_twitter_84467416 .embedly_timestamp{font-size:13px;display:inline-block;margin-top: 5px;} #embedly_twitter_84467416 .components-above span.embedly_timestamp{font-size:10px;margin-top: 1px;line-height:12px} #embedly_twitter_84467416 a {color: #fd4912; text-decoration:none;} #embedly_twitter_84467416 a:hover{text-decoration:underline} #embedly_twitter_84467416 .tweet-screen-name {font-size: 14px; font-weight: bold;} #embedly_twitter_84467416 .tweet-full-name {padding-left: 4px; color: #999; font-size: 12px;} #embedly_twitter_84467416 .tweet-actions{margin-left: 10px;font-size:13px;display:inline-block;width:250px} #embedly_twitter_84467416 .components-above span.tweet-actions{font-size:10px} #embedly_twitter_84467416 .controls{line-height:12px!important} #embedly_twitter_84467416 .tweet-actions a {margin-left:5px} #embedly_twitter_84467416 .tweet-actions a b{font-weight:normal} #embedly_twitter_84467416 .components-above span.tweet-actions a b{vertical-align:baseline;line-height:12px} #embedly_twitter_84467416 .components-above .tweet-text{font-size:13px;vertical-align:baseline} #embedly_twitter_84467416 .tweet-image {float: left; width: 40px;} #embedly_twitter_84467416 .tweet-user-block-image {float: left; width: 48px; height: 48px} #embedly_twitter_84467416 .tweet-row {margin-left: 40px; margin-top: 3px;line-height: 17px;} #embedly_twitter_84467416 .tweet-user-block {margin-left: -40px;} #embedly_twitter_84467416 .stream-item {padding-bottom: 0px; margin-left: 12px;} #embedly_twitter_84467416 .simple-tweet-image img {margin-top: 4px;} #embedly_twitter_84467416 .simple-tweet-content {margin: 0 0 13px 0px; font-size: 14px; min-height:48px;} #embedly_twitter_84467416 .in-reply-to-border {border-color: #EBEBEB; border-style: solid; border-width: 1px 0 0;} #embedly_twitter_84467416 .in-reply-to-text {margin-left: 4px; padding-left: 8px; padding-right: 10px; color: #999; font-size: 12px;} #embedly_twitter_84467416 .tweet-actions i {background: transparent url(http://a2.twimg.com/a/1306889658/phoenix/img/sprite-icons.png) no-repeat;width:15px;height:15px;margin:0 4px -3px 3px;outline: none; text-indent:-99999px;vertical-align:baseline;display:inline-block;position:relative;} #embedly_twitter_84467416 .tweet-actions a.retweet-action i {background-position:-192px 0;} #embedly_twitter_84467416 .tweet-actions a.reply-action i {background-position:0 0;} #embedly_twitter_84467416 .tweet-actions a.favorite-action i {background-position:-32px 0;}


By me: SpreadEmbed: Turning a Google Spreadsheet of links into a page of embedded objects http://t.co/GtpmfaHW
Oct 12 via Tweet ButtonFavoriteRetweetReply

chevron_left
chevron_right

Join the conversation

comment 2 comments

Comments are closed.

css.php