Twitter Friends or Followers Updates

Twitter Friends or Followers Updates

Mod Version: 1.00, by Gemma

vB Version: 4.x.x	Rating: (1 vote - 5.00 average)	Installs: 10
Released: 30 Jun 2011	Last Update: Never	Downloads: 43
Not Supported Template Edits Additional Files Re-usable Code External Content

This is a follow-on from this - Twitter Updates in Members Profile mod and one from my old community.

I've restricted it for use on ForumHome but you can have it display anywhere or site-wide if you wish

Tested on vB 4.1.x upwards.

What is it?
This will display pictures of your Twitter followers or friends (whom you follow) and their latest tweets in a box below your navbar. (it could quite easily be made into a widget by editing the css file while a few alterations)

How To
1. You need a twitter account profile field (you can skip this step if you already have one) if not:

Add a Single-Line Text Box via the User Profile Field Manager and give it a title and a description so users know what it is for.
Set the Maximum length and Field length to your liking
Field Required: NO
Field Editable by User: YES
Private Field: NO
Field Searchable on Members List: NO
Show on Members List: NO
Regular Expression: Leave Blank

Take note of the profile field number.

2. Download the twitterfields.zip file and extract the contents. Keeping the same file structure upload the css and js folders to your server.

3. In your footer template add the following lines at the end.

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.twitter-friends-1.0.min.js"></script>
<link rel="stylesheet" href="css/twitterfriends.css"/>

4. In your navbar template add the following lines at the end.

Code:

<vb:if condition="THIS_SCRIPT == 'index'">
<vb:if condition="$bbuserinfo[fieldXX]">
<!-- what's going on box -->
    <div id="wgo" class="collapse wgo_block block">
        <h2 class="blockhead">My Twitter Friends Updates</h2>
        <div class="blockbody formcontrols floatcontainer">
<div class="blockbody subsection userprof_content userprof_content_border" style="width:100%">
<div class="twitter-friends" options="{
   username:'{vb:raw bbuserinfo.fieldXX}',
   friends:1,
   tweet:1,
   header:'<a href=\'_tp_\' title=\'follow me\'><img src=\'_ti_\'/></a><h2>_fr_ Friends / _fo_ Followers</h2>',
   loop:1,
   users:50,
   user_animate:'width'
   }"></div></div></div></div></vb:if></vb:if>

Changing the XX to the profile field number from step 1.

Settings that can be changed

friends:1, ---> change to 0 to show followers
tweet:1, ---> Set this to 1 to display friends' tweets at widget footer. Tweets will also appear as a tool tip when hovering on a friend picture.
loop:1, ---> loop friends pictures animation or not. Set it to 1 to loop or 0 to disable.
users:50, ---> Number of visible friends' pictures on each swap. Note that Twitter will return your latest 100 Followers/Friends. you can choose to show a smaller number of pictures at a time.
user_animate:'width', ---> Customize picture entry animation type. available values are 'width', 'height', 'opacity'

Settings that can be added

tweet_source:1, ---> Show tweet source or not (ex: web, twhirl). set it to 0 to hide.
tweet_image:48, ---> by default tweet avatar image is 48x48. You may scale it down by setting it to something like 32
tweet_stay:5000, ---> Time in milliseconds for a tweet to be shown.

Edit this line <vb:if condition="THIS_SCRIPT == 'index'"> replacing the "index" to display elsewhere or delete that line plus the last </vb:if> to display everywhere.

I've added an example of using a popular tweet account so you can see how it looks.

If anyone wants to further develop any of my addons, you are free to do so.

Download

twitterfriends.zip (591.5 KB, 52 downloads)

Screenshots

Profile Enhancements Twitter Updates in Members Profile	vBulletin 4.x Template Modifications
Profile Enhancements Twitter Updates in Members Profile	vBulletin 3.6 Template Modifications

vBulletin LTS