Украшаем сайт – пишем выдачу html-кода для вставки на других ресурсах.

запостил: 07 Марта 2010 г.

Идею для этого поста мне подкинул один из читателей данного блога, а именно @veschatel - Бродячий Проповедник. Тема того, чем мы сейчас будем заниматься, уже указана в заголовке этого поста, так что без долгих разглагольствований приступим к реализации заявленной идеи, отвлечемся лишь на один момент...

Зачем нужны такие html-коды?

Многие сайты используют такие коды как стремление заработать лишние ссылки на себя (которые, как мы уже знаем, лишними не бывают никогда). Предоставляя html-код для вставки на другие ресурсы, мы облегчаем задачу людям, которые захотят поставить на Ваш сайт (или какой-либо материал сайта) не только ссылку, но и краткое описание. Как результат – такие обзоры разместит даже самый ленивый, естественно, при условии, что Ваш ресурс придется ему по душе. Я уж не говорю о всевозможных счетчиках и виджетах, вспомните, как раскрутилась та же odnaknopka.ru, предоставляя простенький виджет по добавлению страницы в различные сети социальных закладок.

За основу того, как это все должно выглядеть, мне был выдана вот эта страница. Хорошо, давайте же уже создадим что-то похожее.

Изучаем исходники. Раскрываем тему <tits></tits>

Определяем, что же нас на этой странице интересует

Собственно, на руках нет ничего, кроме этой страницы. Грустно, правда? Ничуть! Если создатели сайта не пользовались обфускаторами, то нам доступен как минимум html-код страницы, что, на самом деле, не так уж и мало. А если добавить к этому еще и CSS да JavaScript-файлы, то материалов для изучения у нас более чем достаточно.

Легким движением Ctrl+F находим строчку:

<h3 style="clear:both;">Код для вставки статьи на сайт / в блог</h3>

от нее и начинается то, что нам нужно, пока что остановимся на ближайшем закрывающем теге <form>

<h3 style="clear:both;">Код для вставки статьи на сайт / в блог</h3>
<form action="" name="lj_cod" id="lj_cod">
<textarea cols="50" rows="5" onFocus="this.select();" onClick="this.select();"><table style="margin:20px;" border=0 cellspacing=0 cellpadding=0><tr><td style="font-family:Arial;font-size:80%;padding:30px 30px 20px 30px;border:1px solid #cccccc;background:#ffffff;"><a href="http://www.pravoslavie.ru/jurnal/34249.htm" style="color:black;text-decoration:none;" target="_blank"><img src="http://www.pravoslavie.ru/sas/image/100275/27569.t.jpg" border=0 align="left" alt="«К мудрости ступенька». Часть 2" style="margin:0px 10px 10px 0px;border:1px solid black;"><em style="display:block;color:792e00;padding-bottom:2px;">Елена Лебедева</em><strong style="display:block;font-size:130%;text-transform:uppercase;text-decoration:underline;">«К мудрости ступенька». Часть 2</strong><em style="display:block;padding:2px 0px 0px 0px;line-height:103%;font-size:117%;text-transform:none;"></em><span style="display:block;padding:5px 0px 10px 0px;">Уникальная гимназия Франца Креймана, куда принимали всех исключенных из казенных гимназий учеников, стоит особняком среди московских гимназий как самый оригинальный педагогический эксперимент. Она задумывалась и как образовательное, и как воспитательное заведение, призванное подготовить к самостоятельной жизни достойного «человека-христианина» и гражданина, полезного для общества и приученного школой к труду, хотя бы и на скромном поприще. А ключ к такому воспитанию, прежде всего, религия: «сначала должно научиться быть людьми, а потом уже учиться быть полезными гражданами».</span></a></td></tr></table></textarea>
</form>

Как видим, ничего сложного, самая обычная форма, состоящая из одного <textarea>. Никаких Submit-ов и Reset-ов нет, что и понятно. Обратим внимание на события onFocus и onClick – при наступлении любого из них (либо мы кликнули мышкой в это поле, либо добрались с помощью клавиатуры) происходит выделение текста. Хорошая идея, пользователю остается только нажать Ctrl+C либо вызвать контекстное меню браузера и выбрать пункт “Копировать”. Все стили и (обратите внимание!) ссылки прописаны прямо в html-коде. Ссылки, между прочим, сделаны абсолютные, о чем и нам следует не забыть при разработке нашего кода.

Ну, вроде бы, со всем разобрались. Закатываем рукава, открываем любимую IDE – и приступаем к кодированию.

Реализация задуманного. Собственно код для вставки на другие ресурсы.

Сначала рассмотрим самый простой вариант, когда текст нашего анонса (а как правило, в html-код анонса вставляется и картинка) для вставки содержится в одной единственной переменной, которую мы и передаем в функцию для создания вывода в контейтер <textarea>.

function showTextAreaCode($text)
{
$result = checkText($text); // обязательно проверяйте входящий текст!!! Функцию проверки реализовывать здесь я не буду
return '<div style="здесь задаем нужные стили, учтите, что никакой привязки к Вашим CSS-файлам здесь быть не может">'.$result.'</div>';
}

Теперь достаточно вызвать эту функцию и впихнуть в контейнер, что легко делается, например, таким вот образом:

$text = 'Здесь и будет весь html-код анонса.';
print('<form><textarea>'.showTextAreaCode($text).'</textarea></form>');

Получаем нужные строки из исходного текста Усложним задачу, теперь будем выдирать наш анонс прямо из текста статьи. Аналогично считаем, что текст статьи находится в переменной $text. В принципе, здесь достаточно распарсить содержимое нашей переменной (давайте, будем для примера забирать только первый абзац).

function onlyFirstParagraph($text)
{
$temp = explode( '</p>', $text); // разбиваем текст на параграфы (возможно, это грубо, но с регулярками сейчас не буду заморачиваться, это ведь простой пример)
return showTextAreaCode($temp[0].'</p>'); // возвращаем первый параграф, картинка обычно бывает до начала параграфа, так что вернется и она
}

Вызывается этот код аналогично:

$text = '<p>Первый параграф</p><p>Второй параграф</p>';
print('<form><textarea>'.onlyFirstParagraph($text).'</textarea></form>');

Продолжаем реализацию. Делаем поле для просмотра анонса.

Понятное дело, что публикуя только код, мы, по сути, предлагаем предполагаемому распространителю халявных ссылочек на наш сайт натурального кота в не менее натуральном мешке. Это совсем не есть айс, поэтому нужно показать, как же будет выглядеть тот самый красивый и правильный html, который он у нас так жаждет забрать и запостить где-то у себя. В принципе, можно оставить все как есть, ведь мы же размещаем нужный нам код в <textarea>, именно его и нужно выводить безо всяких украшательств, ну, разве что, заключить его в какой-нибудь <div>, чтобы можно было подстроить отступы от формы и т.д. Напомню: никаких стилей, которые применяются к тексту, все эти стили должны быть прописаны в атрибутах style html-тегов.

$text = '<p>Первый параграф</p><p>Второй параграф</p>';
print('<div id=”preview”>'.onlyFirstParagraph($text).'</div>');

Реализация. Последний штрих.

На этом можно бы уже и остановиться, потому как код для вставки у нас уже есть, его превью – тоже. Но раз уж мы пробуем подражать тому ресурсу, который был заявлен в самом начале этой статьи (ну правда, натуральная статья уже получается, а не пост), то давайте сделаем к этому всему еще и ссылочку “скрыть/показать превью”. Точнее, не сделаем, а самым наглым образом используем то, что уже было написано в нашем сайте-источнике, ну разве что совсем чуть-чуть подкорректируем, уберем кое-что лишнее.

Вот что получается в результате:

$text = '<p>Первый параграф</p><p>Второй параграф</p>';
print('<form><textarea cols="50" rows="5" onFocus="this.select();" onClick="this.select();">'.onlyFirstParagraph($text).'</textarea></form>');
print('<a href="javascript:void();" onClick="turnOnOff();" id="showBtn"><u>Посмотреть, как это будет выглядеть в браузере</u></a>');
print('<div id="art">'.onlyFirstParagraph($text).'</div>');
print('<script>
var ind = 0;
turnOnOff();

function turnOnOff()
{
var lj_adv=document.getElementById("art");
var lj_title=document.getElementById("showBtn");
if (ind)
{
lj_adv.style.display="none";
ind = 0;
lj_title.innerHTML = "<u>Посмотреть, как это будет выглядеть в браузере</u>";
}
else
{
lj_adv.style.display="block";
ind = 1;
lj_title.innerHTML = "<u>Скрыть результат показа</u>";
}
}
</script>');

Приводить кодовый блок PHP с его парой функций я уж не буду, наверняка, у Вас и так они уже собраны воедино. Проверил на своем хосте – код рабочий (а куда бы он, собственно, делся-то). Собственно, все, задачка, надеюсь, успешно решена. За сим разрешите откланяться, открыть бутылочку темного пива и пожелать Вам, уважаемый читатель, приятного кодинга. И до скорых постов, конечно.

P.S. Единственное, что для меня осталось загадкой в сырцах исходной страницы – зачем было шифровать имя автора статьи?

Если копируете материал себе в блог, пожалуйста, поставьте прямую текстовую ссылку на эту страницу.