Skip to content

Instantly share code, notes, and snippets.

/TwitterFetcher.js

Created April 6, 2014 04:28
Show Gist options
  • Save anonymous/10001561 to your computer and use it in GitHub Desktop.
Save anonymous/10001561 to your computer and use it in GitHub Desktop.
Download ZIP
Twitter Post Fetcher + Bootstrap Quote Carousel
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- Bootstrap core CSS -->
<link type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="style.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<section id="testimonials">
<div class="container">
<div class="row">
<div class='col-md-offset-2 col-md-8 text-center'>
<h2>What people are saying on Twitter</h2>
</div>
</div>
<div class='row'>
<div class='col-md-offset-2 col-md-8'>
<div id="testimonials-inner"></div>
</div>
</div>
</div>
</section>
<!-- Core JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="TwitterFetcher.js"></script>
<script>
// When the DOM is ready, run this function
$(document).ready(function() {
//Set the carousel options
$('#testimonials-inner').carousel({
pause: true,
interval: 4000,
});
});
</script>
</body>
<html>
Raw
style.css
/* carousel */
#testimonials
{
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;
}
/* Control buttons */
#testimonials .carousel-control
{
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 40px;
}
/* Previous button */
#testimonials .carousel-control.left
{
left: -29px;
}
/* Next button */
#testimonials .carousel-control.right
{
right: -29px !important;
}
/* Changes the position of the indicators */
#testimonials .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#testimonials .carousel-indicators li
{
background: #c0c0c0;
}
#testimonials .carousel-indicators .active
{
background: #333333;
}
#testimonials img
{
width: 100px;
height: 100px
}
.user a span{
display:none;
}
/* Interaction Container and Icons */
.interact {
display:block;
float:right;
margin-right:30px;
font-family: 'Fontawesome';
}
.interact a {
text-decoration:none;
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
border-radius:50%;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#testimonials
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#testimonials .carousel-indicators {
bottom: -20px !important;
}
#testimonials .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#testimonials .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
Raw
TwitterFetcher.js
/*********************************************************************
* #### Twitter Post Fetcher v10.0 ####
* Coded by Jason Mayes 2013. A present to all the developers out there.
* www.jasonmayes.com
* Please keep this disclaimer with my code if you use it. Thanks. :-)
* Got feedback or questions, ask here:
* http://www.jasonmayes.com/projects/twitterApi/
* Updates will be posted to this site.
*********************************************************************/
var twitterFetcher = function () {
function x(e) {
return e.replace(/<b[^>]*>(.*?)<\/b>/gi, function (c, e) {
return e
}).replace(/class=".*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi, "")
}
function p(e, c) {
for (var g = [], f = RegExp("(^| )" + c + "( |$)"), a = e.getElementsByTagName("*"), h = 0, d = a.length; h < d; h++) f.test(a[h].className) && g.push(a[h]);
return g
}
var y = "",
l = 20,
s = !0,
k = [],
t = !1,
q = !0,
r = !0,
u = null,
v = !0,
z = !0,
w = null,
A = !0;
return {
fetch: function (e, c, g, f, a, h, d, b, m, n) {
void 0 === g && (g = 20);
void 0 === f && (s = !0);
void 0 === a && (a = !0);
void 0 === h && (h = !0);
void 0 === d && (d = "default");
void 0 === b && (b = !0);
void 0 === m && (m = null);
void 0 === n && (n = !0);
t ? k.push({
id: e,
domId: c,
maxTweets: g,
enableLinks: f,
showUser: a,
showTime: h,
dateFunction: d,
showRt: b,
customCallback: m,
showInteraction: n
}) : (t = !0, y = c, l = g, s = f, r = a, q = h, z = b, u = d, w = m, A = n, c = document.createElement("script"), c.type = "text/javascript", c.src = "http://cdn.syndication.twimg.com/widgets/timelines/" + e + "?&lang=en&callback=twitterFetcher.callback&suppress_response_codes=true&rnd=" + Math.random(), document.getElementsByTagName("head")[0].appendChild(c))
},
callback: function (e) {
var c = document.createElement("div");
c.innerHTML = e.body;
"undefined" === typeof c.getElementsByClassName && (v = !1);
e = [];
var g = [],
f = [],
a = [],
h = [],
d = 0;
if (v) for (c = c.getElementsByClassName("tweet"); d < c.length;) {
0 < c[d].getElementsByClassName("retweet-credit").length ? a.push(!0) : a.push(!1);
if (!a[d] || a[d] && z) e.push(c[d].getElementsByClassName("e-entry-title")[0]), h.push(c[d].getAttribute("data-tweet-id")), g.push(c[d].getElementsByClassName("p-author")[0]), f.push(c[d].getElementsByClassName("dt-updated")[0]);
d++
} else for (c = p(c, "tweet"); d < c.length;) e.push(p(c[d], "e-entry-title")[0]), h.push(c[d].getAttribute("data-tweet-id")), g.push(p(c[d], "p-author")[0]), f.push(p(c[d], "dt-updated")[0]), 0 < p(c[d], "retweet-credit").length ? a.push(!0) : a.push(!1), d++;
e.length > l && (e.splice(l, e.length - l), g.splice(l, g.length - l), f.splice(l, f.length - l), a.splice(l, a.length - l));
c = [];
d = e.length;
for (a = 0; a < d;) {
if ("string" !== typeof u) {
var b = new Date(f[a].getAttribute("datetime").replace(/-/g, "/").replace("T", " ").split("+")[0]),
b = u(b);
f[a].setAttribute("aria-label", b);
if (e[a].innerText) if (v) f[a].innerText = b;
else {
var m = document.createElement("p"),
n = document.createTextNode(b);
m.appendChild(n);
m.setAttribute("aria-label", b);
f[a] = m
} else f[a].textContent = b
}
b = "";
s ? (r && (b += '<div class="row"><div class="user col-sm-3 text-center">' + x(g[a].innerHTML) + "</div>"), b += '<p class="tweet col-sm-9">' + x(e[a].innerHTML) + "</p>", q && (b += '<p class="timePosted">' + f[a].getAttribute("aria-label") + "</p>")) : e[a].innerText ? (r && (b += '<p class="user">' + g[a].innerText + "</p>"), b += '<p class="tweet">' + e[a].innerText +
"</p>", q && (b += '<p class="timePosted">' + f[a].innerText + "</p>")) : (r && (b += '<p class="user">' + g[a].textContent + "</p>"), b += '<p class="tweet">' + e[a].textContent + "</p>", q && (b += '<p class="timePosted">' + f[a].textContent + "</p></div>"));
A && (b += '<span class="interact"><a href="https://twitter.com/intent/tweet?in_reply_to=' + h[a] + '" class="twitter_reply_icon"> &#xf112; </a>|<a href="https://twitter.com/intent/retweet?tweet_id=' + h[a] + '" class="twitter_retweet_icon"> &#xf079; </a>|<a href="https://twitter.com/intent/favorite?tweet_id=' + h[a] + '" class="twitter_fav_icon"> &#xf005; </a></span>');
c.push(b);
a++
}
if (null == w) {
e = c.length;
g = 0;
f = document.getElementById(y);
for (h = "<ul>"; g < e;) h += "<li>" + c[g] + "</li>", g++;
f.innerHTML = h + "</ul>"
} else w(c);
t = !1;
0 < k.length && (twitterFetcher.fetch(k[0].id, k[0].domId, k[0].maxTweets, k[0].enableLinks, k[0].showUser, k[0].showTime, k[0].dateFunction, k[0].showRt, k[0].customCallback, k[0].showInteraction), k.splice(0, 1))
}
}
}();
/*
* ### HOW TO CREATE A VALID ID TO USE: ###
* Go to www.twitter.com and sign in as normal, go to your settings page.
* Go to "Widgets" on the left hand side.
* Create a new widget for what you need eg "user timeline" or "search" etc.
* Feel free to check "exclude replies" if you dont want replies in results.
* Now go back to settings page, and then go back to widgets page, you should
* see the widget you just created. Click edit.
* Now look at the URL in your web browser, you will see a long number like this:
* 345735908357048478
* Use this as your ID below instead!
*/
/**
* How to use fetch function:
* @param {string} Your Twitter widget ID.
* @param {string} The ID of the DOM element you want to write results to.
* @param {int} Optional - the maximum number of tweets you want returned. Must
* be a number between 1 and 20.
* @param {boolean} Optional - set true if you want urls and hash
tags to be hyperlinked!
* @param {boolean} Optional - Set false if you dont want user photo /
* name for tweet to show.
* @param {boolean} Optional - Set false if you dont want time of tweet
* to show.
* @param {function/string} Optional - A function you can specify to format
* tweet date/time however you like. This function takes a JavaScript date
* as a parameter and returns a String representation of that date.
* Alternatively you may specify the string 'default' to leave it with
* Twitter's default renderings.
* @param {boolean} Optional - Show retweets or not. Set false to not show.
* @param {function/string} Optional - A function to call when data is ready. It
* also passes the data to this function should you wish to manipulate it
* yourself before outputting. If you specify this parameter you must
* output data yourself!
* @param {boolean} Optional - Show links for reply, retweet, favourite. Set false to not show.
*/
// ##### Advanced example 2 #####
// Similar as previous, except this time we pass a custom function to render the
// tweets ourself! Useful if you need to know exactly when data has returned or
// if you need full control over the output.
twitterFetcher.fetch('452474033284456448', 'testimonials-inner', 8, true, true, false, '', false, handleTweets, true);
function handleTweets(tweets) {
var x = tweets.length;
var n = 0;
var z = 0;
var element = document.getElementById('testimonials-inner');
var html = '<ol class="carousel-indicators">';
while (z < x) {
html += '<li data-target="#testimonials-inner" data-slide-to="' + [z] + '"></li>';
z++;
}
html += '</ol>';
html += '<div class="carousel-inner">';
while (n < x) {
html += '<div class="item"><blockquote>' + tweets[n] + '</blockquote></div>';
n++;
}
html += '</div>';
html += '<a data-slide="prev" href="#testimonials-inner" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>';
html += '<a data-slide="next" href="#testimonials-inner" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>';
element.innerHTML = html;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment