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

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

Так как же добавить кнопки социальных сетей для своего сайта? Во многих CMS данная функция реализована по умолчанию или устанавливается дополнительным плагином. Но, я пользуюсь таким замечательным сервисом как Share42. Данные кнопки симпатичные, легко настраиваются, поддерживаются всеми социальными сетями и самое главное бесплатные!

И так, какой бы не был у вас сайт, самописный или на CMS. Заходим на Share42.

Выбираем размер кнопок 32х32 или 24х24 или 16х16, но последние, как по мне, какие-то совсем мелковатые.
И клацаем на тех иконках которые вам нужны и вы хотите видеть на своем сайте. Причём кнопки можно перемещать так, что бы они стояли в той последовательности как вам хочется.

Выбираем нужные Вам опции:
Горизонтальное размещение (как у меня на сайте), или вертикальное (как на сайте Share42). При вертикальном размещении можно ограничить количество видимых иконок.
Кодировка, по умолчанию стоит UTF-8, пусть так и стоит 🙂
Добавить иконку Share42 — это на ваш выбор, но я данную опцию убираю.
Если вы добавили RSS кнопочку, то нужно ввести ссылку на вашу RSS ленту.
jQuery я не подключаю, но если включить, то можно будет и увидеть количество публикаций, что полезно если вы уверенны что будут не нули 🙂

Для примера, смотрим как это будет выглядеть на вашем сайте. Я допустим подгоняю под размер своих статей, чтобы кнопки не переносились на вторю строчку.
и жмём «Скачать готовый скрипт»

Далее…
Из полученного архива закидываем папку share42 на ваш сайт (желательно в корень)
Указываем путь к папке. (У меня это http://www.unemployed.in.ua/share42/)
Для проверки, можно пройти по полученной ссылке, но мой IE не захотел этого делать 🙁 поэтому просто поверю что всё впорядке.
Если у вас сайт на CMS указанном на сайте, выберите подходящий пункт и скопируйте полученный код в буфер обмена (нажмите Ctrl + C)

Теперь самое интересное… Куда вставлять этот код?

Начнем с WordPress
Заходим на сайт через FTP каталог wp-content/themes/ выбираем вашу тему, находим файл single.php и открываем его для редактирования (в Total Commander, просто выбрав файл жмём F4)

Находим строчку

<?php the_content(»); ?>

и сразу после неё или после

</div>

как вам больше нравится, вставляем полученный код share42

Теперь, все ваши статьи на WordPress будут иметь красивые кнопки социальных сетей. Если вам нужны они и на страницах вашего сайта, то подобным образом редактируем файл page.php. А бывает что надо разместить буквально пару кнопок на боковой панели, так называемом sidebar, тогда нам нужен файл sidebar.php, но здесь у каждого индивидуально, поэтому сами пробуем и экспериментируем куда вставить полученный код с кнопками.

LiveStreet
Здесь я немного помучался с размещением данного скрипта, дело в том, что я не хотел что бы он был виден под каждым «коротким» постом на главной странице, а только когда открываешь статью, вот тогда уже в конце статьи есть эти заветные кнопочки…

Всё оказалось просто, заходим в каталог сайта сделанного на CMS LiveStreet, далее в каталог templates/skin выбираем вашу тему, и находим файл topic_topic.tpl (это основной файл поста) и между 21 и 22 строчками

{$oTopic->getText()}
{/if}

вставляем наш код скрипта.

Но если на вашем сайте размещаются не только обычные статьи, но и фото или просто ссылки, то нужно редактировать и соответствующие файлы с префиксом topic_что-то там.tpl почти всегда, код нужно вставлять перед последним условием if.

{/if}

OpenCart
Для интернет магазинов на OpenCart в каталоге catalog/view/theme/ваша тема/template/product/ находим файл product.tpl
Я вставил данные кнопки на каждом товаре, сразу после звездочек (рейтинга) и количества отзывов. В коде файла это выглядело как:

<div class=»review»>
<div><img src=»catalog/view/theme/default/image/stars-<?php echo $rating; ?>.png» alt=»<?php echo $reviews; ?>» />&nbsp;&nbsp;<a onclick=»$(‘a[href=\’#tab-review\’]’).trigger(‘click’);»><?php echo $reviews; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick=»$(‘a[href=\’#tab-review\’]’).trigger(‘click’);»><?php echo $text_write; ?></a></div>
</div>

и вот перед последним ДИВом я и вставил код. Получилось очень симпатично и не навязчиво.

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