The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Twitter Updates in Members Profile Details »» | |||||||||||||||||||||||||||||
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; } 6. Open memberinfo_block_statistics and find: Code:
<!-- view-statistics --> 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&v=1&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> 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" /> Code:
<link type="text/css" href="twitter/css/twitter_dark.css" rel="stylesheet" /> 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 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
Screenshots
Show Your Support
|
5 благодарности(ей) от: | ||
artscripts, BCP Hung, CharlieDelta, ProFifaLeagues, RobbieZ |
Comments |
#12
|
||||
|
||||
How often will it check for updates or will it happen auto everytime you update on twitter ?
Great mod thanks |
#13
|
||||
|
||||
Updates are in real-time
|
#14
|
||||
|
||||
Cheers Gemma
|
#15
|
|||
|
|||
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. |
#16
|
||||
|
||||
Quote:
|
#17
|
|||
|
|||
Quote:
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; |
#18
|
||||
|
||||
Works Superb on 4.1.3 thanks Gemma
|
#19
|
||||
|
||||
|
#20
|
|||
|
|||
Quote:
|
#21
|
||||
|
||||
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; } |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|