August 09, 2022, 05:59:30 am
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Welcome to Revolution X, where Coding meets Graphics.
 
  Home Help Search Arcade Affiliates Staff List Calendar Members Login Register  

Twitter Widget in Profile

Pages: [1]   Go Down
  Print  
Author Topic: Twitter Widget in Profile  (Read 1083 times)
Celebrus
Artificially Conscious
Administrator
Adminitrator
Offline Offline

Gender: Male
Posts: 626



View Profile WWW
Badges: (View All)
« 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: twitter
Only 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. Smiley 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 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?
Report Spam   Logged

Share on Facebook Share on Twitter

Lyle
MeTube
Member
Member
Offline Offline

Gender: Male
Posts: 69



View Profile
Badges: (View All)
« Reply #1 on: June 07, 2009, 04:04:53 pm »

this seems like it would use too much bandwidth...and slow down the network
Report Spam   Logged
Pages: [1]   Go Up
  Print  
 
Jump to:  

Powered by EzPortal
Bookmark this site! | Upgrade This Forum
SMF For Free - Create your own Forum

Powered by SMF | SMF © 2016, Simple Machines
Privacy Policy