When you select a tweet in twitter the right pane appears. If the tweet has a twitpic, yfrog, or instagram path, it will display the image. Twitter will do this for video and a few other networks as well. Is there a library available that has this all this functionality or how is this accomplished? I'm mostly interested in resolving images tweeted and am looking for a PHP or JS solution.
Twitter uses those services' APIs:
http://code.google.com/p/imageshackapi/
http://instagram.com/developer/
etc.
well u can do something like this without using these above libraries. When u get the page with your tweets parse the urls for any images("twitpic" or "yfrog") and then use ajax to silently download the images in the background and then when user selects the tweet u show the image. The hard part is parsing the url to figure out the images. i havent tried this but this should work
use jQuery
$(document).ready(function() {
$("#contentbox").keyup(function() {
var content = $(this).val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
// Filtering URL from the content using regular expressions
var url = content.match(urlRegex);
if (url.length > 0) {
$("#linkbox").slideDown('show');
$("#linkbox").html("<img src='link_loader.gif'>");
// Getting cross domain data
$.get("urlget.php?url=" + url, function(response) {
// Loading <title></title>data
var title = (/<title>(.*?)<\/title>/m).exec(response)[1];
// Loading first .png image src='' data
var logo = (/src='(.*?).png'/m).exec(response)[1];
$("#linkbox").html("<img src='" + logo + ".png' class='img'/><div><b>" + title + "</b><br/>" + url)
});
}
return false;
});
});
http://www.9lessons.info/2010/06/facebook-like-extracting-url-data-with.html