Почему код лучше, чем плагин?

Потому что когда кто-то пишет плагин и распространяет его бесплатно, то, как правило. ставит в него еще и ссылки на себя. В коде, которым делится со своими читателями Блоготей – ничего лишнего нет. Точно такой же стоит и у меня в шаблоне, и на блогах моих друзей. Вы сами посмотрите и поймете все, что в нем прописано и зачем.

Плагин предполагает скрипт. Нередко для плагина прописана и внешняя оболочка – админка, в которой вы можете его настраивать. С одной стороны, это удобно, но с другой – лишняя нагрузка на блог.

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

Код для кнопок «поделиться в соцсетях»

<!-- ShareButtons -->
<!-- odnoclassniki -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="http://your_site.ru/...png" width="30" height="30" title="В Одноклассники"></a></noindex></nofollow></div>
<!-- mail.ru -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="http://your_site.ru/...png" width="30" height="30" title="Поделиться в Mail.ru"></a></noindex></nofollow></div>
<!-- facebook -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="http://your_site.ru/...png" width="30" height="30" title="Поделиться в Facebook"></a></noindex></nofollow></div>
<!-- twitter -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="_blank" href="http://twitter.com/intent/tweet?text=RT <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="http://your_site.ru/...png" alt="Опубликовать в twitter.com" width="30" height="30"></a></noindex></nofollow></div> 
<!-- vkontakte -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>"><img src="http://your_site.ru/...png" width="30" height="30" title="Поделиться В Контакте"></a></noindex></nofollow></div>
<!-- yandex -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://my.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="http://your_site.ru/...png" width="30" height="30" title="Поделиться в Я.ру"></a></noindex></nofollow></div>
<!-- rss -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://feeds.feedburner.com/blogotey/new">
<img src="http://your_site.ru/...png" width="30" height="30" title="Подписаться!"></a></noindex></nofollow></div>
<!-- ShareButtons -->

 код для таблицы стиля style.php

.sharebuttons {
        float: left;
        margin: 0px 20px 20px 0px;
}

Разбираем, что, где и зачем написано:

  • <div class=»sharebuttons»> — отсылает к тому коду, который должен быть добавлен в файл style.php Потому что все форматирование, которое только можно, нужно прописывать именно в таблице стилей, а не в самом шаблоне страницы.
  • <noindex><nofollow> и их закрывающие теги в конце – закрывают ссылки на соцсети от внимания поисковых систем. Сейчас все больше говорят о том, что данные теги не действуют, но мы их для верности оставим (можете убрать, если хотите).
  • <a rel=»nofollow» target=»blank» href=»http://…»> — собственно, ссылка на соцсеть – самая суть кнопки. В ней, также, прописано nofollow и свойство открываться в новом окне target=»blank» Последнее нужно для того, чтобы посетитель не уходил с вашего блога, нажав на кнопку.
  • <img src=»http://…» width=»30″ height=»30″ title=»Поделиться в …»> — ссылка на иконку для данной соцсети, которую вы загрузите на свой сайт или на сторонний файлхостинг. width=»30″ height=»30″ – ширина и высота картинки (в большинстве случаев, они квадратные и пропорцию лучше не менять). title=» Поделиться в …» – та надпись, которая будет всплывать при наведении курсора на кнопку.

Код стиля:

  • float: left – расположение слева. Чтобы было справа пишем float: right
  • margin: 0px 20px 20px 0px – отступ между кнопками и от кнопок до элементов снизу (значения читаются так – верх, право, низ, лево). Можете поменять значения на свои.

Кроме того, у меня есть код для добавления в LiveInternet и иконка для этой кнопки. Кому нужно — пишите в комментах.

Скачиваем иконки соцсетей

Я предлагаю вам пять наборов иконок для следующих соцсетей: Вконтакте, Мейл.ру, Твиттер, Фейсбук, Гугл+ и RSS (подписка). Отдельной публикацией выйдут дополнения к этим наборам — иконки для Одноклассники и Я.ру. Если у вас возникнет необходимость в каких-то еще кнопках — напишите мне. Но, повторюсь, можете ставить любые картинки – хоть собственные фотки.

Важно, что нам понадобятся именно ссылки на иконки соцсетей. Получить их можно, загрузив картинки – не архивом, а по одной – на собственный блог. Тогда они будут иметь примерно такой вид http://название сайта/wp-content/uploads/…/…/iconka.png (или jpeg).

В результате, для каждой иконки каждой соцсети у нас должно быть по ссылке. Эти ссылки прописываем в код – аккуратно, не путаем картинки и соответствующие соцсетям ссылки!

Куда ставить код для кнопок соцсетей

Сначала открываем файл style.php и в самый его конец вставляем код стиля для наших кнопок.

Чтобы кнопки соцсетей отображались на главной странице блога, рядом с анонсами публикаций, открываем страницу index.php и находим эмпирическим путем нужное место. Расплывчатый совет, но поскольку шаблонов Вордпресс дикое количество и все они написаны на разных модификациях языка программирования – более точно указывать не могу. Найдите, где в шаблоне прописано слово «далее» или «читать дальше» — вот там, выше этой строчки, и вставляйте.

Основное правило: не прерывайте строки шаблона! Ставьте код только в пробел, между строками.

Чтобы вывести иконки соцсетей на странице одной записи – открывайте single.php. Там найдите нужное место. Маркерами могут служить такие фрагменты кода get title (выводит заголовок), get content (выводит сам пост), «редактировать» (обычно что-то подобное есть под текстом поста).

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