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 |
#62
|
||||
|
||||
Can you provide me with a link to your site?
|
#63
|
|||
|
|||
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 |
#64
|
||||
|
||||
Looks like you haven't set up the application correctly in Twitter - https://dev.twitter.com/apps/new
|
#65
|
|||
|
|||
Thanks.
The callback URL setting was empty |
#66
|
||||
|
||||
Anyone wanting a 'Twitter Follow' button instead of
Quote:
In your memberinfo_block_statistics template, find: Code:
<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:
<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> Clicking on the username will produce a mini-profile popup and it will also tell how many followers the user has. |
#67
|
|||
|
|||
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 |
#68
|
|||
|
|||
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 |
#69
|
||||
|
||||
Try removing one of the </div> tags towards the end of the code
Code:
</div></div> </vb:if> |
#70
|
|||
|
|||
This is the great mod, i tried on my vb 4.1.6 site and it worked on FF7 browser.
|
#71
|
||||
|
||||
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.
|
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|