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

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

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

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

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

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

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

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

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

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

Код для вставки статьи на сайт / в блог

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


Код для вставки статьи на сайт / в блог


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

Как видим, ничего сложного, самая обычная форма, состоящая из одного . Никаких Submit-ов и Reset-ов нет, что и понятно. Обратим внимание на события onFocus и onClick – при наступлении любого из них (либо мы кликнули мышкой в это поле, либо добрались с помощью клавиатуры) происходит выделение текста. Хорошая идея, пользователю остается только нажать Ctrl+C либо вызвать контекстное меню браузера и выбрать пункт “Копировать”. Все стили и (обратите внимание!) ссылки прописаны прямо в html-коде. Ссылки, между прочим, сделаны абсолютные, о чем и нам следует не забыть при разработке нашего кода.</p> <p>Ну, вроде бы, со всем разобрались. Закатываем рукава, открываем любимую IDE – и приступаем к кодированию.</p> <h2>Реализация задуманного. Собственно код для вставки на другие ресурсы.</h2> <p>Сначала рассмотрим самый простой вариант, когда текст нашего анонса (а как правило, в html-код анонса вставляется и картинка) для вставки содержится в одной единственной переменной, которую мы и передаем в функцию для создания вывода в контейтер <textarea>.</p><div class="code"><pre><code> function showTextAreaCode($text) { $result = checkText($text); // обязательно проверяйте входящий текст!!! Функцию проверки реализовывать здесь я не буду return '<div style="здесь задаем нужные стили, учтите, что никакой привязки к Вашим CSS-файлам здесь быть не может">'.$result.'</div>'; } </code></pre></div> <p>Теперь достаточно вызвать эту функцию и впихнуть в контейнер, что легко делается, например, таким вот образом:</p> <div class="code"><pre><code> $text = 'Здесь и будет весь html-код анонса.'; print('<form><textarea>'.showTextAreaCode($text).'');

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


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

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


$text = 'Первый параграф
Второй параграф';
print(''.onlyFirstParagraph($text).'');

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

Понятное дело, что публикуя только код, мы, по сути, предлагаем предполагаемому распространителю халявных ссылочек на наш сайт натурального кота в не менее натуральном мешке. Это совсем не есть айс, поэтому нужно показать, как же будет выглядеть тот самый красивый и правильный html, который он у нас так жаждет забрать и запостить где-то у себя. В принципе, можно оставить все как есть, ведь мы же размещаем нужный нам код в , именно его и нужно выводить безо всяких украшательств, ну, разве что, заключить его в какой-нибудь <div>, чтобы можно было подстроить отступы от формы и т.д. Напомню: никаких стилей, которые применяются к тексту, все эти стили должны быть прописаны в атрибутах style html-тегов.</p> <div class="code"><pre><code> $text = '<p>Первый параграф</p><p>Второй параграф</p>'; print('<div id=”preview”>'.onlyFirstParagraph($text).'</div>'); </code></pre></div> <h2>Реализация. Последний штрих.</h2> <p>На этом можно бы уже и остановиться, потому как код для вставки у нас уже есть, его превью – тоже. Но раз уж мы пробуем подражать тому ресурсу, который был заявлен в самом начале этой статьи (ну правда, натуральная статья уже получается, а не пост), то давайте сделаем к этому всему еще и ссылочку “скрыть/показать превью”. Точнее, не сделаем, а самым наглым образом используем то, что уже было написано в нашем сайте-источнике, ну разве что совсем чуть-чуть подкорректируем, уберем кое-что лишнее.</p> <p>Вот что получается в результате:</p> <div class="code"><pre><code> $text = '<p>Первый параграф</p><p>Второй параграф</p>'; print('<form><textarea cols="50" rows="5" onFocus="this.select();" onClick="this.select();">'.onlyFirstParagraph($text).''); print('Посмотреть, как это будет выглядеть в браузере'); print('

'.onlyFirstParagraph($text).'

'); print('');

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

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

Внимание! При копировании данного материала обязательна прямая текстовая ссылка на эту страницу.

<< вернуться