vb.org Archive - Profile Enhancements - Twitter Updates in Members Profile

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Profile Enhancements - Twitter Updates in Members Profile (https://vborg.vbsupport.ru/showthread.php?t=265541)

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:

Code:

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

Code:

Below that add:

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

<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

Code:

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

to:

Code:

<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

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.

Great Mod, waiting for very long.

Works fine.

Thanx

What make were the yellow trainers? :D

It awesome modification !
Under allow of author (Gemma), new add-on will be make this modification become perfect !

Thanks to Gemma ! Good job men !

P.S : You must see this :
In default code :

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 ?

Nice looking mod thanks will try later on 4.1.3

Installed, great little mod Gemma..

Installed on 4.1.3 and working great!

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

Quote:

Originally Posted by Mr_Running (Post 2211229)

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.

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

Great mod thanks

Updates are in real-time

Hi Gemma

Received error for additional CSS

Code:

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.

Quote:

Originally Posted by Mr_Running (Post 2211388)

Hi Gemma

Received error for additional CSS

Code:

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:

Quote:

Originally Posted by Gemma (Post 2211400)

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:

Code:

div#twitter {

        width: 900px;0.81em;

Code:

div#twitter {

        width: 600px;0.81em;

Works Superb on 4.1.3 thanks Gemma :)

Quote:

Originally Posted by rammieone (Post 2211433)

Works Superb on 4.1.3

Thanks for confirming :)

Quote:

Originally Posted by Mr_Running (Post 2211388)

Hi Gemma

Received error for additional CSS

Code:

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.

Try this

Code:

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

}

Quote:

Originally Posted by Gemma (Post 2211564)

Try this

Code:

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

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.

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

Quote:

Originally Posted by merk_aus (Post 2211572)

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.

The enhanced version is just awesome!!:up:

Quote:

Originally Posted by Gemma (Post 2211580)

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.

Quote:

Originally Posted by CharlieDelta (Post 2211620)

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.

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:

Code:

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

Code:

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

Quote:

Originally Posted by Gemma (Post 2211874)

Code:

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

Code:

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

Perfect! :up:

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.

Quote:

Originally Posted by x YNWA x (Post 2212140)

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

Quote:

Originally Posted by x YNWA x (Post 2212140)

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!

This is awesome! Installing now.

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

Quote:

Originally Posted by CharlieDelta (Post 2211562)

Same here.

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

Code:

Start

<vb:literal>



 End with:

</vb:literal>

Code:

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

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

Quote:

Originally Posted by CharlieDelta (Post 2212164)

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

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

Quote:

Originally Posted by Eq4bits (Post 2214222)

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

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01435 seconds Memory Usage 1,872KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (20)bbcode_code_printable (15)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: