In this post I want to suggest you three simple and useful ways to hyphenate text on your web pages using JavaScript or PHP. If you take a look at W3.org documentation you can find this explanation about hyphenation:
"In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored."
To hyphenate text I found the following practical solutions:
Hyphenator.js
This script automatically hyphenates texts on websites and runs on any modern browser that supports JavaScript and the soft hyphen (­). It runs on the client in order that the HTML source of the website may be served clean and svelte and that it can respond to text resizings by the user. The result is really great:
The usage of this script is really simple. You have to include the script into your pages in the <head> tag:
...then you have to invoke the script adding this code after the previous code:
...and use this HTML code to active hyphenation:
Take a look at this example for a live preview.
You can also choose the language changing the property "lang" (actually the script support 16 languages, for the full list take a look here).
phpHyphenator
The phpHyphenator is a PHP port of the JavaScript hyphenator.js by Mathias Nater for automatic hyphenation in web pages using soft hyphens. The hyphenation algorithm needs large pattern files for doing the hyphenation and and using JavaScript can slow down page loading. PHP instead is doing hyphenation directly on the server wihtout sending the pattern files to the client.
Online Soft Hyphenation Generator
You can also try this interesting on-line HTML Soft Hyphenation Generator a configurable automatic hyphenation (soft or hard) generator for HTML text based on phpHypenator.
Any suggestion about this topic? Please leave a comment, thanks!
"In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored."
To hyphenate text I found the following practical solutions:
Hyphenator.js
This script automatically hyphenates texts on websites and runs on any modern browser that supports JavaScript and the soft hyphen (­). It runs on the client in order that the HTML source of the website may be served clean and svelte and that it can respond to text resizings by the user. The result is really great:
The usage of this script is really simple. You have to include the script into your pages in the <head> tag:
<script src="hyphenator.js" type="text/javascript"></script>
...then you have to invoke the script adding this code after the previous code:
<script type="text/javascript">
Hyphenator.run();
</script>
Hyphenator.run();
</script>
...and use this HTML code to active hyphenation:
<p class="hyphenate text" lang="en">
Your text here...
</p>
Your text here...
</p>
Take a look at this example for a live preview.
You can also choose the language changing the property "lang" (actually the script support 16 languages, for the full list take a look here).
phpHyphenator
The phpHyphenator is a PHP port of the JavaScript hyphenator.js by Mathias Nater for automatic hyphenation in web pages using soft hyphens. The hyphenation algorithm needs large pattern files for doing the hyphenation and and using JavaScript can slow down page loading. PHP instead is doing hyphenation directly on the server wihtout sending the pattern files to the client.Online Soft Hyphenation Generator
You can also try this interesting on-line HTML Soft Hyphenation Generator a configurable automatic hyphenation (soft or hard) generator for HTML text based on phpHypenator.
Any suggestion about this topic? Please leave a comment, thanks!
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.
In this tutorial I want to explain how to implement a simple launching soon page using PHP and jQuery. What's a launching soon page? In general it's a page that informs the visitors of a website under construction about when the website is going to be online and allows them to leave their emails in order to be updated when the website is on-line. A typical launching soon page contains a countdown and a form that collects emails from interested visitors. In this tutorial I implemented a launching soon page like this:
Take a look at the live preview here.
This page is very simple to modify and customize using just some lines of CSS code. You can also add the logo of your company and all elements you want with some lines of HTML code. Download the source code of this tutorial you can customize and reuse in your web project for free!
A little introduction
How I said this package is ready to use and contains these files:
- index.php: the launching soon page final interface (countdow + form)
- config.php: enables database connection
- insert.php: PHP code to add emails into a database table
- js/jquery-1.3.2.min.js: jQuery framework
- js/countdown.js: the countdown script
1. index.php
index.php is the final interface of your launching soon page. How I said it contains a countdown and a form to allow users to leave their emails.
The countdown script
In order to implement the countdown I used this dynamic countdown script that lets you count down to relative events of a future date/time. This future date, while the same for everyone, occurs differently depending on the time zone they're in. The result is here and it's fully customizable changing some lines of CSS code:
The only thing you have to do is to add this line of code in the <head> tag of the page:
Then, in the tag <body> add the following lines of code to display the countdown:
To set a target date you have to change this line modifying July 6 and the hour 0:0:00 with your target date (for example 25 december):
...if your target date is 25 December the previous line becomes:
If you want to change the style of the countdown you have to modify the following CSS classes:
In particular .count_down{} changes the format of the numbers and .count_down sup{} changes the style of the text "days", "hours", "minutes".
jQuery and the input form
Ok, the countdown is ready! Next step: add this line of code to include jQuery in the <head> tag of the page:
Now, in the tag <body> add a simple form with an input field:
...and add this layer to display a custom message when an user submit the form:
...the result after the submission is here:
The form with the input field disappears with a nice fade-out effect and a success message appears in its place. Now, in the <head> tag, after the line of code that includes jQuery, add this script to enable ajax functionalities to insert emails added from users into a database table without reload the page:
2. insert.php
insert.php contains some lines of PHP code to insert an email address into a database table. In this example I created a table EMAIL with just one attribute "email". PHP code is very simple:
Now, remember to modify your database connection parameters in config.php and upload all files on your testing server. Than load index.php and see the result!
Take a look at the live preview here.
That's all! Download the source code of this tutorial you can customize and reuse in your web project for free! Leave a comment for your suggestions, thanks!
This page is very simple to modify and customize using just some lines of CSS code. You can also add the logo of your company and all elements you want with some lines of HTML code. Download the source code of this tutorial you can customize and reuse in your web project for free!
A little introduction
How I said this package is ready to use and contains these files:
- index.php: the launching soon page final interface (countdow + form)
- config.php: enables database connection
- insert.php: PHP code to add emails into a database table
- js/jquery-1.3.2.min.js: jQuery framework
- js/countdown.js: the countdown script
1. index.php
index.php is the final interface of your launching soon page. How I said it contains a countdown and a form to allow users to leave their emails.
The countdown script
In order to implement the countdown I used this dynamic countdown script that lets you count down to relative events of a future date/time. This future date, while the same for everyone, occurs differently depending on the time zone they're in. The result is here and it's fully customizable changing some lines of CSS code:
The only thing you have to do is to add this line of code in the <head> tag of the page:
<script type="text/javascript" src="js/countdown.js"></script>
Then, in the tag <body> add the following lines of code to display the countdown:
<div id="count_down_container"></div>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
To set a target date you have to change this line modifying July 6 and the hour 0:0:00 with your target date (for example 25 december):
new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
...if your target date is 25 December the previous line becomes:
new cdtime("count_down_container", "December 25, "+currentyear+" 0:0:00")
If you want to change the style of the countdown you have to modify the following CSS classes:
.count_down{...}
.count_down sup{...}
.count_down sup{...}
In particular .count_down{} changes the format of the numbers and .count_down sup{} changes the style of the text "days", "hours", "minutes".
jQuery and the input form
Ok, the countdown is ready! Next step: add this line of code to include jQuery in the <head> tag of the page:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"> </script>
Now, in the tag <body> add a simple form with an input field:
<form id="submit_leave_email">
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>
...and add this layer to display a custom message when an user submit the form:
<div id="update_success">E-mail added!>/div>
...the result after the submission is here:
The form with the input field disappears with a nice fade-out effect and a success message appears in its place. Now, in the <head> tag, after the line of code that includes jQuery, add this script to enable ajax functionalities to insert emails added from users into a database table without reload the page:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$("form#submit_leave_email").submit(function() {
var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});
</script>var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});
2. insert.php
insert.php contains some lines of PHP code to insert an email address into a database table. In this example I created a table EMAIL with just one attribute "email". PHP code is very simple:
<?php
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);
$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);
$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>
Now, remember to modify your database connection parameters in config.php and upload all files on your testing server. Than load index.php and see the result!
Take a look at the live preview here.
That's all! Download the source code of this tutorial you can customize and reuse in your web project for free! Leave a comment for your suggestions, thanks!
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!
In the past months I received a lot of request to write a tutorial for beginners in order to explain how to implement a Post-to-Wall Facebook-like. So, I prepared this very simple example which helps everyone understand how to implement this feature in a website using just some lines of PHP and JavaScript code.
Take a mind, every post in the Facebook Wall contains a lot of information (user, sender, message content, date, number of comments, ...):
But how I said, this tutorial is for Ajax/jQuery/PHP beginners. So I decided to simplify the original Wall using just a single information: the message content.
In this tutorial we have these files:
- confing.php (database connection parameters)How the Wall works?
- index.php
- insert.php
- jquery.js
index.php contains a form with id "submit_form" with an input text with id "message_wall". When an user submits a new message. Then the new message is appends to top of the ul list with id "wall" with a nice fade-in effect (with jQuery). Ok, now take a look at the code.
1. index.php
index.php is very simple and contains just simple HTML code:
<form id="submit_wall">
<label for="message_wall">Share your message on the Wall</label>
<input type="text" id="message_wall" />
<button type="submit">Post to wall</button>
</form>
<ul id="wall">
</ul>
<label for="message_wall">Share your message on the Wall</label>
<input type="text" id="message_wall" />
<button type="submit">Post to wall</button>
</form>
<ul id="wall">
</ul>
The <ul> list with id "wall" is the "container" of messages which are posted into the wall.
2. JavaScript Code
Open index.php and include jQuery in the <head> tag of the page:
<script type="text/javascript" src="jquery/jquery.js"> </script>
...then add this simple function to enable Ajax functionalities to insert the message posted from the user into a database table without reload the page:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$("form#submit_wall").submit(function() {
var message_wall = $('#message_wall').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"message_wall="+ message_wall,
success: function(){
$("ul#wall").prepend("<li style="display: none;">"+message_wall+"</li>");
$("ul#wall li:first").fadeIn();
}
});
return false;
});
});
</script>var message_wall = $('#message_wall').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"message_wall="+ message_wall,
success: function(){
$("ul#wall").prepend("<li style="display: none;">"+message_wall+"</li>");
$("ul#wall li:first").fadeIn();
}
});
return false;
});
});
.prepend(...) is a jQuery function to insert elements inside, at the beginning, of a specific element (in this case UL list with id wall -->$("ul#wall")). When the new message is added into the list is hidden (display:none). Then it appears with a fade-in effect:
$("ul#wall li:first").fadeIn();
ul#wall:first: gets the first li element (the last added) into the ul list with id "#wall".
3. insert.php
insert.php contains some lines of PHP code to insert the new message into a database table. In this example I created a table WALL with just one attribute "message". PHP code is very simple:
<?php
if(isset($_POST['message_wall'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$message = strip_tags($_POST['message_wall']);
$sql = 'INSERT INTO WALL (message) VALUES( "'.$message.'")';
mysql_query($sql);
echo $message;
} else { echo '0'; }
?>
if(isset($_POST['message_wall'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$message = strip_tags($_POST['message_wall']);
$sql = 'INSERT INTO WALL (message) VALUES( "'.$message.'")';
mysql_query($sql);
echo $message;
} else { echo '0'; }
?>
That's all! Download the source code ready to use in your web projects.
Add a comment for questions or suggestions, thanks!
My Tiny TodoList is a totally free, simple open source todolist written in PHP and jQuery released from Max Pozdeev and based on my original MyToDoList application.
Using MyTiny TodoList you can add, modify or delete tasks, mark a task as completed and set task priority. Max improved a lot the interface with some nice jQuery effects and other general improvements. The result is very interesting and I suggest you to take it a look.
Max Pozdeev MyTinyTodoList Website
MyTinyTodoList Demo
Some screenshots:
Install My Tiny TodoList
1. Download, unpack and upload to your site.
2. If you want to use Mysql database instead of Sqlite - uncomment the line begining with $config['mysql'] in file 'init.php' and specify your settings as described in file.
Otherwise sqlite database file 'todolist.db' will be created in directory 'db'. If no - create it manually and make it writeble for webserver/php.
3. Open in your browser file 'dba.php' from your site and create tables in databse.
4. Open 'index.php' in your browser to run the application.
Using MyTiny TodoList you can add, modify or delete tasks, mark a task as completed and set task priority. Max improved a lot the interface with some nice jQuery effects and other general improvements. The result is very interesting and I suggest you to take it a look.
Max Pozdeev MyTinyTodoList Website MyTinyTodoList DemoSome screenshots:
Install My Tiny TodoList
1. Download, unpack and upload to your site.
2. If you want to use Mysql database instead of Sqlite - uncomment the line begining with $config['mysql'] in file 'init.php' and specify your settings as described in file.
Otherwise sqlite database file 'todolist.db' will be created in directory 'db'. If no - create it manually and make it writeble for webserver/php.
3. Open in your browser file 'dba.php' from your site and create tables in databse.
4. Open 'index.php' in your browser to run the application.
If you are looking for free resources to learn Ajax, PHP, CSS and JavaScript take a look at this collection with six interesting online presentations about these topics. The list includes a short introduction to Ajax, how to write modular CSS code, PHP Object Model fundamentals and an overview about the most popular JavaScript libraries.
1. Ajax 101 | Workshop
Author: Bill Scott | This presentation on SlideShare
Introduction to programming with Ajax. Covers XMLHttpRequest, XML, JSON, JavaScript, HTML, CSS, Dom Scripting, Event Handling with some examples from YUI library.
2. Modular CSS
Author: Russ Weakley | This presentation on Slide Share
A clearly explained modular system that allows you to hide and show CSS rules to specific browsers without the need for extensive hacks or workarounds.
3. Understanding the PHP Object Model
Author: Sebastian Bergmann | This presentation on SlideShare
This talk will give an overview of PHP's object model, covering both basic OOP concepts such as interfaces, classes, and objects as well as PHP's “magic” interceptor methods.
5. jQuery in 15 minutes
Author: Simon | This presentation on SlideShare
A short introduction to jQuery in particular about functions, collections, grabbing values and chaining.
6. JavaScript Library Overview
Author: Jeresig | This presentation on SlideShare
An interesting Overview about the most popular JavaScript libraries (jquery, prototype, Scriptaculous...) for web designers.
1. Ajax 101 | Workshop
Author: Bill Scott | This presentation on SlideShare
Introduction to programming with Ajax. Covers XMLHttpRequest, XML, JSON, JavaScript, HTML, CSS, Dom Scripting, Event Handling with some examples from YUI library.
2. Modular CSS
Author: Russ Weakley | This presentation on Slide Share
A clearly explained modular system that allows you to hide and show CSS rules to specific browsers without the need for extensive hacks or workarounds.
3. Understanding the PHP Object Model
Author: Sebastian Bergmann | This presentation on SlideShare
This talk will give an overview of PHP's object model, covering both basic OOP concepts such as interfaces, classes, and objects as well as PHP's “magic” interceptor methods.
5. jQuery in 15 minutes
Author: Simon | This presentation on SlideShare
A short introduction to jQuery in particular about functions, collections, grabbing values and chaining.
6. JavaScript Library Overview
Author: Jeresig | This presentation on SlideShare
An interesting Overview about the most popular JavaScript libraries (jquery, prototype, Scriptaculous...) for web designers.