This tutorial illustrates a very simple way to work with the Twitter API in order to implement a search in the Twitter public timeline and display search results with an animated stream of messages (tweets) similar to Monitter. In this example I used PHP, jQuery and a very useful Twitter Search API for PHP based on the work of David Billingham and actually developed by Ryan Faerman. This implementation is very simple to customize and integrate on your project. The result is something linke this:
You can download the full code here and reuse it for free on your projects.
I suggest you to take also a look at these posts:
- Simple PHP Twitter Search ready to use in your web projects
- Super simple way to work with Twitter API (PHP + CSS)
- Send messages from a PHP page using Twitter API
1. A little introduction
This package contains the following files:
- index.php: page with the search form + search results
- search.php: PHP search
- twitterapi.php: Twitter Search API for PHP
- jquery/jquery-1.3.2.min.js: jQuery framework
How it works? After submission the search form calls an ajax request to the page search.php that returns search results into an array. Each element of the array (every single tweet) appears into the div twitter-results with a nice fade-in effect. I set a delay between each tweet equal 2 seconds (2000 ms).
I suggest you to take a look at Monitter, and download the full code to try this tutorial on your local host. Now, take a look at the code.
2. index.php: HTML code
HTML code is very simple. Copy the following code in the tag <body>:
...and add into the tag <head> of the page a link to jQuery:
The result is a simple search form:
3. search.php
Now copy and paste the following code into search.php:
$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:
... and to get a specific attribute of the array I used this simple code:
Take a look at this post for info about the search on Twitter.
4. index.php: JavaScript Code
Now take a look at the following JavaScript code that enables an ajax request for the search and display results into the page index.php with a fade in effect and a delay between each tweet equal to 2 seconds:
This is a very basic implementation you can modify to get a real-time stream of messages for example calling a new ajax request (to search.php) every time the current array with the search results is totally displayed in the page.
That's all. If you have some suggestion please add a comment. Thanks!
You can download the full code of this tutorial here and reuse it on your projects.
You can download the full code here and reuse it for free on your projects.
I suggest you to take also a look at these posts:
- Simple PHP Twitter Search ready to use in your web projects
- Super simple way to work with Twitter API (PHP + CSS)
- Send messages from a PHP page using Twitter API
1. A little introduction
This package contains the following files:
- index.php: page with the search form + search results
- search.php: PHP search
- twitterapi.php: Twitter Search API for PHP
- jquery/jquery-1.3.2.min.js: jQuery framework
How it works? After submission the search form calls an ajax request to the page search.php that returns search results into an array. Each element of the array (every single tweet) appears into the div twitter-results with a nice fade-in effect. I set a delay between each tweet equal 2 seconds (2000 ms).
I suggest you to take a look at Monitter, and download the full code to try this tutorial on your local host. Now, take a look at the code.
2. index.php: HTML code
HTML code is very simple. Copy the following code in the tag <body>:
<div class="twitter_container">
<form id="twittersearch" method="post" action="">
<input name="twitterq" type="text" id="twitterq" />
<button type="submit">Search</button>
</form>
<div id="twitter-results"></div>
</div>
<form id="twittersearch" method="post" action="">
<input name="twitterq" type="text" id="twitterq" />
<button type="submit">Search</button>
</form>
<div id="twitter-results"></div>
</div>
...and add into the tag <head> of the page a link to jQuery:
<script type="text/javascript" src="jquery.js"></script>
The result is a simple search form:
3. search.php
Now copy and paste the following code into search.php:
<?php
include('search.php');
if($_POST['twitterq']){
?>
include('search.php');
if($_POST['twitterq']){
$twitter_query = $_POST['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();
foreach($results as $result){
}$search = new TwitterSearch($twitter_query);
$results = $search->results();
foreach($results as $result){
echo '<div class="twitter_status">';
echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
}echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
?>
$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:
foreach($results as $result){
...
}
...
}
... and to get a specific attribute of the array I used this simple code:
$result->name_of_element
Take a look at this post for info about the search on Twitter.
4. index.php: JavaScript Code
Now take a look at the following JavaScript code that enables an ajax request for the search and display results into the page index.php with a fade in effect and a delay between each tweet equal to 2 seconds:
<script type="text/javascript">
$(document).ready(function(){
var twitterq = '';
function displayTweet(){
var i = 0;
var limit = $("#twitter-results > div").size();
var myInterval = window.setInterval(function () {
var element = $("#twitter-results div:last-child");
$("#twitter-results").prepend(element);
element.fadeIn("slow");
i++;
if(i==limit){
},2000);
}
$("form#twittersearch").submit(function() {
twitterq = $('#twitterq').attr('value');
$.ajax({
return false;
});
});
</script>
$(document).ready(function(){
var twitterq = '';
function displayTweet(){
var i = 0;
var limit = $("#twitter-results > div").size();
var myInterval = window.setInterval(function () {
var element = $("#twitter-results div:last-child");
$("#twitter-results").prepend(element);
element.fadeIn("slow");
i++;
if(i==limit){
window.setTimeout(function () {
clearInterval(myInterval);
});
}clearInterval(myInterval);
});
},2000);
}
$("form#twittersearch").submit(function() {
twitterq = $('#twitterq').attr('value');
$.ajax({
type: "POST",
url: "search.php",
cache: false,
data: "twitterq="+ twitterq,
success: function(html){
$("#twitter-results").html(html);
displayTweet();
}
});url: "search.php",
cache: false,
data: "twitterq="+ twitterq,
success: function(html){
$("#twitter-results").html(html);
displayTweet();
}
return false;
});
</script>
This is a very basic implementation you can modify to get a real-time stream of messages for example calling a new ajax request (to search.php) every time the current array with the search results is totally displayed in the page.
That's all. If you have some suggestion please add a comment. Thanks!
You can download the full code of this tutorial here and reuse it on your projects.
After my previous tutorial that illustrated how to implement a super simple way to work with Twitter API (PHP + CSS) I received a lot of emails from my readers that asked to me to write a post about how to implement a simple Twitter search and display search results in a web page with a custom format. So in this tutorial I want to illustrate how you can implement that using a very useful Twitter Search API for PHP developed by David Billingham.
Using this simple method you can obtain, just in some lines of PHP and CSS code, awesome results like this:
You can download the source code at the following link and reuse it for free in your web projects just in some seconds!
1. A little introduction
In this package you'll find two PHP file:
- index.php: the search page (search form + search results)
- search.php: Twitter Search API for PHP
You have to customize only index.php and your Twitter Search will be ready to be integrated into yor web projects in one minute!
2. Index.php
Take a look at index.php. This page contains a simple search form:
...and some lines of PHP code:
$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:
... and to get a specific attribute of the array I used this simple code:
The structure of a tweet contains the following attributes (take a look at the Twitter API home page for a full list):
...so, if you want to display the text of a tweet you can use this code:
The following line of code get the text of the current tweet and convert a textual link into a clickable link:
That's all! Now download the source code, open and upload all files in your test server, open index.php and try to search for something!
If you have some suggestion, please add a comment!
Using this simple method you can obtain, just in some lines of PHP and CSS code, awesome results like this:
You can download the source code at the following link and reuse it for free in your web projects just in some seconds!
1. A little introduction
In this package you'll find two PHP file:
- index.php: the search page (search form + search results)
- search.php: Twitter Search API for PHP
You have to customize only index.php and your Twitter Search will be ready to be integrated into yor web projects in one minute!
2. Index.php
Take a look at index.php. This page contains a simple search form:
<form action="index.php" method="submit">
<input name="twitterq" type="text" id="twitterq" />
<input name="Search" type="submit" value="Search" />
</form>
<input name="twitterq" type="text" id="twitterq" />
<input name="Search" type="submit" value="Search" />
</form>
...and some lines of PHP code:
<?php
include('search.php');
if($_GET['twitterq']){
?>
include('search.php');
if($_GET['twitterq']){
$twitter_query = $_GET['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();
foreach($results as $result){
}$search = new TwitterSearch($twitter_query);
$results = $search->results();
foreach($results as $result){
echo '<div class="twitter_status">';
echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
}echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
?>
$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:
foreach($results as $result){
...
}
...
}
... and to get a specific attribute of the array I used this simple code:
$result->name_of_element
The structure of a tweet contains the following attributes (take a look at the Twitter API home page for a full list):
[text]: Text of the current tweet
[to_user_id]: User Id
[from_user]: User name
[id]: Tweet Id
[from_user_id]: User id
[source]: Source of the current tweet
[profile_image_url]: User profile image URL
[created_at]: Date of the current tweet
[to_user_id]: User Id
[from_user]: User name
[id]: Tweet Id
[from_user_id]: User id
[source]: Source of the current tweet
[profile_image_url]: User profile image URL
[created_at]: Date of the current tweet
...so, if you want to display the text of a tweet you can use this code:
$result->text
The following line of code get the text of the current tweet and convert a textual link into a clickable link:
$text_n = toLink($result->text);
That's all! Now download the source code, open and upload all files in your test server, open index.php and try to search for something!
If you have some suggestion, please add a comment!
In this post I want to illustrate a super simple way to work with Twitter API and PHP. In particular, this tutorial explains how to get public updates from Twitter public timeline and display them in a web page with a custom style using CSS. In order to get Twitter updates I used Twitterlibphp (a PHP implementation of the Twitter API) that allows you to take advantage of it from within your PHP applications.
Using this simple method you can obtain awesome results like this:
You can download the source code at the following link and reuse it for free in your web projects (you need PHP and APACHE):
1. A little introduction
Twitterlibphp returns Twitter timeline in XML format and with this structure (take a look at the Twitter API home page for a full list of available nodes.):
So, if you want to display the user image, user status, and status date in your timeline you have to choose the following nodes:
But how you can display them? It's very simple! Take a look at the following code!
2. PHP code
Create a new file twitter_status.php and copy and paste the following code:
How you can see, the previous code is very simple to understand. The line:
get the 20 most recent public statuses posted. You can also use other functions such as:
getFriendsTimeline(): returns the 20 most recent statuses posted by the authenticating user and that user's friends.
- getUserTimeline(): returns the 20 most recent statuses posted from the authenticating user.
getReplies(): returns the 20 most recent @replies (status updates prefixed with @username) for the authenticating user.
Take a look at twitter.lib.php for the full list of available functions.
If you want to display different information, for example the source of the update (status->source) use this code:
...or if you want to display the number of followers of the current user (follower_count) use this code:
3. CSS Code
Now you can customize the style of your timeline using CSS code. I used the following classes but you can customize the look how you prefer:
That's all! Download the source code, open twitter_status.php, change $username and $password with your Twitter username and password and upload the file in your test server.
If you have some suggestion, please add a comment!
Using this simple method you can obtain awesome results like this:
You can download the source code at the following link and reuse it for free in your web projects (you need PHP and APACHE):
1. A little introduction
Twitterlibphp returns Twitter timeline in XML format and with this structure (take a look at the Twitter API home page for a full list of available nodes.):
status
created_at
id
text
source
user
id
text
source
user
name
screen_name
description
profile_image_url
url
followers_count
...
...screen_name
description
profile_image_url
url
followers_count
...
So, if you want to display the user image, user status, and status date in your timeline you have to choose the following nodes:
But how you can display them? It's very simple! Take a look at the following code!
2. PHP code
Create a new file twitter_status.php and copy and paste the following code:
<div class="twitter_container">
<?php
// require the twitter library
require "twitter.lib.php";
// your twitter username and password
$username = "your_username";
$password = "your_password";
// initialize the twitter class
$twitter = new Twitter($username, $password);
// fetch public timeline in xml format
$xml = $twitter->getPublicTimeline();
$twitter_status = new SimpleXMLElement($xml);
foreach($twitter_status->status as $status){
echo '<br/>';
echo '<div class="twitter_posted_at">Posted at:'.$status->created_at.'</div>';
echo '</div>';
}
?>
<div>
<?php
// require the twitter library
require "twitter.lib.php";
// your twitter username and password
$username = "your_username";
$password = "your_password";
// initialize the twitter class
$twitter = new Twitter($username, $password);
// fetch public timeline in xml format
$xml = $twitter->getPublicTimeline();
$twitter_status = new SimpleXMLElement($xml);
foreach($twitter_status->status as $status){
foreach($status->user as $user){
echo '<img src="'.$user->profile_image_url.'" class="twitter_image">';
echo '<a href="http://www.twitter.com/'.$user->name.'">'.$user->name.'</a>: ';
}
echo $status->text;echo '<img src="'.$user->profile_image_url.'" class="twitter_image">';
echo '<a href="http://www.twitter.com/'.$user->name.'">'.$user->name.'</a>: ';
}
echo '<br/>';
echo '<div class="twitter_posted_at">Posted at:'.$status->created_at.'</div>';
echo '</div>';
}
?>
<div>
How you can see, the previous code is very simple to understand. The line:
$xml = $twitter->getPublicTimeline();
get the 20 most recent public statuses posted. You can also use other functions such as:
getFriendsTimeline(): returns the 20 most recent statuses posted by the authenticating user and that user's friends.
- getUserTimeline(): returns the 20 most recent statuses posted from the authenticating user.
getReplies(): returns the 20 most recent @replies (status updates prefixed with @username) for the authenticating user.
Take a look at twitter.lib.php for the full list of available functions.
If you want to display different information, for example the source of the update (status->source) use this code:
$status->source
...or if you want to display the number of followers of the current user (follower_count) use this code:
$user->followers_count
3. CSS Code
Now you can customize the style of your timeline using CSS code. I used the following classes but you can customize the look how you prefer:
.twitter_container{
color:#444;
font-size:12px;
width:600px;
margin: 0 auto;
}
.twitter_container a{
color:#0066CC;
font-weight:bold;
}
.twitter_status{
height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE;
}
.twitter_image{
float:left;
margin-right:14px;
border:solid 2px #DEDEDE;
width:50px;
height:50px;
}
.twitter_posted_at{
font-size:11px;
padding-top:4px;
color:#999;
}
color:#444;
font-size:12px;
width:600px;
margin: 0 auto;
}
.twitter_container a{
color:#0066CC;
font-weight:bold;
}
.twitter_status{
height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE;
}
.twitter_image{
float:left;
margin-right:14px;
border:solid 2px #DEDEDE;
width:50px;
height:50px;
}
.twitter_posted_at{
font-size:11px;
padding-top:4px;
color:#999;
}
That's all! Download the source code, open twitter_status.php, change $username and $password with your Twitter username and password and upload the file in your test server.
If you have some suggestion, please add a comment!