Skip to content

Instantly share code, notes, and snippets.

@mwittenberg11

mwittenberg11/tumblrwidget.html

Last active November 17, 2015 18:56
Show Gist options
  • Save mwittenberg11/ee0a17ab0023b718c4c5 to your computer and use it in GitHub Desktop.
Save mwittenberg11/ee0a17ab0023b718c4c5 to your computer and use it in GitHub Desktop.
Download ZIP
Tumblr widget
Raw
tumblrwidget.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tumblr include demo</title>
</head>
<body>
<script type="text/javascript" id="tumTableScript">
// ######
//
// Source: http://blog.ealdana.com/post/72511766650/how-to-embed-recent-tumblr-posts
// Source: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
// Doc: https://www.tumblr.com/docs/en/api/v1
// Debug: http://kigo-admin.tumblr.com/api/read?debug=1
//
// Tailored for Kigo Kitchen by mitch@overscore.org 151113
//
// #####
(function() {
var postCount = 6;
var titleHasURL = false;
// Tumblr retrieval
var tumJSON = document.createElement('script');
tumJSON.type = 'text/javascript';
tumJSON.src = 'http://kigo-admin.tumblr.com/api/read/json?type=text&filter=text&num=' + postCount;
document.head.appendChild(tumJSON);
// Styles
var css = '.tumTable { font-family: sans-serif; border-collapse: collapse; border-spacing: 0; border: 2px solid #808080; text-align: left; } \
.tumTable th { background-color:#FFCC00; border-bottom: 2px solid #808080; text-align: left; font-size: 15px; } \
.tumTable th, td { padding: 3px; } \
.tumTitle { border-top: 1px solid #808080; padding-top: 16px; font-weight: bold; font-size: 13px; } \
.tumText { padding-bottom: 16px; color: #333333; font-size: 12px;}';
var style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
// Execute and generate table
tumJSON.onload = function(data) {
if(!tumblr_api_read) return;
var posts = tumblr_api_read.posts;
var tbody = '<tbody>';
for(var i = 0; i < postCount; ++i) {
post = posts[i];
title = post['regular-title'];
url = post['url'];
if (titleHasURL){
title = '<a href="' + url + '" target="_blank">' + title + '</a>';
}
text = post['regular-body'];
tbody += '<tr><td class="tumTitle">' + title + '</td></tr>';
tbody += '<tr><td class="tumText">' + text + '</td></tr>';
}
tbody += '</tbody>';
//Insert result
var messagesAnnoucements = document.getElementById("messagesAnnoucements");
var table = '<table class="tumTable"><thead><tr><th>';
table += 'Messages & Announcements';
table += '</th></tr></thead>';
table += tbody;
table += '</table>';
messagesAnnoucements.innerHTML = table;
};
})();
</script>
<div style="overflow: scroll;" id="messagesAnnoucements"><p>Please <a href="http://kigo-admin.tumblr.com/">follow this link</a> to view recent news.</p></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment