Twitter will now let you add pictures, GIFs, and videos to RTs: The best examples of creative retwee
- liadecubelrede
- Aug 14, 2023
- 5 min read
/********************************************************************** #### Twitter Post Fetcher v18.0.3 ####* Coded by Jason Mayes 2015. 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:* * Github: -Post-Fetcher* Updates will be posted to this site.*********************************************************************/(function(root, factory) if (typeof define === 'function' && define.amd) // AMD. Register as an anonymous module. define([], factory); else if (typeof exports === 'object') // Node. Does not work with strict CommonJS, but // only CommonJS-like environments that support module.exports, // like Node. module.exports = factory(); else // Browser globals. factory(); (this, function() var domNode = ''; var maxTweets = 20; var parseLinks = true; var queue = []; var inProgress = false; var printTime = true; var printUser = true; var formatterFunction = null; var supportsClassName = true; var showRts = true; var customCallbackFunction = null; var showInteractionLinks = true; var showImages = true; var useEmoji = true; var targetBlank = true; var lang = 'en'; var permalinks = true; var dataOnly = false; var script = null; var scriptAdded = false; function handleTweets(tweets) if (customCallbackFunction === null) var x = tweets.length; var n = 0; var element = document.getElementById(domNode); var html = ''; while(n '; element.innerHTML = html; else customCallbackFunction(tweets); function strip(data) tco-display function targetLinksToNewWindow(el) var links = el.getElementsByTagName('a'); for (var i = links.length - 1; i >= 0; i--) links[i].setAttribute('target', '_blank'); links[i].setAttribute('rel', 'noopener'); function getElementsByClassName (node, classname) var a = []; var regex = new RegExp('(^ function extractImagesUrl(image_data) if (image_data !== undefined && image_data.innerHTML.indexOf('data-image') >= 0) var data_src = image_data.innerHTML.match(/data-image=\"([^"]+)\"/ig); for (var i = 0; i 0) twitterFetcher.fetch(queue[0]); queue.splice(0,1); return; // Remove emoji and summary card images. if(!useEmoji) data.body = data.body.replace(/(]*>)/g, ''); // Remove display images. if (!showImages) data.body = data.body.replace(/(]*>))/g, ''); // Remove avatar images. if (!printUser) data.body = data.body.replace(/(]*>)/g, ''); var div = document.createElement('div'); div.innerHTML = data.body; if (typeof(div.getElementsByClassName) === 'undefined') supportsClassName = false; function swapDataSrc(element) var avatarImg = element.getElementsByTagName('img')[0]; if (avatarImg) avatarImg.src = avatarImg.getAttribute('data-src-2x'); else var screenName = element.getElementsByTagName('a')[0] .getAttribute('href').split('twitter.com/')[1]; var img = document.createElement('img'); img.setAttribute('src', ' ' + screenName + '/profile_image?size=bigger'); element.prepend(img); return element; var tweets = []; var authors = []; var times = []; var images = []; var rts = []; var tids = []; var permalinksURL = []; var x = 0; if (supportsClassName) var tmp = div.getElementsByClassName('timeline-Tweet'); while (x 0) rts.push(true); else rts.push(false); if (!rts[x] else var tmp = getElementsByClassName(div, 'timeline-Tweet'); while (x 0) rts.push(true); else rts.push(false); if (!rts[x] if (tweets.length > maxTweets) tweets.splice(maxTweets, (tweets.length - maxTweets)); authors.splice(maxTweets, (authors.length - maxTweets)); times.splice(maxTweets, (times.length - maxTweets)); rts.splice(maxTweets, (rts.length - maxTweets)); images.splice(maxTweets, (images.length - maxTweets)); permalinksURL.splice(maxTweets, (permalinksURL.length - maxTweets)); var arrayTweets = []; var x = tweets.length; var n = 0; if (dataOnly) while (n ') + '' : '>') + '' + '' : '>') + ''; if (showImages && images[n] !== undefined && extractImagesUrl(images[n]) !== undefined) var extractedImages = extractImagesUrl(images[n]); for (var i = 0; i 0) twitterFetcher.fetch(queue[0]); queue.splice(0,1); ; // It must be a global variable because it will be called by JSONP. window.__twttrf = twitterFetcher; window.twitterFetcher = twitterFetcher; return twitterFetcher;));// Prepend polyfill for IE/Edge.(function (arr) arr.forEach(function (item) if (item.hasOwnProperty('prepend')) return; Object.defineProperty(item, 'prepend', configurable: true, enumerable: true, writable: true, value: function prepend() var argArr = Array.prototype.slice.call(arguments), docFrag = document.createDocumentFragment(); argArr.forEach(function (argItem) var isNode = argItem instanceof Node; docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); ); this.insertBefore(docFrag, this.firstChild); ); );)([Element.prototype, Document.prototype, DocumentFragment.prototype]);/** * ### 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 time line" or "search" etc. * Feel free to check "exclude replies" if you don't want replies in results. * Now go back to settings page, and then go back to widgets page and * you should see the widget you just created. Click edit. * 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 TwitterFetcher's fetch function: * * @function fetch(object) Fetches the Twitter content according to * the parameters specified in object. * * @param object Object An object containing case sensitive key-value pairs * of properties below. * * You may specify at minimum the following two required properties: * * @param object.id string The ID of the Twitter widget you wish * to grab data from (see above for how to generate this number). * @param object.domId string The ID of the DOM element you want * to write results to. * * You may also specify one or more of the following optional properties * if you desire: * * @param object.maxTweets [int] The maximum number of tweets you want * to return. Must be a number between 1 and 20. Default value is 20. * @param object.enableLinks [boolean] Set false if you don't want * urls and hashtags to be hyperlinked. * @param object.showUser [boolean] Set false if you don't want user * photo / name for tweet to show. * @param object.showTime [boolean] Set false if you don't want time of tweet * to show. * @param object.dateFunction [function] A function you can specify * to format date/time of tweet however you like. This function takes * a JavaScript date as a parameter and returns a String representation * of that date. * @param object.showRetweet [boolean] Set false if you don't want retweets * to show. * @param object.customCallback [function] A function you can specify * to call when data are ready. It also passes data to this function * to manipulate them yourself before outputting. If you specify * this parameter you must output data yourself! * @param object.showInteraction [boolean] Set false if you don't want links * for reply, retweet and favourite to show. * @param object.showImages [boolean] Set true if you want images from tweet * to show. * @param object.lang [string] The abbreviation of the language you want to use * for Twitter phrases like "posted on" or "time ago". Default value * is "en" (English). */var configProfile = profile: screenName: "toongif" , domId: "example1", maxTweets: 5, enableLinks: true, showUser: true, showTime: true, showImages: true, lang: "en", showInteraction: true;twitterFetcher.fetch(configProfile);/* * Example style!* You can do whatever the hell you want on your site :-)*/h2 clear:both;p, a margin:10px 0 0 0; color: #FFF; text-decoration:none; font-family: 'Roboto', sans-serif;a, a:visited color: #63b7e5; text-decoration:none;a:hover color:#82afff;ul position: relative; display: inline-flex;ul li list-style:none; overflow:hidden; margin:0px 20px; max-width:300px; width: 300px; display:inline-block; text-align: left; vertical-align:top; background-color: #417abd; display: flex; flex-direction: column;ul li:hover /*background-color:#f0f3fb;*/.user, .tweet, .timePosted float:left;.user width:100%; color: #FFF; padding:10px; background-color:#396aa5;.user a color:#FFF;.tweet padding:20px; line-height: 1.65em; font-size:1em; flex: 1;.timePosted padding: 0px 20px; font-size: 1em; text-transform: uppercase; text-decoration: none; /* flex: 41;*/ margin: 0 auto;.user a width: 100px;.user span span display:block; float: left; width: 180px.user img, .user a > span float:left;.user div /*clear: left; */ margin: 5px 10px 0px 10px; float: left; font-size: 1em; width:180px.interact float:left; width:100%; margin: 20px 0px; text-align:center;.interact a margin: 0px 30px; display: inline-block; .user a > span margin-left:10px;.media img width:100%; max-width:100%; vertical-align: bottom; max-height:200px;#linkage position:fixed; top:0px; right:0px; background-color:#3d3d3d; color:#ffffff; text-decoration:none; padding:5px; width:10%; font-family:arial;.twitter_reply_icon:before content:"\f075"; display:block; font-family: FontAwesome;.twitter_retweet_icon:before content:"\f079"; display:block; font-family: FontAwesome;.twitter_fav_icon:before content:"\f004"; display:block; font-family: FontAwesome;
Twitter will now let you add pictures, GIFs, and videos to RTs
2ff7e9595c
Comments