Advertise Here

Author Topic: [code] Twitter Widget in Profile  (Read 4341 times)

0 Members and 1 Guest are viewing this topic.

Offline Celebrus

  • SMF For Free Hero
  • *
  • Posts: 941
    • View Profile
    • Vikhyat Korrapati

  • Total Badges: 16
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
[code] Twitter Widget in Profile
« on: March 19, 2009, 05:54:44 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: [Select]
<div id="twitterstream"><a href="http://twitter.com/Text to display after field:
Code: [Select]
" 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: [Select]
<script type="text/javascript" src="/jquery.js"></script>

Then add this to your footers.

Code: [Select]
<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: [Select]
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?

 

Related Topics

  Subject / Started by Replies Last post
0 Replies
1813 Views
Last post January 24, 2010, 02:16:00 pm
by simply sibyl
13 Replies
4988 Views
Last post July 02, 2010, 08:03:40 pm
by GameAgent101
4 Replies
1597 Views
Last post December 27, 2010, 02:53:47 am
by Songbird
3 Replies
1606 Views
Last post January 20, 2011, 09:28:50 am
by Mago
3 Replies
3727 Views
Last post September 07, 2015, 06:39:07 am
by VooDoo