Micaela 19 de Noviembre de 2008 a las 12.00
   Imprimir artículo
elWebmaster.com

Cómo emular Twitter en nuestro sitio web


Twitter es uno de los servicios sociales de mensajer√≠a a tiempo real que m√°s popularidad ha cobrado en los √ļltimos tiempos, una de las cosas que m√°s atraen de esta utilidad es su simplicidad pero lo que muchos no saben es que tambi√©n es simple emularlo.

Desde la web NETTUTS nos traen un sencilla guía para lograr en pocos minutos una emulación de las funcionalidades de Twitter en nuestro propio sitio web
utilizando PHP, MySQL y MooTools (javascript).

En el sitio especifican ciertos supuestos desde los que se parten. El primero es que el √ļnico usuario del que seguimos la pista es la persona logueada y que este posee un s√≥lo ID. Tambi√©n se presupone que el usuario tiene Javascript y que la imagen del usuario est√° guardada en el siguiente directorio: /graphics/users/{user_id}.png y, finalmente, que se est√° utilizando MooTools 1.2 core con el plugin Fx.Slide.

El código PHP / MooTools / XHTML / CSS completo se vería así:

  1. 1.    <?php
  2. 2.
  3. 3.    //connect to the db
  4. 4.    $link = @mysql_connect('localhost','username','password');
  5. 5.    @mysql_select_db('blog',$link);
  6. 6.
  7. 7.    /* form submission post */
  8. 8.    if(isset($_POST['status']) && $_SESSION['user_id'])
  9. 9.    {
  10. 10.        //record the occurence
  11. 11.        $query = 'INSERT INTO nettuts1 (user_id, status, date_set) VALUES ('.$_SESSION['user_id'].',\''.mysql_escape_string(htmlentities(strip_tags($_POST['status']))).'\',NOW())';
  12. 12.        $result = @mysql_query($query,$link);
  13. 13.
  14. 14.        //die if this was done via ajax...
  15. 15.        if($_POST['ajax']) { die(); } else { $message = 'Status Updated!'; }
  16. 16.    }
  17. 17.
  18. 18.    ?>
  19. 19.    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  20. 20.    <html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">
  21. 21.    <head>
  22. 22.    <title>Twitter Emulation</title>
  23. 23.    <style type="text/css">
  24. 24.
  25. 25.        #message        { padding:7px 10px; float:left; width:350px; }
  26. 26.        #status     { border:1px solid #999; padding:5px; width:500px; height:75px; margin:5px 0; }
  27. 27.        #statuses   { width:512px; }
  28. 28.        #submit     { cursor:pointer; padding:5px; border:1px solid #ccc; float:left; margin:0 20px 0 0; }
  29. 29.
  30. 30.        .status-box { padding:10px 20px 10px 70px; height:48px; background:url(nettuts-david.jpg) 10px 10px no-repeat; border-bottom:1px dotted #aaa; }
  31. 31.        .status-box:hover   { background-color:#eee; }
  32. 32.        .success        { color:#008000; }
  33. 33.        .failure        { color:#f00; }
  34. 34.        .time           { color:#2a447b; font-size:10px; }
  35. 35.
  36. 36.    </style>
  37. 37.    <script type="text/javascript" src="moo1.2.js"></script>
  38. 38.
  39. 39.    <script type="text/javascript">
  40. 40.
  41. 41.        /* when the dom is ready */
  42. 42.        window.addEvent('domready', function() {
  43. 43.
  44. 44.            //create the message slider
  45. 45.            var fx = new Fx.Slide('message', {
  46. 46.                mode: 'horizontal'
  47. 47.            }).hide();
  48. 48.
  49. 49.            //make the ajax call to the database to save the update
  50. 50.            var request = new Request({
  51. 51.                url: '/dw-content/nettuts-twitter.php',
  52. 52.                method: 'post',
  53. 53.                onRequest: function() {
  54. 54.                    $('submit').disabled = 1;
  55. 55.                },
  56. 56.                onComplete: function(response) {
  57. 57.                    $('submit').disabled = 0;
  58. 58.                    $('message').removeClass('success').removeClass('failure');
  59. 59.                    (function() { fx.slideOut(); }).delay(2000);
  60. 60.                },
  61. 61.                onSuccess: function() {
  62. 62.                    //update message
  63. 63.                    $('message').set('text','Status updated!').addClass('success');
  64. 64.                    fx.slideIn();
  65. 65.
  66. 66.                    //store value, clear out box
  67. 67.                    var status = $('status').value;
  68. 68.                    $('status').value = '';
  69. 69.
  70. 70.                    //add new status to the statuses container
  71. 71.                    var element = new Element('div', {
  72. 72.                        'class': 'status-box',
  73. 73.                        'html': status + '<br /><span class="time">A moment ago</span>'
  74. 74.                    }).inject('statuses','top');
  75. 75.
  76. 76.                    //create a slider for it, slide it in.
  77. 77.                    var slider = new Fx.Slide(element).hide().slideIn();
  78. 78.
  79. 79.                    //place the cursor in the text area
  80. 80.                    $('status').focus();
  81. 81.
  82. 82.                },
  83. 83.                onFailure: function() {
  84. 84.                    //update message
  85. 85.                    $('message').set('text','Status could not be updated.  Try again.').addClass('failure');
  86. 86.                    fx.slideIn();
  87. 87.                }
  88. 88.            });
  89. 89.
  90. 90.            //when the submit button is clicked...
  91. 91.            $('submit').addEvent('click', function(event) {
  92. 92.
  93. 93.                //stop regular form submission
  94. 94.                event.preventDefault();
  95. 95.
  96. 96.                //if there's anything in the textbox
  97. 97.                if($('status').value.length && !$('status').disabled) {
  98. 98.
  99. 99.                    request.send({
  100. 100.                        data: {
  101. 101.                            'status': $('status').value,
  102. 102.                            'ajax': 1
  103. 103.                        }
  104. 104.                    });
  105. 105.
  106. 106.                }
  107. 107.
  108. 108.            });
  109. 109.
  110. 110.        });
  111. 111.
  112. 112.    </script>
  113. 113.    </head>
  114. 114.    <body>
  115. 115.
  116. 116.    <h3>What are you doing?</h3>
  117. 117.
  118. 118.    <form action="/dw-content/nettuts-twitter.php" method="post">
  119. 119.        <textarea name="status" id="status"></textarea><br />
  120. 120.        <input type="submit" value="Update Status" id="submit" />
  121. 121.        <div id="message"></div>
  122. 122.    </form>
  123. 123.
  124. 124.    <div class="clear"></div>
  125. 125.    <p> </p>
  126. 126.    <h3>Recent Updates</h3>
  127. 127.
  128. 128.    <div id="statuses">
  129. 129.        <?php
  130. 130.            //get the latest 20
  131. 131.            $query  = 'SELECT status, DATE_FORMAT(date_set,\'%M %e, %Y @ %l:%i:%s %p\') AS ds FROM nettuts1 ORDER BY date_set DESC LIMIT 20';
  132. 132.            $result = mysql_query($query,$link) or die(mysql_error().': '.$query);
  133. 133.            while($row = mysql_fetch_assoc($result))
  134. 134.            {
  135. 135.                echo '<div class="status-box">',stripslashes($row['status']),'<br /><span class="time">',$row['ds'],'</span></div>';
  136. 136.            }
  137. 137.        ?>
  138. 138.    </div>
  139. 139.    </body>
  140. 140.    </html>

Para descargar el código haz clic aquí>>

Fuente: NETTUTS


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión