Profile Enhancements - Twitter Updates in Members Profile

What this does
This creates a simple Twitter output of your member's tweets in the About Me section of their profile.

Twitter Updates in Member Profile

For this to work properly you need to create an application on Twitter.

1. Go to https://dev.twitter.com/apps/new
2. Fill out the app details, how to fill it out:
Application Name - Your Website Name
Description - Something relevant to your site
Application Website - Your Forum URL
Callback URL - Your Forum URL
Application Type - Read and Write

Agree to the rules, recaptcha and create your application. You will then be taken to your application details. Take note of your consumer key (21 alphanumerical characters)

3. Unzip the archive and upload the 'twitter' folder to your forum root.

4. You need to add a new profile field (you can skip this if you already having a profile field linking to users' Twitter accounts)

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 a note of the profile field number.

5. Open your additional.css template and add this at the bottom:

.tweets {
    border:1px solid #e7e7e7;
    border-radius:2px;
    max-width:100%;
    font:13px/17px "Tahoma",Helvetica,Arial,sans-serif;
    color:#333;
    background-color:#cccccc;
}

.tweets a {
    color:#98d7fb;
    text-decoration:none;
}

.tweets a:hover {
        color:#03680f;
    text-decoration:underline;
}

.tweets .tweet {
    border-bottom:1px solid #e7e7e7;
    padding:12px 12px;
}

.tweets .tweets_header {
    border-bottom:1px solid #e7e7e7;
    padding:12px 12px;
    font-weight:bold;
    font-size:14px;
}

.tweets .tweets_header a {
    color:#2dd851;
    text-decoration:none;
    font-weight:bold;
    font-style:normal;
    text-transform:lowercase;
}

.tweets .tweets_header a:hover {
    text-decoration:none;
}

.tweets_footer {
    padding:6px 12px;
    text-align: left;
}

.tweets_footer span.powered {
    font-size:9px;
}

.tweets_footer span.powered p {
    margin:0;
    text-align: center;
    font-size:9px;
    color:#999;
}

.tweets_footer span.powered a {
    font-size:9px;
    color:#999;
    text-decoration:none;
}

.tweets_footer span.powered a:hover {
    text-decoration:underline;
}

.tweets_footer #bird, .mt_footer .image_r {
    background:url("http://twimg0-a.akamaihd.net/a/1331143368/t1/img/twitter_web_sprite_icons.png") no-repeat;
}


.tweets_footer #bird{
    display:inline-block;
    margin:10px auto;
    background-position: 0 0;
    width: 34px;
    height: 26px;
}

.tweets .tweet .time {
    float:right;
    color:#999;
    font-size:11px;
}

.tweets .tweet .avatar {
    float:left;
    margin-right:12px;
    border-radius:3px;
}

.tweets .tweet .avatar img {
    border-radius:3px;
}

.mt_header {
    padding-bottom:2px;
    padding-left:60px;
}

.mt_screen_name {
    font-size:12px;
    color:#999;
}

.mt_header a {
    font-weight:bold;
    color:#5b78f7;
    text-decoration:none;
}

.mt_text {
    padding-left:60px;
}

.mt_footer {
    color:#999;
    font-size:12px;
    padding-left:60px;
}

.mt_footer .image_r {
    display:inline-block;
    margin-bottom:-2px;
    margin-right:4px;
    background-position: -20px -290px;
    width: 14px;
    height:13px;
    background-color:#999;
}

.mt_footer a{
    color:#999;
}

This will give you a grey box for your tweets - if you want something different you will need to adjust the css yourself - don't ask me for help with this.

6. Open memberinfo_block_statistics and find:

<!-- view-statistics -->

Below that add:

<img src="clear.gif" height="10" /><br />
<vb:if condition="$userinfo[fieldXX]">
<div class="blocksubhead subsectionhead userprof_headers userprof_headers_border" >
<h4 id="view-statistics" class="subsectionhead-understate"  style="width:100%">Twitter</h4><br />
</div>
<div class="blockbody subsection userprof_content userprof_content_border">
<div id="twitter_div"> 
<ul id="twitter_update_list"></ul></div>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="twitter/js/jquery.minitwitter.js" type="text/javascript"></script>
<script src="http://platform.twitter.com/anywhere.js?id=consumer_key&amp;v=1&amp;v=1">
  </script>
  <script type="text/javascript">
     twttr.anywhere(function(twitter) {
     twitter.hovercards({ expanded: true });
});
  twttr.anywhere(function (twitter) {
  twitter("#tbox").tweetBox({
  count: true,
  height: 100,
  width: 400,
  label: "Send a tweet",
      });
  });
        </script>
<link rel="stylesheet" type="text/css" href="twitter/css/twitter.css"/>
<div class="tweets"> <div class="tweets_header">Recent Updates</div> <div class="content_tweets"> </div> <div class="tweets_footer"> <a href="http://www.twitter.com/{vb:raw userinfo.fieldXX}"><span id="bird"></span></a> </div> </div>
<script type='text/javascript'>
$('.content_tweets').miniTwitter({username: '{vb:raw userinfo.fieldXX}', limit: 5});
</script>
<img src="clear.gif" height="10" /><br /> 
<link type="text/css" href="twitter/css/twitter_light.css" rel="stylesheet" />
<script type="text/javascript" src="twitter/js/jquery.twitter-friends-2.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#twitter-friends').twitterFriends({
    username:'{vb:raw userinfo.fieldXX}'
    ,friends:1 
    ,users_max:50
    ,loop:1
    ,user_link:1
    ,user_name:0
    ,tweet:1
});
});
</script>
<div id="twitter-friends"></div>
<img src="clear.gif" height="10" /><br />
<div id="tbox"></div>
<img src="clear.gif" height="10" /><br />
</vb:if></div>

Replace consumer_key with the key you noted from step 2. Save

Change all instances of XX to correspond with the profile field number from Step 4.

You can also change the css file by between light and dark by changing

<link type="text/css" href="twitter/css/twitter_light.css" rel="stylesheet" />

to:

<link type="text/css" href="twitter/css/twitter_dark.css" rel="stylesheet" />

*The light css uses the standard 'twitter blue' colour scheme and the dark one is shades of black, if you want other colours you will need to amend the css file yourself (probably best making changes to the twitter_light.css file)

Some other options, you can amend this part of the code

 ,friends:1
    ,users_max:50
    ,loop:1
    ,user_link:0
    ,user_name:0
    ,tweet:1

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 80 Followers/Friends. You can choose to show a smaller number of pictures at a time.
user_name:0 ---> Show tweet author name or not. change to 1 to show
user_link:0 ---> By default, friends pictures will link to their Twitter profile. however, your can link it to their homepage (change to 1)

Save.

To update to v 1.0.6

If you wish to upgrade please upload the twitter folder to your server, remove the old template edits (headinclude and memberinfo_block_statistics) and apply the new edits in the opening post.

History

1.0.3 - Merged the two versions together - but left the option to use either the basic or enhanced (css version). Created a blogger.js file which is hosted on your server instead of externally, this should solve the problems of Tweets not showing.
1.0.4 - Added twitter hovercards
1.0.5 - Added a new block feature which shows the latest activity of your friends or followers.
1.0.6 - New code to display tweets in profile due to changes in Twitter's API.

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

[Gemma]

Works for me using FF5.

What version of FF are you using and what doesn't seem to be working?

[CharlieDelta]

Originally Posted by Gemma

Works for me using FF5.

What version of FF are you using and what doesn't seem to be working?

Yup using 5 as well. I just checked and it is now working. I refresh the page and it is gone.

[Gemma]

Do you mind PMing me a link to your site so I can have a look?

[CharlieDelta]

Originally Posted by Gemma

Do you mind PMing me a link to your site so I can have a look?

Done. :up:

[Gemma]

Anyone running this on vB 4.1.4 and having problems with the tweetbox not showing might want to try this solution.

AdminCP > Plugins & Products > Add New Plugin

Product: vBulletin
Hook Location: member_build_blocks_start
Title: Load About Me Tab By Default
Execution Order: 5
Plugin PHP Code:

if (!$vbulletin->GPC_exists['tab'])
{
    $vbulletin->GPC['tab'] = 'aboutme';
}

[x YNWA x]

Originally Posted by Gemma

Yes this one is per user.



Are the jscript and css files in the correct location? It should really work on any vB 4.x.x - is anything showing up in the profile?

Just followed instructions, location?

[x YNWA x]

Trying this again but still not working. I even changed permissions of the folder to 777 because I thought it was something to do with that.

I am using the css version not basic one. Followed steps 1-6

[8thos]

Originally Posted by Gemma

And if you want to add a tweetbox to your feed:

Open your headinclude template
Find:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="twitter/jquery.twitter.js"></script>
 <script src="http://platform.twitter.com/anywhere.js?id=consumer_key&amp;v=1">
  </script>
  <script type="text/javascript">
     twttr.anywhere(function(twitter) {
             twitter.hovercards({ expanded: true });
     });
  </script>
<link rel="stylesheet" type="text/css" href="twitter/twitter.css"/>

Replace it with:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="twitter/jquery.twitter.js"></script>
<script src="http://platform.twitter.com/anywhere.js?id=consumer_key&amp;v=1">
  </script>
   <script type="text/javascript">
     twttr.anywhere(function(twitter) {
     twitter.hovercards({ expanded: true });
});
  twttr.anywhere(function (twitter) {
  twitter("#tbox").tweetBox({
  count: true,
  height: 100,
  width: 400,
  label: "Send a tweet",
      });
  });
        </script>
<link rel="stylesheet" type="text/css" href="twitter/twitter.css"/>

Remember to change the consumer_key. Save.

Open memberinfo_block_stats
Find:

<br><dt class="smallfont">You can follow me on Twitter, my username is <a class="twitter-anywhere-user" href="http://twitter.com/{vb:raw userinfo.fieldXX}">{vb:raw userinfo.fieldXX}</a></dt>

Below that add:

<img src="clear.gif" height="10" /><br />
<div id="tbox"></div>

Save.

Wow! Thank you!

[Gemma]

Originally Posted by cloferba

i would like to see a demo

Here's a picture.

It shows your last X tweets in your profile (About Me tab), when you hover over a twitter account link ie @username (see @youtube in image) it displays an info hovercard. Also there is a tweetbox so you can send a tweet directly from your website profile to your twitter account.

[webgroup]

No twitterr area is showing in the about me tab in my profile. v.4.1.5
I tried adding the above plugin and nothing.