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.
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

First create a database table.

CREATE TABLE messages(
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" />');

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


return false;

PHP Code

<script type="text/javascript" src="
<script type="text/javascript" src="first.js">

$sql = mysql_query("SELECT * FROM messages order by msg_id desc limit 5;");
<?php echo $msg; ?>
<?php } ?>
<div id="more_updates"></div>
<div class="more" id="morebutton" >
<a id="<?php echo $msg_id; ?>" class="more" href="#" >
More </a>



Download Source

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


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

      Belwe Med
      WhimsyICG Bold
      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>