Гостевая в стиле TWITTER

Опубликовал 17.07.2010 в рубрике php | 5 комментария(ев)

Гостевая в стиле TWITTER

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Мне всегда очень нравилась лента социальной сети Twitter. Вот решил написать урок по использованию знаменитого скрипта. Она удобна тем, что очень проста в установке на любом хостинге, где есть MySQL и поддержка PHP.

Хочу сразу заметить, что данный урок никаким боком не относится к Jimdo. Если только зафреймить индексную страницу. Но это лишнее и требует дополнительных знаний и хостинга.

Чтобы установить скрипт на свой хостинг, понадобится его скачать. К счастью сделать это легче простого. Я уже русифицировал скрипт, а так же перевел его в универсальную кодировку, потому проблемы ваши минимизиовал. Естественно, что для работы скрипта вам понадобится залить все файлы на сервер.

В общем сначала нам нужно создать базу данных и сделать запрос.

Создаем таблицу в базе данных

CREATE TABLE `demo_twitter_timeline` (
  `id` int(10) NOT NULL auto_increment,
  `tweet` varchar(140) collate utf8_unicode_ci NOT NULL default '',
  `dt` datetime NOT NULL default '0000-00-00 00:00:00',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Дальше мы должны сделать нашу ленту такой же, как в twitter. Для этого мы создадим demo.css. Почему именно я делаю акцент на CSSCascading Style Sheets? Все дело в том, что в этом файле можно изменить стилевую основу. Поэтому можете поэкспериментировать с цветами.

Создадим demo.css

#twitter-container{
        -moz-border-radius:12px;
        -khtml-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius:12px;

        border:6px solid #f5f5f5;

        padding:10px;
        width:600px;

        font-size:11px;
        font-family:'Lucida Grande',sans-serif;
        color:#333333;
}

label{
        font-size:20px;
        display:block;
}

.counter{
        color:#CCCCCC;
        float:right;
        font-family:Georgia,serif;
        font-size:32px;
        font-weight:bold;
        height:40px;
        overflow:hidden;
}

textarea{
        width:594px;
        height:38px;
        margin:5px 0 10px 0;

        border:1px solid #AAAAAA;
        padding: 4px 2px;

        font-family:'Lucida Grande',sans-serif;
        overflow:auto;
        font-size:14px;
}

.clear{
        clear:both;
}

.submitButton{
        color:#666666;
        font-size:14px;
        height:32px;
        width:115px;

        -moz-border-radius:6px;
        -khtml-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius:6px;

        border:1px solid #cccccc;
        background:url(img/button_bg.gif) repeat-x #f5f5f5;

        cursor:pointer;
        float:right;
}

.submitButton:hover{
        background-position:bottom;
        border-color:#dddddd;
        color:#333333;
}

.inact,.inact:hover{
        background:#f5f5f5;
        border:1px solid #eeeeee;
        color:#aaaaaa;
        cursor:auto;
}

.latest{
        color: #666666;
}

ul.statuses{
        margin:10px 0;
}

ul.statuses li {
        position:relative;
        border-bottom:1px dashed #D2DADA;
        padding:15px 15px 15px 10px;
        list-style:none;
        font-size:14px;
}

ul.statuses li:first-child{
        border-top:1px dashed #D2DADA;
}

ul.statuses li:hover {
        background-color:#F7F7F7;
}

h3.timeline{
        margin-top:20px;
        color:#999999;
        font-size:20px;
        font-weight:normal;
}

div.tweetTxt{
        float:left;
        width:498px;
        overflow:hidden;
}

ul.statuses a img.avatar{
        float:left;
        margin-right:10px;
        border:1px solid #446600;
}
div.date{
        line-height:18px;
        font-size:12px;
        color:#999999;
}

li a, li a:visited {
        color:#007bc4;
        text-decoration:none;
        outline:none;
}

li a:hover{
        text-decoration:underline;
}

Теперь самое главное! Необходимо сконнектиться с нашей базой.

Соединяемся с базой данных при помощи connect.php

/* Настройки нашей датабазы */

$db_host                = '_____________';
$db_user                = '_____________';
$db_pass                = '_____________';
$db_database            = '_____________';

/* Конец настроек */

Основные моменты описаны. Теперь необходимо обратиться к нашей станице index.php. Если гостевая отобразилась корректно и новые записи нормально добавляются, то вы все сделали правильно!

Информация о загрузках

Гостевая в стиле TWITTER (9.9 KB, 36 скачиваний)
Файл залит 17.07.2010 в 17:48

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Добро пожаловать на ruVisio

Если вы еще не зарегистрированы, то желательно сделать это побыстрее :)

Авторизация

Забыли пароль?

Регистрация