Twitter Updates in Members Profile

[Gemma]

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:1friends: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.

[BlueCheri]

Great Mod, waiting for very long.

Works fine.

Thanx

[RobbieZ]

What make were the yellow trainers? :D

[BCP Hung]

It awesome modification !
Under allow of author (Gemma (https://vborg.vbsupport.ru/member.php?u=53060)), new add-on will be make this modification become perfect !

Thanks to Gemma (https://vborg.vbsupport.ru/member.php?u=53060) ! Good job men !

P.S : You must see this :
In default code :
<br><dt class="smallfont">You can follow me on Twitter, my username is <u><a href="http://twitter.com/{vb:raw userinfo.fieldXX}">{vb:raw userinfo.fieldXX}</a></ul>
You have two other tag name : dt and ul !
Do you want to explain or fix it ?

[Gemma]

Oops fixed it. :)

[ProFifaLeagues]

Nice looking mod thanks will try later on 4.1.3

[glen290]

Installed, great little mod Gemma..

[CharlieDelta]

Installed on 4.1.3 and working great!

[Mr_Running]

Excellent.
My Tweets seem a little longer and it would be nice to have 1/2 or full line break between tweets. Would make it easier to read. :)

[Gemma]

Excellent.
My Tweets seem a little longer and it would be nice to have 1/2 or full line break between tweets. Would make it easier to read. :)

I've added an enhanced version which uses jquery/css and allows for greater customisation.

[ProFifaLeagues]

How often will it check for updates or will it happen auto everytime you update on twitter ?

Great mod thanks

[Gemma]

Updates are in real-time

[ProFifaLeagues]

Cheers Gemma

[Mr_Running]

Hi Gemma

Received error for additional CSS

The following error occurred when attempting to evaluate this template:
Unclosed Curly Brace Expression
This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.

[Gemma]

Hi Gemma

Received error for additional CSS

The following error occurred when attempting to evaluate this template:
Unclosed Curly Brace Expression
This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.

When adding to the additional.css? There isn't any conditional statements in the css :erm:

[Mr_Running]

When adding to the additional.css? There isn't any conditional statements in the css :erm:

Yes that's what I thought vB strikes again...strange!

Edit: Okay so when I wanted to change something in the additional.css I reverted the additional.css template and inputted my change. If I didn't the error in my previous post came up...again strange!

For those who do not have a wide screen or style.
I changed this:
div#twitter {
width: 900px;0.81em;

div#twitter {
width: 600px;0.81em;

[ProFifaLeagues]

Works Superb on 4.1.3 thanks Gemma :)

[Gemma]

Works Superb on 4.1.3

Thanks for confirming :)

[CharlieDelta]

Hi Gemma

Received error for additional CSS

The following error occurred when attempting to evaluate this template:
Unclosed Curly Brace Expression
This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.

Same here.

[Gemma]

Try this

#twitter {
width: 900px;0.81em;
border: 0px solid #888;
}
#twitter_update_list {
margin: 0;
padding: 0 0.5em 0.5em 0.5em;
list-style-type: none;
}
#twitter_update_list li {
margin: 0;
padding: 0.5em 0 0.5em 0;
border-bottom: 0.5px solid #ccc;
}
#twitter_update_list li a {
/* timestamp link */
color: #f00;
}
#twitter_update_list li span {
display: block;
}
#twitter_update_list li span a {
/* links in tweet */
color: #00f;
}
#twitter_update_list li.firstTweet {
}
#twitter_update_list li.lastTweet {
border-bottom: none;
}

[CharlieDelta]

Try this

#twitter {
width: 900px;0.81em;
border: 0px solid #888;
}
#twitter_update_list {
margin: 0;
padding: 0 0.5em 0.5em 0.5em;
list-style-type: none;
}
#twitter_update_list li {
margin: 0;
padding: 0.5em 0 0.5em 0;
border-bottom: 0.5px solid #ccc;
}
#twitter_update_list li a {
/* timestamp link */
color: #f00;
}
#twitter_update_list li span {
display: block;
}
#twitter_update_list li span a {
/* links in tweet */
color: #00f;
}
#twitter_update_list li.firstTweet {
}
#twitter_update_list li.lastTweet {
border-bottom: none;
}

Sorry I still get the same error. Strange.

[merk_aus]

I get the same error as well so unable to install until this is hopefully fixed - shame as my members would love this.

EDIT: Okay here is something strange for those who have been adding this with the error above (the curl ending error) - try pasting this code at the top of your additional.css rather than the end.

I know it's weird but I just put this at the top after posting I had the same error and it saved no issues.

[Gemma]

Yeah I was just going to say that. I'll make a stylesheet in the morning to save any bother

[CharlieDelta]

EDIT: Okay here is something strange for those who have been adding this with the error above (the curl ending error) - try pasting this code at the top of your additional.css rather than the end.

I know it's weird but I just put this at the top after posting I had the same error and it saved no issues.

Yup that did it! Thanks.

[CharlieDelta]

The enhanced version is just awesome!!:up:

[merk_aus]

Yeah I was just going to say that. I'll make a stylesheet in the morning to save any bother
Sorry didn't mean to steal your thunder, I just wanted this to work on my new site and continued to get that error and then it was by pure mistake I pasted it at the beginning and it worked and my members are loving it.


Yup that did it! Thanks.

Am glad I was able to help, I am not the best coder in the world but I thought it has to work somehow so was going to do some trial and error until I accidently pasted the code at the top of the additional.css page and it worked.

[Gemma]

I've added a stylesheet (twitter.css) and update the zip file and instructions :)

If you are updating, download the new zip file and upload the contents to your forumroot, delete the additional.css template edit.

Open your headinclude template and 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>

Below that add:
<link rel="stylesheet" href="twitter/twitter.css"/>

[CharlieDelta]

I've added a stylesheet (twitter.css) and update the zip file and instructions :)

If you are updating, download the new zip file and upload the contents to your forumroot, delete the additional.css template edit.

Open your headinclude template and 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>

Below that add:
<link rel="stylesheet" href="twitter/twitter.css"/>

Perfect! :up:

[x YNWA x]

followed the instructions and it isnt working for me on 4.1.3 i have a profile field number 7, and it is in there under field7 as per instructions and no feed is showing up.

[CharlieDelta]

followed the instructions and it isnt working for me on 4.1.3 i have a profile field number 7, and it is in there under field7 as per instructions and no feed is showing up.

Ensure that you have the proper field # in all four instances. I have 4.1.3 and is working perfect. Read the code carefully and change all fieldXX to field18. Missing one will cause it to not load the tweets. :D

[Gemma]

followed the instructions and it isnt working for me on 4.1.3 i have a profile field number 7, and it is in there under field7 as per instructions and no feed is showing up.

I've updated the files and instructions, if you'd like to try again.

I've merged the two versions together - but left the option to use either the basic or enhanced (css version).

The main change now is that I've included a blogger.js file which is hosted on your server instead of externally, this should solve the problems of Tweets not showing.

And if it doesn't work this time then I'm chucking it in the graveyard!

[8thos]

This is awesome! Installing now.

[8thos]

Works great! http://the8thlegion.com/members/7-DRE

[fluidswork]

Just awesome will check it out soon ................

[Mr_Running]

Same here.

Not that it's needed with the new version but I am finding this works when using the additional.css

Start
<vb:literal>

End with:
</vb:literal>


<vb:literal>
div#twitter {
width: 900px;0.81em;
border: 0px solid #888;
}
p#preloader {
margin: 0;
padding: 1em 1em 1em 3em;
background: transparent url("loader.gif") 1em center no-repeat;

}
ul#twitter_update_list {
margin: 0;
padding: 0 0.5em 0.5em 0.5em;
list-style-type: none;
}
ul#twitter_update_list li {
margin: 0;
padding: 0.5em 0 0.5em 0;
border-bottom: 0.5px solid #ccc;
}
ul#twitter_update_list li a {
/* timestamp link */
color: #f00;
}
ul#twitter_update_list li span {
display: block;
}
ul#twitter_update_list li span a {
/* links in tweet */
color: #00f;
}
ul#twitter_update_list li.firstTweet {
}
ul#twitter_update_list li.lastTweet {
border-bottom: none;
}
</vb:literal>

[CharlieDelta]

Thank you.

[Eq4bits]

Thanks! Installed and working perfectly on vB4.14. (I tried both regular & enhanced versions ;) no problems with either.

Now... if I could just find a mod that puts the latest tweet in the users info in the postbit I'd be a real happy camper ;)

[x YNWA x]

Ensure that you have the proper field # in all four instances. I have 4.1.3 and is working perfect. Read the code carefully and change all fieldXX to field18. Missing one will cause it to not load the tweets. :D

Did that too, but still not showing up. Maybe it is one of the other plugins interfering :(

[Gemma]

Is your Twitter account set to private or can tweets be publicly viewed?

[Gemma]

Thanks! Installed and working perfectly on vB4.14. (I tried both regular & enhanced versions ;) no problems with either.

Now... if I could just find a mod that puts the latest tweet in the users info in the postbit I'd be a real happy camper ;)

You may like this? Not for showing your latest tweets but for keeping updated on friends or followers - https://vborg.vbsupport.ru/showthread.php?t=266047

[x YNWA x]

Works great! http://the8thlegion.com/members/7-DRE

How did u get it working? Im on 4.1.3 and not working for me, about to upgrade to 4.1.4 though... Still having the issue I mentioned above Thanks

[x YNWA x]

Is your Twitter account set to private or can tweets be publicly viewed?


Nah mine isnt private, but other users could be? But isnt this supposed to be tweets per user?

[Gemma]

Nah mine isnt private, but other users could be? But isnt this supposed to be tweets per user?

Yes this one is per user.

How did u get it working? Im on 4.1.3 and not working for me, about to upgrade to 4.1.4 though... Still having the issue I mentioned above Thanks

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?

[Gemma]

Updated

1.0.4 - Added twitter hovercards

Instruction on how to update are include in the OP

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

[Gemma]

Made a small change to the headinclude template in the basic version, didn't realise the hovercards weren't expanded :o

[CharlieDelta]

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" href="twitter/twitter.css"/>

Replace it with:
<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>

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.
Gemma this is a brilliant mod and I am really liking the additions.

When I try to add this I lose my spacing because I am using the css version and the link is replaced. The colors and fonts are not a concern.
What would be a work around to get some spacing between tweets.
Thanks

[Gemma]

Ooops sorry :o

In headinclude, find:
<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 });
});
</script>
<link rel="stylesheet" href="twitter/twitter.css"/>

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

I've also made it use the latest jquery

[cloferba]

i would like to see a demo :(

[CharlieDelta]

This is really strange, the tweetbox is not showing up for me. I was sure it was there yesterday.:confused:

UPDATE:
Works in all browsers except FF?

[Gemma]

Works for me using FF5.

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

[CharlieDelta]

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]

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]

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]

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]

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.

[Gemma]

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.

Can you provide me with a link to your site?

[webgroup]

Oops, forgot to replace fieldxx for the actual one in one of the instances.

Working great!

But, the tweeter box is not working, when I try to send a tweet and authorize the connection, I get this:

Sorry, something went wrong.
The provided callback url http://www.mywebsite.net/forums/members/gregg/ is not authorized for the client registered to ''.


Thanks

[Gemma]

Looks like you haven't set up the application correctly in Twitter - https://dev.twitter.com/apps/new

[webgroup]

Thanks.
The callback URL setting was empty

[Gemma]

Anyone wanting a 'Twitter Follow' button instead of
You can follow me on Twitter, my username is blah...

Can apply the following

In your memberinfo_block_statistics template, find:

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

Replace it with
<a href="https://twitter.com/{vb:raw userinfo.fieldxx}" class="twitter-follow-button" data-show-count="true">Follow @{vb:raw userinfo.fieldxx}</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Remember change the fieldxx.

Clicking on the username will produce a mini-profile popup and it will also tell how many followers the user has.

[x YNWA x]

Ok So when i was setting this up and I said it was not working, I was looking in the wrong place! I thought they appeared in the user info where people post! Ill test this again later!

Any way I can set this up so it appears in the user info part instead of profile? (or some kind of popup)

Thanks

[x YNWA x]

Ok So I have done this but it turns my profile pages into a page with a transparent background instead of white.

Before:

http://cl.ly/1X0V11121r1a063A1Q00

After:

http://cl.ly/251Z2E1C0m3M000V2k0Z

A bit further down the twitter thing working:

http://cl.ly/1e1L0J3p1x3x0N3T2044

[Gemma]

Try removing one of the </div> tags towards the end of the code

</div></div>
</vb:if>

[rugby]

This is the great mod, i tried on my vb 4.1.6 site and it worked on FF7 browser.

[Kingdombuilder]

It works good for listing tweet updates for me on 4.1.2 - FF. I tried the Tweet box and it showed up for the first time and then disappeared when I tried to use it. I got an error talking about the call back url as well. After leaving the page and then coming back is when i notice that the tweet box was gone.

[Gemma]

I tried the Tweet box and it showed up for the first time and then disappeared when I tried to use it. Looks like the code has change a little, try this.

In your memberinfo_block_statistics template find:

</div></div>
</vb:if>Just above that add this (instead of using the code in post #45)
<div id="tbox"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#tbox").tweetBox({
height: 100,
width: 400,
label: 'Got tips, suggestions or questions?',
});
});
</script>

I got an error talking about the call back url as well.Callback url errors usually occur if you haven't set up the application correctly in Twitter - https://dev.twitter.com/apps/new

[Kingdombuilder]

Thank you so much for the prompt reply. I added the code that you suggested and I entered a tweet and it worked but when i navigated away from the page and came back the tweet box was gone again.

I tried taking away one of the "</div>" and I noticed that my background did not go all the way down, so that was a plus. Now just getting the text box to stay... Thank you for all the help you have been giving. This is a great mod.

[Gemma]

Hmmmm,

Try adding this plugin. Go to AdminCP > Plugins & Products > Add New Plugin

Hook Location: member_build_blocks_start
Name: Load About Me Tab By Default
Execution Order: 5
Code:
if (!$vbulletin->GPC_exists['tab'])
{
$vbulletin->GPC['tab'] = 'aboutme';
}Plugin Is Active: Yes

Save.

[Kingdombuilder]

Thank you so much for the help. It seems to be working great accept when I navigate to the profile page "about me" tab is open first.

I went and made the plugin not active and the profile page loads as normal but when I go to the "About Me" tab the tweet box is gone again. And of course when I make it active again the tweet box shows back up.

[sticky]

Pretty cool, would be nice to have this in a sig.

[Gemma]

Thank you so much for the help. It seems to be working great accept when I navigate to the profile page "about me" tab is open first.

I went and made the plugin not active and the profile page loads as normal but when I go to the "About Me" tab the tweet box is gone again. And of course when I make it active again the tweet box shows back up.

Sorry, unfortunately that is the only way I can get the Tweet Box to work, for some reason it needs to load before the Visitor Messages tab. I think there must be a conflict with the VM Editor :(

I'll have a proper look when I get some free time and see what I can come up with.

[Filgga]

Tried on vB 4.1.8 but looks like it's not working perfectly!

[Gemma]

Tried on vB 4.1.8 but looks like it's not working perfectly!

In what way? :confused:

[Bluefin221]

In what way? :confused:

I'm going to install it on 4.1.8 and will get back to you Gemma hopefully if any problems exist we can solve them?

[Bluefin221]

Gemma -

Everything works perfectly when using the basic version.

On the with CSS version it shows up like the basic version so you cannot see any recent updates on the profile.

I'm using CSS version check here: http://www.fpcforums.com/forums/members/1-FPC-Admin

I tried messing around with the code but got no where fast so put it back to the way you had it using CSS version. Do you have any ideas?

[Gemma]

Gemma -

Everything works perfectly when using the basic version.

On the with CSS version it shows up like the basic version so you cannot see any recent updates on the profile.

I'm using CSS version check here: http://www.fpcforums.com/forums/members/1-FPC-Admin

I tried messing around with the code but got no where fast so put it back to the way you had it using CSS version. Do you have any ideas?

Checking your source code it doesn't look like the callback is set; firstly did you follow all the action is step 2 of the instructions? And did you change this part of the code to match up to your twitter profilefield#

<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/{vb:raw userinfo.fieldXX}.json?callback=twitterCallback2&count=5"></script>

I've just checked your Twitter username on my own site and it is working so I think you may have missed a step somewhere.

[Bluefin221]

Checking your source code it doesn't look like the callback is set; firstly did you follow all the action is step 2 of the instructions? And did you change this part of the code to match up to your twitter profilefield#

<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/{vb:raw userinfo.fieldXX}.json?callback=twitterCallback2&count=5"></script>

I've just checked your Twitter username on my own site and it is working so I think you may have missed a step somewhere.

I missed the first field ID, because I edited the file 3/4 times must have rushed it the last time as the other two fields were completely properly.

Also I have to put read/write and access on the app for it to work correctly, but confirmed working perfectly on 4.1.8

[LuDawgs]

So close. I'm running 4.1.7 but unfortunately my members most recent tweets are not appearing in their section. Everything else looks good. I've read through this section end to end.

[Gemma]

but unfortunately my members most recent tweets are not appearing in their section

I'll assume no tweets are showing, not just recent tweets?

Please make sure you have correctly setup steps 1 & 2

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)

The Application must be set to Read and Write.

Also make sure you have added you profilefield numbers into the template where required.

[LuDawgs]

Yep, did all of those things and checked them several times...not sure what I'm missing. :(

[Gemma]

Yep, did all of those things and checked them several times...not sure what I'm missing. :(

PM me a link to your site and I'll have a look.

[LuDawgs]

I think it probably has something to do with me using a custom style. I've removed the files and the code for now until I can figure out where to place them. PM coming...

[Gemma]

I think it probably has something to do with me using a custom style. I've removed the files and the code for now until I can figure out where to place them. PM coming...

www.yourdomain.com/twitter/

And inside the twitter folder should be the blogger.js, jquery.twitter.js and twitter.css files

[LuDawgs]

I'm an idiot. I uploaded the files to my root, but not in a twitter folder. Doh. All is good! Thank you!

[LuDawgs]

Crazy. I use the MGC Evo chat solution. It has the ability to respond to someone and it puts the @ symbol in front of who you're responding to. The Twitter pop up causes people's names to get underlined and the twitter pop up appears! LOL

If I put @tray...and I mouse over the name, some guy named "tray" has his twitter pop up LOL

[Gemma]

Crazy. I use the MGC Evo chat solution. It has the ability to respond to someone and it puts the @ symbol in front of who you're responding to. The Twitter pop up causes people's names to get underlined and the twitter pop up appears! LOL

If I put @tray...and I mouse over the name, some guy named "tray" has his twitter pop up LOL

In your headinclude template try adding <vb:if condition="THIS_SCRIPT == 'member'"> </vb:if> to the edit you made.

So it would be something like this (depending on which headinclude template edits you made)

<vb:if condition="THIS_SCRIPT == 'member'">
<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 });
});
</script>
</vb:if>

[tidus78]

Installed,4.1.8. seems like working but when I roll-on my tweeter account in profile it says "Sorry, this does not appear to be an active Twitter account"

My account is here : https://twitter.com/#!/Console_Planet

[Gemma]

Do you have a link to your site so I can see what you mean?

Did you add Console_Planet or http://twitter.com/#!/Console_Planet in the profilefield?

[tidus78]

http://www.console-planet.it/members/tidus.html

Added http://twitter.com/#!/Console_Planet mmm

[Gemma]

You only need to add your username - Console_Planet

[tidus78]

:eek::p

Thanks Gemma

[tidus78]

Edit

Just last question : can I modify colour of link blue in orange?

[Gemma]

In the twitter.css file change:
#twitter_update_list li span a {
/* links in tweet */
color: #00f;
}

To something like this:
#twitter_update_list li span a {
/* links in tweet */
color: #fbb715;
}

If you want a different shade of orange change #fbb715

[Abhik]

Hi,
Do I have to put the codes in "memberinfo_block_statistics" template?
I tried to put this on a custom tab template, but nothing showing up.

http://www.getassisted.com/member.php?u=1

EDIT: Okay, I needed to register the userinfo variable. Now the plugin partially working.
It seems the embedded javascripts aren't working. Any solution?

[Gemma]

I've not tried it with a custom tab. Trying adding both template edits to your custom tab template (where the raw content code should go) so it looks like this:

<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 });
});
</script>
<link rel="stylesheet" type="text/css" href="twitter/twitter.css"/>
<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">
<h5 class="subblocksubhead subsubsectionhead"><u>Recent Updates:</u></h5>
<div id="twitter_div">
<ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="twitter/blogger.js"></script>
<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/{vb:raw userinfo.fieldXX}.json?callback=twitterCallback2&count=5"></script>
<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>
</div></div>
</vb:if>

[ewebdesigner]

I don't understand what I did wrong because it only shows:
twitter

Recent Updates:


You can follow me on Twitter, my username is (LINK TO TWITTER)

what I did:
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

did


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


did:


Twitter Updates in Member Profile (with CSS)

Follow steps 1, 2, 3 and 4 above.

5. Open headinclude and add the following to the end
Code:

<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 });
});
</script>
<link rel="stylesheet" type="text/css" href="twitter/twitter.css"/>

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

6. As above

You can alter the dimensions and colours of the Twitter Feed Box in the twitter/twitter.css file


did:

With
Code:

<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">
<h5 class="subblocksubhead subsubsectionhead"><u>Recent Updates:</u></h5>
<div id="twitter_div">
<ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="twitter/blogger.js"></script>
<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/{vb:raw userinfo.fieldXX}.json?callback=twitterCallback2&count=5"></script>
<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>
</div></div>
</vb:if>

Remember change the 3 instances of XX to correspond with the profile field number.


I replaced xx with 5 because it was 5 for me. Added my consumer key as well.

For the consumer key, was I suppose to replace the 1 with the code?

<script src="http://platform.twitter.com/anywhere.js?id=consumer_key&amp;v=1">
</script>

I did the CSS and 1.0.3 CSS part, is that what I was suppose to do?

in step 5 for 1.0.3 CSS, it says

5. Open memberinfo_block_statistics

It is asking me to replace something with another code, but I can't even find the first code that you told me to replace so I just copied the With code and put it at the end of memeberinfo_block_Statistics

[Gemma]

I replaced xx with 5 because it was 5 for me. Added my consumer key as well.Did you replace all the XX's with 5? (there are 3 of them)

For the consumer key, was I suppose to replace the 1 with the code? <script src="http://platform.twitter.com/anywhere.js?id=consumer_key&amp;v=1">
</script>No, replace consumer_key with the 21 key consumer code

5. Open memberinfo_block_statistics

It is asking me to replace something with another code, but I can't even find the first code that you told me to replace so I just copied the With code and put it at the end of memeberinfo_block_StatisticsPlace this code above <!-- view-statistics --> in your memberinfo_block_statistics template

<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">
<h5 class="subblocksubhead subsubsectionhead"><u>Recent Updates:</u></h5>
<div id="twitter_div">
<ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="twitter/blogger.js"></script>
<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/{vb:raw userinfo.fieldXX}.json?callback=twitterCallback2&count=5"></script>
<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>
</div></div>
</vb:if>Remember and replace the XX (3 times)

[ewebdesigner]

Did you replace all the XX's with 5? (there are 3 of them)

<script src="http://platform.twitter.com/anywhere.js?id=consumer_key&amp;v=1">
</script>No, replace consumer_key with the 21 key consumer code

Place this code above <!-- view-statistics --> in your memberinfo_block_statistics template

<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">
<h5 class="subblocksubhead subsubsectionhead"><u>Recent Updates:</u></h5>
<div id="twitter_div">
<ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="twitter/blogger.js"></script>
<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/{vb:raw userinfo.fieldXX}.json?callback=twitterCallback2&count=5"></script>
<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>
</div></div>
</vb:if>Remember and replace the XX (3 times)



Yup I replaced all 3 XX with the number 5. I am not sure if there has to be a space between field and the number 5. But I put no space.

I believe the memberinfo is correct, but not sure about the headinclude.

This is what I put in the headinclude:


<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=CODE GOES HERE&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"/>





But I added the code where it says "CODE GOES HERE"
I put the code at the very end

[Gemma]

Can you link me to the site where you are trying to use it?

[Gemma]

I've removed the non-CSS version and merged all the other edits together (hovercards and tweetbox) to make one version.

[tortuga2]

thx works great

[Gemma]

Working on an updated version of this :)

[ProFifaLeagues]

Working on an updated version of this :)


Great news Gemma,Cant wait for the update

[Emeralda]

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

This has an unintended bug I think, it conflicts hard with DBTech's user tagging/mentions. Whenever I mentioned someone, instead of actually mentioning the member in a thread, it was trying to show a Twitter account with a similar name.

[Gemma]

<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>This has an unintended bug I think, it conflicts hard with DBTech's user tagging/mentions. Whenever I mentioned someone, instead of actually mentioning the member in a thread, it was trying to show a Twitter account with a similar name.

If they are both using the @ function, then there could be a conflict. Hmmm, DBTech vs Twitter. That would be an amazing court case. Don't you think?

Um, my mind was a wandering. Sorry nothing I can do about the conflict in mods.

[Emeralda]

Ok, I had an idea of putting it above the code in member info statistics template and it works now without bugging out usertagging.

[Gemma]

Working on an updated version of this :)

Updated to v.1.0.5

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

[Naijasite]

Please i am lost at step 5...How do i find this 5. Open headinclude and add the following to the end ?

Please someone tell me where i can find headinclude in Admin CP

[Gemma]

Please i am lost at step 5...How do i find this 5. Open headinclude and add the following to the end ?

Please someone tell me where i can find headinclude in Admin CP

It is a template. AdminCP > Styles and Templates > Style Manager > Choose the style to edit and from the dropdown options choose Edit Templates and click Go

Scroll down the list until you find headinclude, add the template edit as instructed then do the same for memberinfo_block_statistics.

[Gemma]

Finally got around to adding some of my own mods to my new site....I forgot how much I like this one :)

[AndrewSimm]

I can see friends and I can tweet from my profile but my tweets don't show up on my profile.

[Gemma]

Probably needs an update since Twitter stopped some of its API.

I've got a different version running on my site I'll see if I can find the edits and post them up.

[Gemma]

Updated the OP to fix problems with twitter feeds not showing in Member Profile.

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.

[AndrewSimm]

Anyone wanting to use this needs to read this
https://dev.twitter.com/docs/embedded-timelines#timeline-selection

THis is how to use the new 1.1 API released by twitter some months back.

[Replicators]

Nice hack, but it needs fixed! Also the twitter feed should have it's own tab in the profile.