Get Your TWITTER feed the way you want it !

TWITTER Feeds are handy to have but sometimes they just look downright ugly and the cohesion between the feed and your theme is just a complete juxtaposition.

So here is a super simple solution…………..

We are going to do a bit of coding, so remember….Back it up first, your website that is!

First of all…..

Yep….Back it all up first!

 
Step 1
Now Download the ZIP file here
Download Zip

Once you have downloaded the files and uploaded them to the correct location on your server, you’re going to want to link them up in your footer, like so…

<script src=”http://api.tweecool.com/js/tweecool.min.js”></script>
<script>
$(document).ready(function() {
$(‘#tweecool’).tweecool({
//settings
username : ‘tweecool’,
limit : 5
});
});
</script>

Step 2
The next step is to add the following code to your page where you want the feed to be displayed…

<div id="tweecool" class="gecko-tweet"></div>

Settings
Just add these to the JS above if you want too.

• username – Your username
• limit – Number of tweets to show (Default value: 5)
• profile_image – Show profile image (Default value: true)
• show_time – Show tweet time (Default value: true)
• show_media – Show media (Default value: false)
• show_media_size – Set media size (Default value: thumb)
• show_actions – Show action box such as ‘reply’, ‘retweet’ and ‘favorite’ (Default value: false)
• action_reply_icon – Reply icon, add your HTML tags or ASCII code (Default value: ↵ [↵] )
• action_retweet_icon – Retweet icon, add your HTML tags or ASCII code (Default value: ∝ [∝] )
• action_favorite_icon – Favorite icon, add your HTML tags or ASCII code(Default value: ★ [❤] )
• profile_img_url – If set to ”tweet” the profile image will have tweet URL, otherwise it will be the user’s profile URL (Default value: profile)
• show_retweeted_text – if set to true, this will show the original retweeted text and avoid any truncated text (Default value: false)
• exclude_replies – if set to true, this will not show the replies (Default value: false)

If you’ve followed all the above steps, you should now have a twitter feed on your site, simply add some CSS to get it how you want it and you’re ready to go!
Here is some sample css

.gecko-tweet ul{
margin:0;
padding:0;
} 
.gecko-tweet li{
list-style: none;
clear: both;
} 
.gecko-tweet li img, .demo-wrap li .tweets_txt{
float:left;
margin-bottom:10px;
} 
.gecko-tweet li img{
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
} 
.gecko-tweet li .tweets_txt{
width:230px;
margin-left: 10px;
} 
.gecko-tweet li .tweets_txt span {
font-style: italic;
color:#666;
display: block;
} 
.gecko-tweet li .media{
display:block;
float:none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
} 
.gecko-tweet li .action-box{
margin-top: 4px;
} 
.gecko-tweet li .action-box li:first-child{
margin-left: 0;
} 
.gecko-tweet li .action-box li{
float:left;
clear: none;
margin-left: 10px;
} 
.gecko-tweet li .action-box span{
display:inline;
margin-left: 2px;
}

If you have any questions just drop a comment below and we’ll get back to you ASAP!