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!
After my previous posts about how to implement a news ticker with MooTools I received a lot of emails from my readers that asked to me to implement a similar feature with jQuery, including fade in and fade out effects, in the simpler possible way. So in this post I want to illustrate you how to implement a nice news ticker using jQuery and just ten lines of Javascript code. The result is something like this:
I suggest you to take a look at this live preview and download the source code to understand how it works. In the source code I added a file called base.html that contains the basic structure of this ticker you can quickly reuse and customize in your web project.
A little introduction
Step 1: image to have a <ul> list with ID = listticker. This list contains some list elements <li> (in this case: My News 1, My News 2, ...). First step is: get the first element of the list, save its content into a var and remove it using a fade out effect.
You can get the HTML code contained into the first element of the list (#listticker) and assign it to a var (first) using this simple code:
To use fade out effect and remove the element you can use this code:
Step 2: now you have to add the content saved into the var first to the end of the list:
You can use this simple code:
...where first is the var you used to save the content of the first element in the step 1.
Step 3: Now you have to move up the content of the list (My News 2 is now the first element of the list) and repeat the entire process from the step 1.
In Javascript code section of this tutorial I used setInterval() to repeat the process every 3 seconds (3.000 milliseconds). Ok, now take a look at HTML and Javascript code.
HTML Code
HTML code is really simple. The only thing you have to do is adding an <ul> list with ID = listticker and some list elements:
Remeber to add into the tag <head> of the page where you want to implement this ticker a link to jQuery:
Javascript Code
Take a look at the follow code. I implement 2 functions removeFirst() and addLast(). Each function contains five lines of code. Total lines for "conceptual" code: 10 lines! I promised! :)
In the last line I used:
...it calls the function removeFirst()every 3 seconds (3000 milliseconds) and in this way I create ad infinite loop.
If you have suggestions to improve the code please leave a comment. Thanks!
I suggest you to take a look at this live preview and download the source code to understand how it works. In the source code I added a file called base.html that contains the basic structure of this ticker you can quickly reuse and customize in your web project.
A little introduction
Step 1: image to have a <ul> list with ID = listticker. This list contains some list elements <li> (in this case: My News 1, My News 2, ...). First step is: get the first element of the list, save its content into a var and remove it using a fade out effect.
You can get the HTML code contained into the first element of the list (#listticker) and assign it to a var (first) using this simple code:
first = $('ul#listticker li:first').html();
To use fade out effect and remove the element you can use this code:
.fadeOut('slow', function() {$(this).remove();});
Step 2: now you have to add the content saved into the var first to the end of the list:
You can use this simple code:
$('ul#listticker').append(first)
...where first is the var you used to save the content of the first element in the step 1.
Step 3: Now you have to move up the content of the list (My News 2 is now the first element of the list) and repeat the entire process from the step 1.
HTML Code
HTML code is really simple. The only thing you have to do is adding an <ul> list with ID = listticker and some list elements:
<ul id="listticker">
<li>My News 1</li>
<li>My News 2</li>
<li>My News 3</li>
<li>My News 4</li>
<li>My News 5</li>
</ul><li>My News 2</li>
<li>My News 3</li>
<li>My News 4</li>
<li>My News 5</li>
Remeber to add into the tag <head> of the page where you want to implement this ticker a link to jQuery:
<script type="text/javascript" src="jquery.js"></script>
Javascript Code
Take a look at the follow code. I implement 2 functions removeFirst() and addLast(). Each function contains five lines of code. Total lines for "conceptual" code: 10 lines! I promised! :)
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 700;
var pause = 3000;
interval = setInterval(removeFirst, pause);
});</script>
$(document).ready(function(){
var first = 0;
var speed = 700;
var pause = 3000;
function removeFirst(){
function addLast(first){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
function addLast(first){
last = '
'+
first+'';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}first+'';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
interval = setInterval(removeFirst, pause);
});</script>
In the last line I used:
interval = setInterval(removeFirst, pause);
...it calls the function removeFirst()every 3 seconds (3000 milliseconds) and in this way I create ad infinite loop.
If you have suggestions to improve the code please leave a comment. Thanks!
Are you an Adobe Flash developers? In this post you can find some really interesting Flash frameworks and graphical engines that help you develop quickly complex Rich Internet Application and Flash-based games. This list includes graphic UI elements, Flash and Flex components, a physical engine and an open source component to create isometric games with Flash.Gaia Framework
Gaia is an open-source front-end Flash Framework for AS3 and AS2 designed to dramatically reduce development time. Gaia is targeted at anyone who develops Flash sites. It provides solutions to the challenges and repeated tasks we all face with front-end Flash site development, such as navigation, transitions, preloading, asset management, site structure and deep linking. It provides speed and flexibility in your workflow and a simple API that gives you access to its powerful features. For an example of Gaia-made website take a look at Inglorious Basterds Official Site.Progression
Progression is a real powerful framework for Adobe Flash with focus on your creative work. You can just focus on user experience matter, how to transit, what dramatical effects you want to provide for your UI. Progression supports wide range of developing styles - from traditional timeline-based style to stylish class-based style. Progression packages all necessary functions of Web site development as component. You can develop web site using the component by drag & drop on the stage.Yahoo! ASTRA
Yahoo! ASTRA, is an ActionScript Toolkit for Rich Internet Applications. It provides a collection of Flash and Flex components, code libraries, toolkits and utilities developed by Yahoo! for ActionScript developers.ARP
ARP is an open source pattern-based Rich Internet Application framework for the Adobe Flash Platform. ARP currently supports Adobe Flash and Flex-based RIA development in AS 2 and AS 3 and is designed to be simple to use and lightweight.
JSwiff
The aim of the JSwiff project is to create an open source, pure Java framework for Macromedia Flash file creation and manipulation.
PushButton
The PushButton Engine is an Open Source, Flash game engine and framework that's designed for a new generation of games. PushButton Engine makes it easy to bring together great existing libraries and components for building Flash games. Spend less time on code, more time on building fun games.Fisix Engine
The Fisix Engine is a 2D verlet physics engine for Flash. It is written completely in AS3 in order to make use of flash player 9’s improved cpu capabilities. Although Flash is still slower than platforms such as c/c++, or java, which means that you most likely won’t be able to make the next Half-Life in flash, it doesn’t mean you can’t do really cool stuff with 2D particles, constraints, rigid bodies, etc. and make great looking games and simulations. Take a look at the demo here. The result is really awesome.
FFilmation
FFilmation is a really impressive, open source, Flash Engine to create isometric locations for Flash-based games.
Related Content
- 7 Powerful image carousels for web designers- Useful scripts and resources Facebook-inspired for web developers
- Best Image Croppers ready to use for web developers
- 10 Beautiful Web UI libraries
- File uploaders collection for web developers
- Interesting html FORM Validators for web developers
Some times ago I wrote a post about a structured process you must know to develop a web application and many readers asked to me to write something simpler about how to manage a small web project. I think there are not general rules for that but, without doubt, a correct approach can help you manage your projects more efficently and achieve quickly the final result.
I prepared this picture that illustrates a simple process with 3 main phases you can use as reference to manage a small web project:
1. Planning
Plan what you have to do, how you have to do it and in which time.
1.1 Define project scope
First step: Identify 4-5 high-level points which define the scope of your project. Don't underrate the importance of this step because if you are able to describe your project in a nutshell, it means you have a clear idea about what you have to do. So it will be simpler to realize it.
1.2. Identify main features to implement
Second step: Identify main features of your web project and add, for each of them, some details such as relationships, general notes, ecc. For example image to have a simple project with only two main features: user login and profile management. You can represent them in this way:
That's a simplified example only to give you an idea.
1.3. Define sitemap
Next step: define a sitemap of your project with files and folder. Be accurate in identifying all files to implement (HTML/PHP page, JavaScript files,...) because they are final deliverables to implement.
1.4. Plan a daily to-do list
Set daily milestones using a simple to-do list. So everyday you'll know exactly what you have to do. In this way, you can easy monitor your progress measuring what you did a certain day and what had to do.
2. Developing and testing
In this phase: write HTML, CSS, PHP, JavaScript... code and test small portions of code during developing (preliminary test). So it wil be simpler find bugs and errors. When your web application is ready, stress it with a final test to catch errors you didn't find during preliminary test which cause unexpected behaviors .
3. Publishing
Now you are ready to publish your project on-line. When your website or web application is on-line do a last test on what you published to assure you that it's all ok. That's all!
If you have some suggestion please leave a comment, thanks!
- Software development methodology
- Agile software development - Wikipedia, the free encyclopedia
- Manifesto for Agile Software Development
- Simple process to estimate times and costs in a web project
- How to manage a small web project: a simple approach
- Simple process to estimate times and costs in a web project
- The Deming Cycle: an application to web design
I prepared this picture that illustrates a simple process with 3 main phases you can use as reference to manage a small web project:
Plan what you have to do, how you have to do it and in which time.
1.1 Define project scope
First step: Identify 4-5 high-level points which define the scope of your project. Don't underrate the importance of this step because if you are able to describe your project in a nutshell, it means you have a clear idea about what you have to do. So it will be simpler to realize it.
1.2. Identify main features to implement
Second step: Identify main features of your web project and add, for each of them, some details such as relationships, general notes, ecc. For example image to have a simple project with only two main features: user login and profile management. You can represent them in this way:
That's a simplified example only to give you an idea.
1.3. Define sitemap
Next step: define a sitemap of your project with files and folder. Be accurate in identifying all files to implement (HTML/PHP page, JavaScript files,...) because they are final deliverables to implement.
1.4. Plan a daily to-do list
Set daily milestones using a simple to-do list. So everyday you'll know exactly what you have to do. In this way, you can easy monitor your progress measuring what you did a certain day and what had to do.
2. Developing and testing
In this phase: write HTML, CSS, PHP, JavaScript... code and test small portions of code during developing (preliminary test). So it wil be simpler find bugs and errors. When your web application is ready, stress it with a final test to catch errors you didn't find during preliminary test which cause unexpected behaviors .
3. Publishing
Now you are ready to publish your project on-line. When your website or web application is on-line do a last test on what you published to assure you that it's all ok. That's all!
If you have some suggestion please leave a comment, thanks!
External links
Take also a look at these links:- Software development methodology
- Agile software development - Wikipedia, the free encyclopedia
- Manifesto for Agile Software Development
Related posts
- Structured process you must know to develop a web application- Simple process to estimate times and costs in a web project
- How to manage a small web project: a simple approach
- Simple process to estimate times and costs in a web project
- The Deming Cycle: an application to web design
Hi everyone, how you can see I made some general improvements (... I hope...) to the layout of Woork considering several suggestions I received from you in the past months about the old design of my blog. What do you think about the result? Please let me know, leaving a comment. Thanks!
This post is a collection of some powerful carousels for images and text content ready to use in your web projects. It includes Agile Carousel, YUI Carousel, JCarousel, iCarousel (jQuery + MooTools) and a tutorial about how to implement a simple Flickr-like carousel using Prototype-UI. If you want to suggest other interesting scripts about this topic, please leave a comment. Thanks!1. Agile Carousel
Agile Carousel is a jQuery plugin that lets you create a super fexible carousel with advanced setting options. It supports text and images in each box and a navigator to display in which box you are. Take a look here to see it in action, it's absolutely my favourite!2. Yahoo! UI Carousel Control
The YUI Carousel Control provides a widget for browsing among a set of like objects arrayed vertically or horizontally in an overloaded page region. The "carousel" metaphor derives from an analogy to slide carousels in the days of film photography; the Carousel Control can maintain fidelity to this metaphor by allowing a continuous, circular navigation through all of the content blocks.3. jCarousel
jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).4. jCarousel Lite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.
5. Simple images carousel to create Flickr-like slideshows
This tutorial illustrates how to implement a simple images carousel to create a Flickr-like slideshow using Prototype-UI framework.6. iCarousel
iCarousel is a powerful carousel built over MooTools v1.1 fully configurable from the user just in some steps. You can change any default option just initializating the class with an object in JSON. It's tested in Internet Explorer, Firefox, Opera and Safari.7. Carousel.us
Carousel.us is an advanced Javascript 3D carousel which uses either MooTools framework and Reflection.js by Christophe Beyls, or Prototype.js and Script.aculo.us frameworks with Reflection.js. Take a look here to see it in action.