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