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 |
#42
|
|||
|
|||
Quote:
|
#43
|
|||
|
|||
Quote:
Nah mine isnt private, but other users could be? But isnt this supposed to be tweets per user? |
#44
|
||||
|
||||
Quote:
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? |
#45
|
||||
|
||||
Updated
1.0.4 - Added twitter hovercards Instruction on how to update are include in the OP |
Благодарность от: | ||
CharlieDelta |
#46
|
||||
|
||||
And if you want to add a tweetbox to your feed:
Open your headinclude template 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> <script src="http://platform.twitter.com/anywhere.js?id=consumer_key&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"/> 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&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"/> Open memberinfo_block_stats Find: Code:
<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> Code:
<img src="clear.gif" height="10" /><br /> <div id="tbox"></div> |
#47
|
||||
|
||||
Made a small change to the headinclude template in the basic version, didn't realise the hovercards weren't expanded
|
#48
|
|||
|
|||
Quote:
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 |
#49
|
||||
|
||||
Ooops sorry
In headinclude, find: 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&v=1"> </script> <script type="text/javascript"> twttr.anywhere(function(twitter) { twitter.hovercards({ expanded: true }); }); </script> <link rel="stylesheet" href="twitter/twitter.css"/> 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&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"/> |
#50
|
|||
|
|||
i would like to see a demo
|
#51
|
|||
|
|||
This is really strange, the tweetbox is not showing up for me. I was sure it was there yesterday.
UPDATE: Works in all browsers except FF? |
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|