Social Networks

This is one of the best tutorial, which describe step by step to create Create a Twitter-Like “Load More” button page.
Twitter and the Apple App Store use a brilliant technique for loading more information which reduce the load of the page also; you click the link and fresh items magically appear on the screen.
twitter-like-load-more-php
Looks good. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This post includes –

  1. Live demo for Create a Twitter-Like “Load More” Button
  2. Download Script for Create a Twitter-Like “Load More” Button
twitter-like-read-more

First create a database table.

CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
msg TEXT
);

javascript code.

<script type="text/javascript" >
$(function() {
$(".more").click(function() {
var element = $(this);
var msg = element.attr("id");
$("#morebutton").html('<img src="ajax-loader.gif" />');

$.ajax({
type: "POST",
url: "more_ajax.php",
data: "lastmsg="+ msg,
cache: false,
success: function(html){

$("#more_updates").append(html);
$(".more").remove();

}
});
return false;
});
});
</script>

PHP Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" src="first.js">
</script>

<?php
include('db.php');
$sql = mysql_query("SELECT * FROM messages order by msg_id desc limit 5;");
while($row=mysql_fetch_array($sql))
{
$msg_id=$row['msg_id'];
$msg=$row['msg'];
?>
<div>
<?php echo $msg; ?>
</div>
<?php } ?>
<div id="more_updates"></div>
<div class="more" id="morebutton" >
<a id="<?php echo $msg_id; ?>" class="more" href="#" >
More </a>
</div>
</div>

 

Demo

Download Source

 Check the Below Demo which I have created for my Posts Twitter-Like “Load More” Page. Write me to ask more …

Demo

    • These are the fonts I am missing and cannot find;

      Belwe Med
      WhimsyICG Bold
      Helvetica
      Adobe Garmond Pro classic
      Killian Normal
      Myriad Pro Bold Italic
      Circus Normal

      How do I find them?

  1. Pankaj Jha ,

    Could you guide me building Load more button with JSF / Jquer/ AJax .. basically am not using PHP in my app.

    thanks so much.

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>