|
Title: Twitter Widget in Profile Post by: Celebrus on March 19, 2009, 05:54:22 am First off, this is a preview:
http://9861.smfforfree.com/index.php?action=profile;u=1 First off, create a new profile field. These are the settings I have for it. Name: Twitter Show in profile: Yes Show in posts: No Parse BBC: No Text to display before field: Code: <div id="twitterstream"><a href="http://twitter.com/ Text to display after field: Code: " target="_blank">Twitter</a></div> Field ID: twitterOnly allow admins to edit field: No Only allow admins to view field: No You can put in anything you want for anything I didn't mention. Make sure it's type is 'Text'. Once you are done with that, ensure you have the jQuery code in your headers. It looks like this: Code: <script type="text/javascript" src="/jquery.js"></script> Then add this to your footers. Code: <script type="text/javascript"> function twitterAdd(o){var u='http://twitter.com/'+username+'/status/'+o.id;$("div#twitterstream div.tborder div.windowbg2 ul").append("<li style='padding-top:5px'><a href='"+u+"' target='_blank'>"+o.text+"</a></li>")}function twitterCallback(j){username=$("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td a:contains('Twitter')").attr('href').match('http://twitter.com/(\.+)')[1];$("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td b:contains('Twitter')").html("Latest Twitter Updates:");$("#twitterstream").html("<div class='tborder' style='opacity:0.55'><div class='windowbg2' style='font-size:0.8em'><ul style='margin:0px;padding-left:5px;padding-bottom:5px;list-style:none'></ul></div></div>");for(i in j){twitterAdd(j[i])}}(function(n){if(window.location.href.indexOf("action=profile")!=-1){username=$("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td a:contains('Twitter')").attr('href').match('http://twitter.com/(\.+)')[1];var a=document.createElement('script');a.setAttribute('src','http://twitter.com/statuses/user_timeline/'+username+'.json?callback=twitterCallback&count='+n);document.body.appendChild(a)}})(5); </script> You shouldn't need to edit anything except the 5 at the very end, that is the number of tweets that will be displayed. And there, the code should work. :) Edit your profile, adding in your twitter username in the field you created to test it. If you want the uncompressed source, it's below this. You shouldn't need it, but I decided to include it in case anyone wanted to know how it works. Code: function twitterAdd(o){ var u = 'http://twitter.com/' + username + '/status/' + o.id; $("div#twitterstream div.tborder div.windowbg2 ul").append("<li style='padding-top:5px'><a href='"+u+"' target='_blank'>" + o.text + "</a></li>"); } function twitterCallback(j){ username = $("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td a:contains('Twitter')").attr('href').match('http://twitter.com/(\.+)')[1]; $("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td b:contains('Twitter')").html("Latest Twitter Updates:"); $("#twitterstream").html("<div class='tborder' style='opacity:0.55'><div class='windowbg2' style='font-size:0.8em'><ul style='margin:0px;padding-left:5px;padding-bottom:5px;list-style:none'></ul></div></div>"); for(i in j){ twitterAdd(j[i]); } } (function(n){if(window.location.href.indexOf("action=profile") != -1){ // This is the profile page. username = $("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td a:contains('Twitter')").attr('href').match('http://twitter.com/(\.+)')[1]; var json = document.createElement('script'); json.setAttribute('src', 'http://twitter.com/statuses/user_timeline/' + username + '.json?callback=twitterCallback&count=' + n); document.body.appendChild(json); }})(5); // Number of tweets to show Note on browser compatibility: While I haven't been able to test this code on any browser like IE or Safari that doesn't have a linux version, the screenshots from browsershots.org (http://browsershots.org/http://9861.smfforfree.com/index.php?action=profile;u=1) indicates that it works correctly... sorta. On browsers where it isn't working like IE5.5, it's degrading gracefully, ie it just shows a link to the user's twitter profile. Also, I think I should move the tweets down and make it look like the 'Additional Information' and 'Recently Uploaded Images'. What do you think? Title: Re: Twitter Widget in Profile Post by: Lyle on June 07, 2009, 04:04:53 pm this seems like it would use too much bandwidth...and slow down the network |