How to show your most recent Twitter tweets on your site
Posted: Sun Jul 05, 2009 12:39 pm
I just finished styling the twitter plugin by Nils Haack and I thought I'd share it.
This is what it looks like:
To do this first upload function.nh_essentials.php and function.nh_api_twitteruser.php to the plugins folder.
These can be found in the forge.
(Look in function.nh_api_twitteruser.php and remove from line 20 if it's there.
There are two images used in the example above:
The arrows -
The Twitter logo -
Here they are as Fireworks PNGs with transparent backgrounds:
The arrows -
The Twitter logo -
Next insert this in your template or GCB and change "CaffeineNews" to your Twitter username:
Finally, create a new stylesheet with this in it and link it to your template:
That should be everything.
Hope you like it.
Simon66
This is what it looks like:
To do this first upload function.nh_essentials.php and function.nh_api_twitteruser.php to the plugins folder.
These can be found in the forge.
(Look in function.nh_api_twitteruser.php and remove
Code: Select all
echo $rest;There are two images used in the example above:
The arrows -
The Twitter logo -
Here they are as Fireworks PNGs with transparent backgrounds:
The arrows -
The Twitter logo -
Next insert this in your template or GCB and change "CaffeineNews" to your Twitter username:
Code: Select all
{* Start Twitter *}
{nh_essentials}
{nh_api_twitteruser name="CaffeineNews" date_format="%a, %d-%b-%g @ %R"}
<div id="tweetbox">
<div id="twit_header">
<div id="twit_icon"><img src="{$tweets[0]->user->image}" alt="twittericon" /></div>
<span id="twit_user">{$tweets[0]->user->screenname}</span>
<span id="twit_followers">Followers: {$tweets[0]->user->followers}</span>
<span id="twit_page"><a href="http://twitter.com/{$tweets[0]->user->screenname}" title="Follow us on Twitter" target="_blank">Follow us on Twitter</a></span>
</div>
<div id="tweets">
{section name="i" start=1 loop=5 step=1}
{assign var=pointer value=$smarty.section.i.index-1}
<div class="onetweet">
<!--[if gt IE 7]><!-->
{* Curved corners are thanks to Stu Nicholls at http://www.cssplay.co.uk/boxes/curves.html *}
<em id="ctl"><b>•</b></em>
<em id="cbl"><b>•</b></em>
<em id="ctr"><b>•</b></em>
<em id="cbr"><b>•</b></em>
<!--<![endif]-->
<p>
<a class="tweet_text" href="http://twitter.com/{$tweets[$pointer]->user->screenname}/statuses/{$tweets[$pointer]->id}" title="open in twitter" target="_blank">{$tweets[$pointer]->text}</a><br />
<span class="tweet_date">{$tweets[$pointer]->timestamp}</span>
<a class="tweet_reply" title="reply to {$tweets[$pointer]->user->screenname}" href="http://twitter.com/home?status=@{$tweets[$pointer]->user->screenname}%20&in_reply_to_status_id={$tweets[$pointer]->id}&in_reply_to={$tweets[$pointer]->user->screenname}" target="_blank"></a>
</p>
</div>
{/section}
</div>
<div id="twitter_logo"></div>
</div>
{* End Twitter *}Code: Select all
#tweetbox {
background-color: #3C2415;
padding: 5px 0px;
}
#twit_header {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
margin: 0px 5px 5px 0px;
height: 48px;
width: 100%;
}
#twit_icon {
float: left;
padding: 0px 5px;
}
#twit_user {
font-size: 20px;
color: #D3DD19;
display: block;
}
#twit_followers {
font-size: 14px;
color: #BC3E23;
display: block;
padding-top: 4px;
}
#twit_page {
display: block;
}
#twit_page a {
font-size: 14px;
text-decoration: none;
color: #D3DD19;
outline: none;
}
#twit_page a:hover {
color: #BC3E23;
}
#tweets {
}
.onetweet {
color:#3C2415;
position:relative;
background-color: #DAE118;
margin:5px;
}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:8px; height:8px; color:#DAE118; background:#3C2415; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.onetweet em b {position:absolute; font-size:60px; font-family:arial; color:#DAE118; line-height:19px; font-weight:normal;}
#ctl b {left:-3px; top:-1px;}
#ctr b {left:-10px; top:-1px;}
#cbl b {left:-3px; top:-8px;}
#cbr b {left:-10px; top:-8px;}
.onetweet p {
position:relative;
z-index:100;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 12px;
margin: 5px;
padding: 3px 0px;
}
.onetweet p a {
text-decoration: none;
color: #912C20;
outline: none;
}
.onetweet p a:hover {
text-decoration: none;
color: #82941B;
}
.tweet_date {
font-size: 10px;
font-style: italic;
font-weight: bold;
}
a.tweet_reply {
background-image: url(/images/cms/replyarrow.png);
background-repeat: no-repeat;
background-position: left top;
height: 12px;
width: 7px;
display: block;
position: absolute;
right: 5px;
bottom: 2px;
outline: none;
}
a.tweet_reply:hover {
background-position: right top;
}
#twitter_logo {
text-align: right;
margin: 10px 5px 5px 5px;
background-image: url(/images/cms/twitter_logo.png);
background-repeat: no-repeat;
background-position: right center;
height: 16px;
}Hope you like it.
Simon66
..