Twitter and jQuery tweet rendering

I am using jquery ajax to extract from twitter api, I am sure there is an easy way, but I can not find it on how to get a β€œtweet” to display any links that were on twitter to display as a link. Right now this is just text.

$.ajax({ type : 'GET', dataType : 'jsonp', url : 'http://search.twitter.com/search.json?q=nettuts&rpp=2', success : function(tweets) { var twitter = $.map(tweets.results, function(obj, index) { return { username : obj.from_user, tweet : obj.text, imgSource : obj.profile_image_url, geo : obj.geo }; }); 

UPDATE: The following function (plugin) works fine.

 (function($) { $.socialFader = function(options) { var settings = { tweetHolder : null, tweetCount : 100, fadeSpeed : 500, tweetName: 'jquery' }; if (options) { $.extend(settings, options); }; var URL = "http://search.twitter.com/search.json?q="+settings.tweetName+"&rpp=" + settings.tweetCount + "&callback=?"; function relative_time(time_value) { var values = time_value.split(" "); time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3]; var parsed_date = Date.parse(time_value); var relative_to = (arguments.length > 1) ? arguments[1] : new Date(); var delta = parseInt((relative_to.getTime() - parsed_date) / 1000); delta = delta + (relative_to.getTimezoneOffset() * 60); var r = ''; if (delta < 60) { r = 'a minute ago'; } else if(delta < 120) { r = 'couple of minutes ago'; } else if(delta < (45*60)) { r = (parseInt(delta / 60)).toString() + ' minutes ago'; } else if(delta < (90*60)) { r = 'an hour ago'; } else if(delta < (24*60*60)) { r = '' + (parseInt(delta / 3600)).toString() + ' hours ago'; } else if(delta < (48*60*60)) { r = '1 day ago'; } else { r = (parseInt(delta / 86400)).toString() + ' days ago'; } return r; }; String.prototype.hashify = function() { return this.replace(/#([A-Za-z0-9\/\.]*)/g, function(m) { return '<a target="_new" href="http://twitter.com/search?q=' + m.replace('#','') + '">' + m + "</a>"; }); }; String.prototype.linkify = function(){ return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) { return m.link(m); }); }; String.prototype.atify = function() { return this.replace(/@[\w]+/g, function(m) { return '<a href="http://www.twitter.com/' + m.replace('@','') + '">' + m + "</a>"; }); }; $.getJSON(URL, function(JSON) { $.each(JSON.results, function(i, tweet) { var profilePicture = tweet.profile_image_url; var userLink = tweet.from_user; var text = tweet.text; text = text.linkify().atify().hashify(); var createdAt = new Date(tweet.created_at); var myTweet = '<a href="http://www.twitter.com/' + userLink + '" title="' + userLink + '">' + userLink + '</a> '; myTweet += text; $(settings.tweetHolder).append('<li class="cycles">' + myTweet + '</li>'); }); var elements = $(settings.tweetHolder).children(); var timeOutStart = 5000; function fader(elementId) { setTimeout(function() { $(elements[elementId]).fadeOut(settings.fadeSpeed, function() { $(elements[elementId + 1]).fadeIn(settings.fadeSpeed); }); }, timeOutStart * (elementId)); }; for (var j = 0; j < elements.length; j++) { fader(j); }; }); }; })(jQuery); 

In my readiness statement:

 $.socialFader({ tweetHolder:"#twitter", tweetName:"nettuts", tweetCount:2 }); 
+6
source share
4 answers

Here is the plugin I wrote that really simplifies tweet / json aggregation, then parses. He blurs the tweets. Just grab the code you need. Enjoy it.

(function ($) {

  $.socialFader = function(options) { var settings = { tweetHolder : null, tweetCount : 99, fadeSpeed : 500, }; if (options) { $.extend(settings, options); }; var URL = "http://search.twitter.com/search.json?q=jquery&rpp=" + settings.tweetCount + "&callback=?"; function relative_time(time_value) { var values = time_value.split(" "); time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3]; var parsed_date = Date.parse(time_value); var relative_to = (arguments.length > 1) ? arguments[1] : new Date(); var delta = parseInt((relative_to.getTime() - parsed_date) / 1000); delta = delta + (relative_to.getTimezoneOffset() * 60); var r = ''; if (delta < 60) { r = 'a minute ago'; } else if(delta < 120) { r = 'couple of minutes ago'; } else if(delta < (45*60)) { r = (parseInt(delta / 60)).toString() + ' minutes ago'; } else if(delta < (90*60)) { r = 'an hour ago'; } else if(delta < (24*60*60)) { r = '' + (parseInt(delta / 3600)).toString() + ' hours ago'; } else if(delta < (48*60*60)) { r = '1 day ago'; } else { r = (parseInt(delta / 86400)).toString() + ' days ago'; } return r; }; String.prototype.hashify = function() { return this.replace(/#([A-Za-z0-9\/\.]*)/g, function(m) { return '<a target="_new" href="http://twitter.com/search?q=' + m.replace('#','') + '">' + m + "</a>"; }); }; String.prototype.linkify = function(){ return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) { return m.link(m); }); }; String.prototype.atify = function() { return this.replace(/@[\w]+/g, function(m) { return '<a href="http://www.twitter.com/' + m.replace('@','') + '">' + m + "</a>"; }); }; $.getJSON(URL, function(JSON) { $.each(JSON.results, function(i, tweet) { var profilePicture = tweet.profile_image_url; var userLink = tweet.from_user; var text = tweet.text; text = text.linkify().atify().hashify(); var createdAt = new Date(tweet.created_at); var myTweet = '<a href="http://www.twitter.com/' + userLink + '" title="' + userLink + '">' + userLink + '</a> '; myTweet += text; $(settings.tweetHolder).append('<li class="cycles">' + myTweet + '</li>'); }); var elements = $(settings.tweetHolder).children(); var timeOutStart = 5000; function fader(elementId) { setTimeout(function() { $(elements[elementId]).fadeOut(settings.fadeSpeed, function() { $(elements[elementId + 1]).fadeIn(settings.fadeSpeed); }); }, timeOutStart * (elementId)); }; for (var j = 0; j < elements.length; j++) { fader(j); }; }); }; })(jQuery); 
+2
source

You need to parse the contents of the tweet, find the URLs, and then put them together.

0
source

Unfortunately, at the moment, the search API does not have the ability to escape from tweet objects (i.e. links, mentions, hashtags), like some of the methods of the REST API. This way, you can either parse the entities yourself (I use regular expressions) or redirect back to the break API to get the entities.

If you decide to call back to the REST API and after you have extracted the status identifier from the API search results, you should make a statuses / show call as follows:

http://api.twitter.com/1/statuses/show/60183527282577408.json?include_entities=true

In the resulting JSON, notice the entity object.

 "entities":{"urls":[{"expanded_url":null,"indices":[68,88],"url":"http:\/\/bit.ly\/gWZmaJ"}],"user_mentions":[],"hashtags":[{"text":"wordpress","indices":[89,99]}]} 

You can use the above to find specific objects in a tweet (which occur between the line positions indicated by the index property) and convert them accordingly.


If you prefer to parse objects yourself, here are the regular expressions (.NET Framework) that I use:

Link Matching Template

 (?:<\w+.*?>|[^=!:'"/]|^)((?:https?://|www\.)[-\w]+(?:\.[-\w]+)*(?::\d+)?(?:/(?:(?:[~\w\+%-]|(?:[,.;@:][^\s$]))+)?)*(?:\?[\w\+%&=.;:-]+)?(?:\#[\w\-\.]*)?)(?:\p{P}|\s|<|$) 

Mention match pattern

 \ B@ ([\w\d_]+) 

Hashtag Compliance Template

 (?:(?:^#|[\s\(\[]#(?!\d\s))(\w+(?:[_\-\.\+\/]\w+)*)+) 

Twitter also provides an open source library that helps you grab Twitter-related objects such as links, mentions, and hashtags. This java file contains code that defines the regular expressions that Twitter uses, and this yml file contains the test strings and the expected results of many unit tests that use regular expressions in the Twitter library.

How you handle the tweet is up to you, however I process the copy of the original tweet and first take out all the links, replacing them in the copy with spaces (so as not to change the length of the string.) I capture the start and end locations of the match in the string along with the agreed content. Then I click the mentions, then the hashtags - again replacing them in the tweet copies with spaces.

This approach ensures that I do not find false positives for mentions and hashtags in any links in the tweet.

0
source

I slightly modified the previous one. Nothing remains after all the tweets disappear one by one.

Now it checks to see if there are visible tweets, and then updates the tweets.

 (function($) { $.socialFader = function(options) { var settings = { tweetHolder : null, tweetCount : 99, fadeSpeed : 500, }; if (options) { $.extend(settings, options); }; var URL = "http://search.twitter.com/search.json?q=istanbul&rpp=" + settings.tweetCount + "&callback=?"; function relative_time(time_value) { var values = time_value.split(" "); time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3]; var parsed_date = Date.parse(time_value); var relative_to = (arguments.length > 1) ? arguments[1] : new Date(); var delta = parseInt((relative_to.getTime() - parsed_date) / 1000); delta = delta + (relative_to.getTimezoneOffset() * 60); var r = ''; if (delta < 60) { r = 'a minute ago'; } else if(delta < 120) { r = 'couple of minutes ago'; } else if(delta < (45*60)) { r = (parseInt(delta / 60)).toString() + ' minutes ago'; } else if(delta < (90*60)) { r = 'an hour ago'; } else if(delta < (24*60*60)) { r = '' + (parseInt(delta / 3600)).toString() + ' hours ago'; } else if(delta < (48*60*60)) { r = '1 day ago'; } else { r = (parseInt(delta / 86400)).toString() + ' days ago'; } return r; }; String.prototype.hashify = function() { return this.replace(/#([A-Za-z0-9\/\.]*)/g, function(m) { return '<a target="_new" href="http://twitter.com/search?q=' + m.replace('#','') + '">' + m + "</a>"; }); }; String.prototype.linkify = function(){ return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) { return m.link(m); }); }; String.prototype.atify = function() { return this.replace(/@[\w]+/g, function(m) { return '<a href="http://www.twitter.com/' + m.replace('@','') + '">' + m + "</a>"; }); }; $.getJSON(URL, function(JSON) { $(settings.tweetHolder).find('li.cycles').remove(); $.each(JSON.results, function(i, tweet) { var profilePicture = tweet.profile_image_url; var userLink = tweet.from_user; var text = tweet.text; text = text.linkify().atify().hashify(); var createdAt = new Date(tweet.created_at); var myTweet = '<a href="http://www.twitter.com/' + userLink + '" title="' + userLink + '">' + userLink + '</a> '; myTweet += text; $(settings.tweetHolder).append('<li class="cycles">' + myTweet + '</li>'); }); var elements = $(settings.tweetHolder).children(); var timeOutStart = 5000; function fader(elementId) { setTimeout(function() { $(elements[elementId]).fadeOut(settings.fadeSpeed, function() { $(elements[elementId + 1]).fadeIn(settings.fadeSpeed); }); if (jQuery('#twitter ul li.cycles:visible').length==1) { jQuery.socialFader({ tweetHolder:"#twitter ul", tweetCount:5 }); } }, timeOutStart * (elementId)); }; for (var j = 0; j < elements.length; j++) { fader(j); }; }); }; })(jQuery); jQuery(document).ready(function(){ jQuery.socialFader({ tweetHolder:"#twitter ul", tweetCount:5 }); }); 
0
source

Source: https://habr.com/ru/post/886178/


All Articles