Forum Home Enhancements - Twitter Friends or Followers Updates

This is a follow-on from this - https://vborg.vbsupport.ru/showthread.php?t=265541 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.

<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.

<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.

[BCP Hung]

Good job men !
It will be known as a plugin for mine !

[Gemma]

Alternatively, if you have a twitter account associated with your site you could show friends/followers updates from that to everyone and remove the need for the profile fields.

<vb:if condition="THIS_SCRIPT == 'index'">
<!-- 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:'twitteraccount',
   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>

Replacing twitteraccount with the account name ie www.twitter.com/twitteraccount

[webgroup]

Nice! Can I show updates from more than 1 twitter account at the same time?

[Gemma]

Originally Posted by webgroup

Nice! Can I show updates from more than 1 twitter account at the same time?

I'm not sure. You would need to make separate profile fields for each account and you would need to add the template code a second time. I'm don't know if it would work though or if the script would cause a conflict.

[webgroup]

Installed, not working. No images or updates are showing.

[Hanany95]

Looks good man! Just one question. Do the users see my follower's tweets or can they import their own account?

[Cybertims]

Originally Posted by webgroup

Installed, not working. No images or updates are showing.

Same here

[Gemma]

Originally Posted by webgroup

Installed, not working. No images or updates are showing.

Originally Posted by Cybertims

Same here

In your footer template, find

<script type="text/javascript" src="js/jquery.twitter-friends-1.0.min.js?T=1"></script>
<link rel="stylesheet" href="css/twitterfriends.css"/>

Replace with:

<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"/>

Originally Posted by Hanany95

Looks good man! Just one question. Do the users see my follower's tweets or can they import their own account?

If you create the profilefield and your users add their twitter account name then it will show their followers, if they don't fill it in then nothing will show. If you want to display your website's twitter account to everyone use the code in post #3

[webgroup]

Sorry, I did not realized that this is an add-on for another plugin.
I installed the other plugin and now its working.

Why it always shows the same 50 friends?