DEPRECATED
This snippet no longer works! Twitter has retired the relevant API. This information is preserved for archival purposes.
This is the Latest Project from Console Zoom. It is a custom Wikidot CSS3 style twitter widget. There is going to be a tutorial and code in order to place this in your wikidot site, or any other site!
Step 1:
- To get this code to work and be able to see the full features of it, you are going to need a CSS3-capable Internet browser (e.g. Apple Safari, Google Chrome). This is to really see what this widget can do.
Step 2:
- Once you have downloaded the Chrome Browser or the Safari Browser you can now enter the code below into the bottom of the desired page that you want (NOT THE CSS STYLESHEET!!). Please note that you must copy and paste the Entire Code if you want to keep this feature free for Wikidot user's.
[[module CSS]]
/* This Code is Copyright 2010 Worldwide Media Designs and Signs Inc. and is free to use only for wikidot users! Others have to make a donation to one of my sites */
/* The Froopi Twitter Box */
.froopitwitterbox-container {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: auto;
}
.froopitwitterbox {
width: 199px;
padding: 10px 5px 5px 5px;
margin:10px;
position: relative;
z-index: 25;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #f5f5f5;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background-image: -moz-linear-gradient(top,#f5f5f5,#e5e5e5);
color: #111111;
font-size: 90%;
}
.froopitwitterbox h3 {
position: relative;
width: 220px;
color: #fff;
padding: 10px 5px;
margin: 0;
left: -15px;
z-index: 28;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #b5b5b5;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#b5b5b5));
background-image: -moz-linear-gradient(top,#eeeeee,#00558b);
font-size: 160%;
text-align: center;
text-shadow: #aaaaaa 0 -1px 1px;
font-weight: bold;
}
.froopitwitterbox-container .triangle-l {
border-color: transparent #AAAAAA transparent transparent;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
left: -13px;
top: 47px;
z-index: 0; /* displayed under infobox */
}
.froopitwitterbox-container .triangle-r {
border-color: transparent transparent transparent #AAAAAA;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
left: 216px;
top: 47px;
z-index: 0; /* displayed under infobox */
}
.froopitwitterbox a {
color: #aaaaaa;
text-decoration: none;
border-bottom: 1px dotted transparent;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
}
.froopitwitterbox a:hover, .infobox a:focus {
color: #00558b;
background: transparent;
text-decoration: none;
border-bottom: none;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
}
.froopitwitterbox-container a {
color: #FFFFFF;
}
.froopitwitterbox-container a:hover {
color: #00558b;
}
[[/module]]
How to Install
To install this package in your site, use this code:
(replace the default values with your own, or delete any of the attributes completely)
[[include :csi:include:twitter-widget |width=2 |height=2 |username=wikidot |scrollbar=true ]]
| Attribute | Description | Possible values | Default value |
|---|---|---|---|
| width | Width of widget, in hundreds of pixels | Any integer | 2 (which means 200px) |
| height | Height of widget, in hundreds of pixels | Any integer | 2 (which means 200px) |
| username | Your Twitter.com username | Any valid twitter username | wikidot |
| scrollbar | Sets whether the scrollbar is shown or not | true, false | true |
Note: To use the default value, just delete that attribute from the code.
View the Wikidot Syntax Here
View the CSI Package Here
Best Way to use This
Example:
If you look at the Console Zoom side bar while viewing the home page or the blog pages, that is what this widget should look like.
Any further questions on how to get this widget working in your site feel free to comment on this post or comment on the original blog pose HERE.
[フレーム]
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by Matt Gentile
New Tabview - 24 Oct 2011 23:53
Rate this solution
If you think this solution is useful — rate it up!
It works now but theres a glitch!
ThPfL6GDbozru2M-SJReGCeDCPWXsJucIPIZesC6cg9c4_yip6-C0kLj9iMrSwl3jvXcHZU=s106Wrb10aH_PodBtLme5NjAviJ4zgRwPSfM77m1_tirYCoSbjxi53l25aAA6omDhBE56JgE=s106Ramon Brown
Seems that this module is no more working, any fix?
Thanks in advance.
No there isn't a fix because this was broken when Twitter retired API v1. As a result almost all 3rd party Twitter widgets across the world stopped working (a google search will bring up a lot of information about this). Under API v2 there are a few twitter widgets that work, for example the one on our community site at http://community.wikidot.com/forum:recent-posts, but none of them are as good as what we had before. Sadly it's all Twitter's fault.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
I can easily update CSI to match this page. Just as long as I can see what has changed (using history)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Added a comment on the CSI page for some changes and updates to this package.
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
I would like to start adding more sizes to the box heading 3 container tho, just in case users would like to make it bigger horizontally.
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
Is there any way you can write on the csi package that I created the widget and you created the csi?
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
I linked back to this page… ?
Will mention your name as well then.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Thanks for helping out with this project, any other thought's or comments?
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
Done: http://csi.wikidot.com/package:41
But I had to restrict the height and width to increments of 100 pixels due to a few limitations… the header with @username in it wouldn't have been the correct width if I did it any other way.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Sure! You can make one if you would like. I just made this code like 2 or 3 hours ago so I'm sure there is other things to be changed also.
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
Do you know how to make a CSI froopi? That would make this easier for people to use. Otherwise I can convert it into a CSI for you if you'd like.
[CSI = Cross-Site Include]
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server