Социальные кнопки на сайте iWeb: два способа установки

Доброго времени суток, дорогие друзья!

Сегодня предлагаю поговорить о том, как правильно разместить кнопки социальных сетей на сайте, созданном в редакторе Apple iWeb. О значимости и важности этих кнопок, думаю говорить не стоит, существует огромное число интернет ресурсов, которые с радостью расскажут Вам об этом. Я же постараюсь акцентировать внимание, именно, на «правильности» установки этих кнопок в рамках сайта iWeb, и вот почему. Регулярное общение и ответы на письма, отправленные через форму контакты сайта показали, что тема сегодняшнего материала с завидной регулярностью занимает верхние строки хит-парада вопросов по редактору iWeb.

Использовано фото: skippydogdesigns

В общем случае, эти вопросы могут звучать, примерно, так: «Я установил(а) на сайт кнопки социальных сетей с помощью такого-то сервиса, но они работают неправильно: в Twitter публикуется твит с адресом другой страницы моего сайта. Что я делаю не так?». После выяснений что устанавливалось и как, оказывается: кнопки на страницы сайта были установлены с помощью стандартного виджета редактора Apple iWeb «HTML сниппет».

На этой «оптимистичной» ноте предлагаю пока остановиться и обратиться к материалу, в котором рассказывалось о HTML сниппетах и их применении при разработке сайта в редакторе iWeb. Уверен, ознакомившись с этим материалом (а особенно, с заключительной его частью) Вы сами поймете почему так происходит, я же, тем временем, наглядно продемонстрирую, как ненужно устанавливать кнопки социальных сервисов на страницы своих «яблочных» сайтов.

Первый способ. Неправильный. Установка кнопок с помощью HTML сниппета

Для примера, воспользуемся сервисом Яндекса, позволяющим разместить блок социальных кнопок на  страницах любого веб ресурса. Этот сервис выбран не случайно - именно такие кнопки можно увидеть и в шапке моего сайта. Можно воспользоваться любым другим аналогичным сервисом, например, этим - принцип установки таких блоков везде один и тот же.

Итак, заходим на сервис Яндекса, выбираем нужные кнопки и получаем код (далее, код кнопок), который и вставляем в HTML сниппет, предварительно добавленный на нужную страницу сайта. Применяем и публикуем страницу. После размещения страницы на своем хостинге Вы должны увидеть блок кнопок «Поделиться» на веб странице. Вот, например, что получилось у меня:

Из всего сказанного вытекает, что для установки таких кнопок виджет «HTML сниппет» редактора iWeb «немного не подходят». Чтобы социальные кнопки работали правильно, код, добавляющий их на страницы сайта, должен находится непосредственно внутри исходного кода самой веб-страницы. Давайте попробуем этого добиться.

Способ второй, правильный. Замена HTML кода

Данный способ мы уже применяли, подробности можно посмотреть в материале Использование iWeb: Замена html-кода. С первого взгляда, он кажется достаточно трудоемким, но на самом деле все очень просто. Разобравшись один раз, Вы с легкостью сможете применять его в дальнейшем.

Суть его вот в чем: с помощью редактора Apple iWeb, в нужном месте страницы создается текстовый блок необходимых размеров, после чего страница публикуется. Далее, в исходном коде опубликованной страницы, код полученного текстового блока заменяется на нужный нам html код кнопок. Как видите все достаточно просто.

Итак: создаем в нужном месте страницы текстовый блок с размерами равными будущему блоку социальных кнопок. Для выбранного мною набора кнопок от Яндекса, эти размеры равны 277 на 28 пикселов (можно взять размеры чуть больше - ничего страшного в этом не будет).

В текстовый блок вставляем текст, по которому в дальнейшем будем искать код этого блока в исходном коде веб страницы: пусть это будет текст «ya_buttons» (лучше использовать цвет, размер и начертание  шрифта по умолчанию).

Публикуем страницу в локальную папку на компьютере и открываем в веб браузере. Переводим браузер в режим просмотра исходного кода (для Safari: меню ‘Вид’ - ‘Показать программный код страницы’). С помощью поиска находим нужный нам участок исходного кода (поисковая фраза - «ya_buttons»).

Копируем в буфер обмена участок кода выделенный голубым цветом, его мы и будем заменять кодом социальных кнопок от Яндекса. В принципе, сделать это можно в любом текстовом редакторе, но при большом количестве страниц это не совсем удобно и очень долго. Лучше делать замену в автоматическом режиме с помощью программы MassReplaceIt. О ее назначении, настройке и использовании достаточно подробно написано в статье MassReplaceIt: жизнь на территории iWeb,  повторять все еще раз, думаю, не стоит. Скачиваем, устанавливаем, настраиваем программу и переходим к вкладке ‘Find and Replace’. В поле ‘Find’ вставляем часть кода из буфера обмена, в поле ‘Replace’ - html код социальных кнопок и сохраняем этот запрос. После нажатия на кнопку ‘Replace’ программа сама найдет и внесет необходимые изменения в исходный код веб страницы. Публикуем сайт на хостинге и видим, что кнопки благополучно появились на странице.

Вот, например, что получилось у меня в этот раз:

Как видите, внешний вид кнопок, полученных этим способом, ни чем не отличаются от предыдущих. Не отличается и принцип их действия. Только результаты их работы немного другие: нажмите еще раз на кнопку LiveJournal и Вы сами все увидите .

Created by Apple iWeb • Library for Me