Twitter integration

hargi · 2 May 2011 at 10:11

Hi fokes,

Looking for a bit of guidance here found this tutorial http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/

I understand how to get the feed now its just the template and getting it to display properly in my site thats the problem.

I would like to put the feed in the section that says latest news http://www.darlingtoneyfs.org.uk/test.php

I have tried changing the

Code:

getTwitters('tweet', {       to getTwitters('news_column {

This did get the tweet but did not display how i wanted it to.

What im after is for the twitter status to be in the brown text.

And is it possible to get the date the tweet was tweeted to appear in the brown box?

TIA

TidyWorks · 2 May 2011 at 11:43

give your new feed list a new li, with two divs as so, at the bottom.

Code:

<li> 
<div id="twitter">
<div id="tweet">
<p>Please wait</p>
</div> 
</div>
</li>

In your stylesheet or where ever you choose to put your styles give the two divs some style

Code:

#tweet {
	position:relative;
	width:250px;
	color:#000;
	font-size:12px; 
	font-family:Arial;
}
#tweet a {
	color:#fff;
	text-decoration:none;
}
#twitter {
	padding-left:50px;
}

Just quickly put this onto the bottom of your news feed, you will obv need to play around with it to get it right.

If you want it towards the top then you will have to give a outside div to create some space, as the twitter feed will mess around with the space and will not sit correctly.

hargi · 2 May 2011 at 13:03

Thanks TidyWorks

That gets the twitter feed to the bottom of that column.

I have changed the template to use

Code:

template: ' "%created_at%" "%text%"  '

The created_at get the time in Sun May 01 15:38:26 +0000 2011 format.
Is there a way to just get Sun May 01?

Then on the page I would like to split it up so the date that we have got from twitter will be displayed in the date class and the status will be displayed along side it.

Code:

<div id="twitter">
<div id="tweet">
<div class="date"><span class="size24">27</span><br />
                <span class="size18">JUL</span> 2010</div>
</div> 
</div>

TidyWorks · 2 May 2011 at 13:09

Above I meant to put the LI in the UL not outside it. Unless you meant to put it differently.

You want the date to appear like the rest of the news feed dates?

Then I would create another div outside the tweet div, and give it a new js file pulling just the date to be displayed. As anything placed inside the tweet div will get removed when it gets the info from twitter.

Edit: Awesome you got it working.

hargi · 2 May 2011 at 13:20

I have moved the LI into the UL now.

Yeah im wanting the twitter to display in the same format at the news feed. As im going to get rid of that static content and just have it populated by twitter.

Ta

hargi · 2 May 2011 at 13:57

Thanks for looking I appreciate your help turns out you can style to code in the template

Code:

<script 
 src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" 
 type="text/javascript">
</script>
<script type="text/javascript" charset="utf-8">
getTwitters('tweet', { 
  id: 'rem', 
  count: 1, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
 template: ' <div class="date">"%created_at%"</div><div class="text">"%text%" </div>'
});
</script>

The only prob now it trying to trim down that date.