Tumblr API posts stream

Developer
Juan Vargas
Size
3,852 Kb
Views
14,168
  1. Tumblr API posts stream Previews
  2. Tumblr API posts stream HTML Codes
  3. Tumblr API posts stream CSS Codes
  4. Tumblr API posts stream JS Codes

How do I make an tumblr api posts stream?

Display Tumblr Photo postsForked from Juan's Pen Tumblr API.. What is a tumblr api posts stream? How do you make a tumblr api posts stream? This script and codes were developed by Juan Vargas on 14 October 2022, Friday.

Tumblr API posts stream Previews
IQ Test

Tumblr API posts stream - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tumblr API posts stream</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div id="tumblrFeed"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgithub.com/desandro/masonry/v2.1.08/jquery.masonry.js'></script>
<script src='https://imagesloaded.desandro.com/imagesloaded.pkgd.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tumblr API posts stream - Script Codes CSS Codes

body { background:#f2f2f2; padding:0px; margin:0px; font-family:Arial; font-size:13px; color:#777;
}
h1,h2,h3,h4,h5 { margin:0px; padding:0px;
}
p { line-height:25px;
}
a { cursor:pointer; text-decoration:none;
}
.menu { background:white; border-bottom:solid 2px #e5e5e5; height:60px;
}
.menu ul { width:980px; margin:0px auto; padding:0px;
}
.menu ul li{ float:left; list-style:none; display:inline;
}
.menu ul li.active a{ border-bottom:solid 2px dodgerblue; color:dodgerblue;
}
.menu ul li a{ height:60px; line-height:60px; padding:0 10px; display:block; color:grey;
}
.menu ul li a:hover{ color:dodgerblue;
}
#tumblrFeed .post { width:30%; float:left; background: #fff; border: solid 1px #eee; padding:12px; margin:0 10px 15px 0; border-radius:3px;
}
#tumblrFeed .post:hover img{ opacity:.7;
}
#tumblrFeed .post img { width:100%; height: auto;
}

Tumblr API posts stream - Script Codes JS Codes

var tumblr_api_read = null; // this is important do not remove
var tumblrPaginate = 0; // **TODO** make loop to increment each for pagination feature
var tumblrpostCount = 50; // set the post count number, max is 50 for API v1
$(document).ready(function () { // setup our namespace $.tumblr = {}; // modify these $.tumblr.url = 'https://gamelab-5ku-enteric.tumblr.com/api/read/json?callback=?&num=' + tumblrpostCount + '&start=' + tumblrPaginate + ''; // Offset syntax is start=[postnumtobeginat] $.tumblr.numPostsToDisplay = 50; $.tumblr.postMaxDescriptionLength = 250; // set to -1 to turn off jquery.expander /*$.tumblr.videoWidth='200'; // youtube default 400 $.tumblr.videoHeight='163'; // youtube default 325*/ // do not modify these unless you are hardcore //$.tumblr.imagePath = '..//testscripts/tumblr-jquery-master/img/'; $.tumblr.postCount = 0; $('#next').on("click",function (e) { e.preventDefault(); tumblrPaginate += 5; reloadTumblr(); }); $('#previous').on("click",function (e) { e.preventDefault(); tumblrPaginate -= 5; reloadTumblr(); }); reloadTumblr();
});
function reloadTumblr() { $("#tumblrFeed").empty(); $("#tumblrFeed").append("<div class='tumblrTitle' align='center'>Loading News...</div>"); $.tumblr.url = 'https://gamelab-5ku-enteric.tumblr.com/api/read/json?callback=?&num=' + tumblrpostCount + '&start=' + tumblrPaginate + ''; // set to display 7 posts. off set syntax is start=[postnumtobeginat] $.ajax({ url: $.tumblr.url, dataType: 'script', timeout: 10000, success: function () { console.log(tumblr_api_read) $("#tumblrFeed").empty(); if ((tumblr_api_read == undefined) || (tumblr_api_read == null)) { $("#tumblrFeed").append("<div class='title tumblrTitle' href='#'>unable to load Tumblr</div>"); $("#tumblrFeed").append("<div class='body'><a href=\"#\" onclick=\"javascript:reloadTumblr();\">[retry]</a></div>"); } else { //$("#tumblrFeed").append("<div class='body'><a href=\"#\" style=\"float:center\" onclick=\"javascript:reloadTumblr();\">Refresh News Page</a></div>"); $.tumblr.postCount = 0; $.each(tumblr_api_read.posts.slice(0, 50), function (i, post) { if ($.tumblr.postCount >= $.tumblr.numPostsToDisplay) { return; } parseTumblrJSON(post); $.tumblr.postCount++; }); // Apply Expander if ($.tumblr.postMaxDescriptionLength > -1) { $('div.expandable').expander({ slicePoint: $.tumblr.postMaxDescriptionLength, // default is 100 expandText: 'Read more.', userCollapseText: 'Read less.' }); } } }, error: function (xhr, statusTxt, errorTxt) { $("#tumblrFeed").append("<a class='title tumblrTitle' href='#'>Tumblr Parse Error</a>"); $("#tumblrFeed").append("<div class='body'>" + errorTxt + "<br/>" + xhr.responseText + "</div>"); } });
}
function formatDate(d) { //return (d); return (d).toString('dddd, MMMM d, yyyy'); //return d.getDay();//displays the day of the from (from 0-6) //return d.getMonth();//displays the month (from 0-11) //return d.getDate();//displays the day of the month (from 1-31) //return d.getFullYear();//displays the year (four digits)
}
function processResponse() {}
function parseTumblrJSON(post) { //alert(post.type); var d = new Date(post["date"]); var dateFmt = formatDate(d); switch (post.type) { case "regular": { $("#tumblrFeed").append( /*"<table style='width: 100%;'><tr><td width='18px'>" + "</td></table>");*/ ""); //Place directly before "</td>" <div class='date'>" + dateFmt + "</div> $("#tumblrFeed").append( "<div class='post'><a class='title tumblrTitle' href='" + post.url + "' target='_blank'>" + (post["regular-title"] == null ? 'view tumblr' : post["regular-title"]) + "</a><div class='date'><h6>Posted on " + dateFmt + "</h6></div><div class='body expandable'>" + post["regular-body"] + "</div></div>"); break; } case "photo": { var photolink = post["photo-url-500"] //$("#tumblrFeed").append("<div class='post'>"); $("#tumblrFeed").append( "<div class='post'><div class='photo-caption'>" + post["photo-caption"] + "</div><a class='title tumblrTitle' href='" + post.url + "' target='_blank'><div class='photo'><img src=" + photolink + "></div></a><div class='date'><h6>Posted on " + dateFmt + "</h6></div></div>"); // console.log(photolink); break; } default: break; } $("#tumblrFeed").append("<div class='clear'>&nbsp;</div>"); //Start calling Masonry
var $container = $('#tumblrFeed');
$container.imagesLoaded( function() {
$container.masonry({ itemSelector: '.post', columnWidth: 320 }); });
}
Tumblr API posts stream - Script Codes
Tumblr API posts stream - Script Codes
Home Page Home
Developer Juan Vargas
Username juanv911
Uploaded October 14, 2022
Rating 3
Size 3,852 Kb
Views 14,168
Do you need developer help for Tumblr API posts stream?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Juan Vargas (juanv911) Script Codes
Name
SocialCounters - Rounded Buttons
Tumblr API
Envato API
SocialCounters - Square Buttons
Dribbble API
Flickr API
SocialCounters - 17 Social Media APIs
Base
Reddit API
Tumblr API - Tagged Posts
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!