Украшаем сайт – пишем выдачу html-кода для вставки на других ресурсах.запостил: 07 Марта 2010 г.
Зачем нужны такие html-коды?Многие сайты используют такие коды как стремление заработать лишние ссылки на себя (которые, как мы уже знаем, лишними не бывают никогда). Предоставляя html-код для вставки на другие ресурсы, мы облегчаем задачу людям, которые захотят поставить на Ваш сайт (или какой-либо материал сайта) не только ссылку, но и краткое описание. Как результат – такие обзоры разместит даже самый ленивый, естественно, при условии, что Ваш ресурс придется ему по душе. Я уж не говорю о всевозможных счетчиках и виджетах, вспомните, как раскрутилась та же , предоставляя простенький виджет по добавлению страницы в различные сети социальных закладок. За основу того, как это все должно выглядеть, мне был выдана . Хорошо, давайте же уже создадим что-то похожее. Изучаем исходники. Раскрываем тему <tits></tits>
Собственно, на руках нет ничего, кроме этой страницы. Грустно, правда? Ничуть! Если создатели сайта не пользовались обфускаторами, то нам доступен как минимум html-код страницы, что, на самом деле, не так уж и мало. А если добавить к этому еще и CSS да JavaScript-файлы, то материалов для изучения у нас более чем достаточно. Легким движением Ctrl+F находим строчку: <h3 style="clear:both;">Код для вставки статьи на сайт / в блог</h3>
от нее и начинается то, что нам нужно, пока что остановимся на ближайшем закрывающем теге <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>');
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. Единственное, что для меня осталось загадкой в сырцах исходной страницы – зачем было шифровать имя автора статьи? Если копируете материал себе в блог, пожалуйста, поставьте прямую текстовую ссылку на эту страницу. 07 Марта 2010 г. Да куда уж еще раскрывать-то тему? 12 Мая 2010 г. В конце формы надо поменять местами "</a></span>" на "</span></a>" ;) 13 Мая 2010 г. 2 DL: А ведь и точно - не заметил :) Чужой код - потемки :) При написании комментария можно использовать bb-теги [b][i][u], а также [quote] для цитирования. |
Архив постов:2010 2009 Последние новости:В конце сентября ожидается очередная ябломания.Лично я уверен, что без ажиотажа дело не обойдется. Просто потому, что это Apple и его iPhone.Власти определили наказание софтверным пиратам в Сети.Гайки затягиваются все туже и туже. Что-то будет дальше...Windows 95 исполнилось 15 летА ведь именно 95-я винда у меня была первой "оконной" осью (3.1 не в счет)Facebook собирается отказаться от x86-серверов в пользу ARMВот и Facebook переводит свои сервера на экономичные процессоры. Тоже хочу себе ARM.Каждый пятый рунетчик ведет свой блогВ принципе, благодаря дешевому доступу в Сеть, это неудивительно. |






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



07 Марта 2010 г.
Хотел посмотреть пример, но ссылка не открывается :(. Лан статью сохраню, будет время разберусь