Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Twitter Updates in Members Profile Details »»
Twitter Updates in Members Profile
Version: 1.0.6, by Gemma Gemma is offline
Developer Last Online: Nov 2023 Show Printable Version Email this Page

Category: Profile Enhancements - Version: 4.x.x Rating:
Released: 06-19-2011 Last Update: 12-04-2012 Installs: 46
Template Edits
Re-useable Code Additional Files  
No support by the author.

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:
<!-- view-statistics -->
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.

Download Now

File Type: zip Twitter Updates in Member Profiles 1.0.6.zip (27.2 KB, 34 views)

Screenshots

File Type: jpg twitter.jpg (72.3 KB, 0 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.
5 благодарности(ей) от:
artscripts, BCP Hung, CharlieDelta, ProFifaLeagues, RobbieZ

Comments
  #72  
Old 10-16-2011, 09:01 PM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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

Code:
</div></div>
</vb:if>
Just above that add this (instead of using the code in post #45)
Code:
<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>
Quote:
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
Reply With Quote
  #73  
Old 10-16-2011, 09:59 PM
Kingdombuilder's Avatar
Kingdombuilder Kingdombuilder is offline
 
Join Date: Oct 2009
Posts: 127
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
  #74  
Old 10-16-2011, 10:35 PM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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:
Code:
if (!$vbulletin->GPC_exists['tab'])
{
    $vbulletin->GPC['tab'] = 'aboutme';
}
Plugin Is Active: Yes

Save.
Reply With Quote
  #75  
Old 10-16-2011, 11:57 PM
Kingdombuilder's Avatar
Kingdombuilder Kingdombuilder is offline
 
Join Date: Oct 2009
Posts: 127
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
  #76  
Old 10-17-2011, 09:09 AM
sticky sticky is offline
 
Join Date: Sep 2003
Posts: 934
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Pretty cool, would be nice to have this in a sig.
Reply With Quote
  #77  
Old 10-17-2011, 11:07 AM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Kingdombuilder View Post
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.
Reply With Quote
  #78  
Old 12-10-2011, 08:13 AM
Filgga's Avatar
Filgga Filgga is offline
 
Join Date: Jul 2007
Posts: 69
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Tried on vB 4.1.8 but looks like it's not working perfectly!
Reply With Quote
  #79  
Old 12-10-2011, 10:16 AM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Filgga View Post
Tried on vB 4.1.8 but looks like it's not working perfectly!
In what way?
Reply With Quote
  #80  
Old 12-20-2011, 03:14 PM
Bluefin221 Bluefin221 is offline
 
Join Date: Jul 2008
Location: Scotland
Posts: 290
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Gemma View Post
In what way?
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?
Reply With Quote
  #81  
Old 12-20-2011, 04:33 PM
Bluefin221 Bluefin221 is offline
 
Join Date: Jul 2008
Location: Scotland
Posts: 290
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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?
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:01 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04987 seconds
  • Memory Usage 2,368KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (9)bbcode_code
  • (5)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (11)post_thanks_box
  • (5)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (2)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete