Создаем кнопки социальных сетей и закладок для сайта на WordPress при помощи карт изображений (image map)

Logo
Создаем кнопки социальных сетей и закладок для сайта на Wordpress при помощи карт изображений (image map)

В этой статье я буду рассказывать о совсем другом методе создания кнопок социальных сетей, чем вы можете найти на просторах интернета, а именно при помощи карт изображений (image map). Для большего удобства я приведу специально для вас рабочий пример кода и готовое изображение. Единственное что вам останется, это скопировать это все к себе на сайт и наслаждаться новыми кнопками социальных сетей. Возможно, если вам очень понравится этот способ, вы ответите благодарностью и оставите на мой новый блог обратную ссылку. Было бы очень даже неплохо, но это по желанию:)

Минусы обычных кнопок социальных сетей

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

Ну, во первых давайте для начала рассмотрим разнообразные плагины и скрипты, например от Яндекса. Минусами первого метода являются лишние расширения и запросы к БД и как результат дополнительная нагрузка создаваемая вашим сайтом на сервер и замедление его загрузки. Второй способ вроде как очень простой и довольно неплохой, но опять же если вдруг начнутся торможения со стороны сервиса, то за ним пойдет и торможение нашего сайта. Да и разнообразные посторонние ссылки  (ссылка на Яндекс) не очень меня радуют. В общем, я попробовал данный способ и сразу от него отказался.

Ну и наконец, в чем же минусы кнопок социальных сетей создаваемых из кучи изображений? А минусы в том, что для каждой сети создается отдельное изображение. В результате этого для 9 сервисов у нас появляется 9 лишних изображений и как следствие 9 лишних подключений к серверу, которые могут в некоторых случаях значительно затормозить загрузку страниц (Ускорение загрузки страниц сайта. Оптимизация изображений, css, html и php кода. Настройка .htaccess).

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

Создаем кнопки социальных сетей для сайта на WordPress при помощи карт изображений (image map)

Итак, суть этого метода создания кнопок социальных сетей состоит в следующем. Вы вместо отдельного изображения для каждого сервиса создаете одну картинку и размещаете на нем кнопки всех сервисов. Затем создаете для этого изображения карту изображения и делаете выделенные области ссылками.

Теперь давайте по пунктам разберем все этапы создания кнопок социальных сетей для сайта.

Первым делом нужно определиться с их будущим видом. Для этого можете поискать изображения в сети либо воспользоваться моим уже готовым вариантом, который я подготовил именно для вас. В нем присутствуют 9 основных сервисов.

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

Для этого запустите программу и создайте новый php документ. Затем перейдите во вкладку дизайн и перетащите сюда свое изображение. Естественно у вас уже должна быть создана папка, в которой будут храниться все файлы вашего проекта. Проделав все это у вас должно получиться следующее.

Теперь нам нужно создать для этого изображения карту. Для этого в Dreamweaver на вкладке «Общий» выбираем «Нарисовать прямоугольную активную область».

После этого для большего удобства и точности зажмите «Ctrl» и «+» для увеличения масштаба.

Следующий этап – создание активной области для каждой кнопки социальной сети. Чтобы это реализовать просто выделите нужный элемент изображения.

Для изменения размера области достаточно навести курсор со стрелкой на углы самой выделенной области. Проделав все эти манипуляции для каждой кнопки социальной сети, переходим во вкладку «Код» и правим содержание ссылок. Значение href=»#» заменяем на свое. Точнее заменяем только «#». Ссылки на каждый сервис вы можете найти в моей первой статье посвященной созданию кнопок социальных сетей для сайта на WordPress. Код здесь абсолютно идентичный.

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

<noindex>
<div class="add_to_service">
Спасибо Вам за добавление этой статьи в
<img src="http://dmitriydenisov.com/wp-content/themes/mytheme/images/soc-bg.png" width="340" height="32" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="0,0,32,32" href="http://my.ya.ru/posts_add_link.xml?title=<?php the_title(); ?>&URL=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Поделиться ссылкой на Я.ру">
<area shape="rect" coords="38,0,70,32" href="http://www.liveinternet.ru/journal_post.php?action=l_add&amp;cnurl=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Добавить в свой блог на ЛиРу (Liveinternet)">
<area shape="rect" coords="76,0,108,33" href="http://www.blogger.com/blog_this.pyra?t&amp;u=<?php the_permalink(); ?>&amp;n=<?php the_title(); ?>&amp;a=ADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;hl=ru&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8" target="_blank" rel="nofollow" title="Добавить в свой блог на Blogger.com">
<area shape="rect" coords="115,0,146,32" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Поделиться ВКонтакте">
<area shape="rect" coords="153,0,185,32" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Поделиться ссылкой в FaceBook">
<area shape="rect" coords="192,0,224,32" href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=http://dmitriydenisov.com/" target="_blank" rel="nofollow" title="Добавить в Google Buzz">
<area shape="rect" coords="232,0,263,32" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Добавить в Мой Мир">
<area shape="rect" coords="269,0,301,32" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" target="_blank" rel="nofollow" title="Добавить в свой блог на livejournal.com">
<area shape="rect" coords="306,0,340,32" href="http://www.friendfeed.com/share?title=<?php the_title(); ?> <?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Добавить в FriendFeed">
</map>
</div>
</noindex>

Данный код вам подойдет, если вы используете мое изображение кнопок социальных сетей. Единственное что вам нужно, это немного подправить код, а потом скопировать и вставить его в нужный вам файл на вашем сайте. Подробнее об этом можно прочитать в статье «Кнопки социальных сетей и закладок для сайта на WordPress». Также вы могли заметить, что карта изображений помещена в класс «add_to_service». Для его реализации вам нужно добавить в таблицу стилей своего сайта следующее правило CSS.

.add_to_service {
color:#333;
font-family:tahoma !important;
font-size:24px !important;
font-weight:normal !important;
line-height:40px !important;
text-align: center !important;
margin-top: 15px;
margin-bottom: 15px;
}

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

Поскольку зачастую кнопки добавляют в конце статей, то нам потребуется открыть на редактирование файл single.php и добавить вышеприведенный код в него. Делать это лучше после вывода самого текста статьи где-то после строки

<?php the_content('Читать полностью...'); ?>

и закрывающего тега </div>. Думаю, вы разберетесь сами. Во всяком случае, всегда можно поэкспериментировать на локальной версии сайта.

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

src="http://dmitriydenisov.com/wp-content/themes/mytheme/images/soc-bg.png"

У вас же будет свой в зависимости от того, куда вы ее поместите.

На этом статья о создании кнопок социальных сетей для сайта WordPress подошла к концу. В заключении хочу заметить, что описанный выше способ применим не только для создания кнопок соц. сетей, но и для любой другой задачи, например навигации по сайту, подписки и т.п. Но, насколько мне известно, поисковики плохо относятся к навигации при помощи карт изображений, поэтому лучше всего, если вы продублируете ее в футере (Правильная внутренняя перелинковка страниц сайта).

На этом все. Удачи вам и до скорых встреч на страницах блога.

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 2

  • Влад

    на джумле 1.5.ххх в компонент к2 если вставить не прокатит?

  • Дмитрий

    При правильном подходе должно получиться.
    Главное чтобы код кнопок социальных сетей работал на этом движке.

Оставить комментарий

отменить ответ