Скрипт кнопки социальных сетей 3 в 1 (Twitter, FaceBook и ВКонтакте) со счетчиком лайков

Logo
Скрипт кнопки социальных сетей 3 в 1 (Twitter, FaceBook и ВКонтакте) со счетчиком лайков

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

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

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

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

Как только вы это сделаете, смело пишите на admin@dmitriydenisov.com. После этого я вышлю вам в ответном письме все необходимые файлы для установки кнопки социальных сетей на ваш сайт, а также проконсультирую вас, если в этом будет необходимость.

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

Установка скрипта кнопок социальных сетей на сайт WordPress

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

Итак, первым делом распаковываем архив vButton.zip, который вы получили от меня в ответном письме. Внутри него будет папка «vote_data» и файл «vote.php», который нам придется немного изменять под свои нужды. Кроме того нам также придется добавить несколько строчек кода непосредственно в шаблон сайта, но об этом мы поговорим чуть позже.

Для начала нам в первую очередь нужно скопировать папку vote_data в папку с файлами темы оформления. У меня это папка mytheme. У вас же будет своя в зависимости от того, какую тему оформления вы используете на своем сайте.

Далее нам нужно подключить к странице несколько файлов скрипта кнопки социальных сетей. Для этого добавьте в <head> следующий код.

<link rel="stylesheet" type="text/css" href="путь_к_папке_vote_data/vote_data/style.css">
<script type="text/javascript" src="путь_к_папке_vote_data/vote_data/jquery-1.js"></script>
<script type="text/javascript" src="путь_к_папке_vote_data/vote_data/jquery.js"></script>
<script type="text/javascript" src="путь_к_папке_vote_data/vote_data/openapi.js"></script>
<!--[if IE 7]><link rel="stylesheet" href="путь_к_папке_vote_data/vote_data/ie.css" /><![endif]-->

В моем случае путь к папке vote_data будет следующим.

http://dmitriydenisov.com/wp-content/themes/mytheme

Чтобы добавить этот код в WordPress, откройте на редактирование файл header.php и перед закрывающим тегом </head> добавьте код, приведенный выше.

Теперь нам нужно добавить на сайт WordPress специальную функцию, которая возвращает ссылку на первую картинку в посте. Она нам понадобится для того, чтобы автоматически передавать изображения в социальные сети. Чтобы это сделать, открываем на редактирование файл function.php и добавляем в него следующий код.

// First image
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}

Затем сохраняем результат и не забываем перезаписать файл function.php на сервере. После этого нам нужно отредактировать файл vote.php и загрузить его на хостинг в папку к другим файлам темы.

Редактирования файла vote.php сводится к замене путей и изменению значений некоторых переменных, если в этом будет необходимость. Для начала заменяем все «путь_к_папке_vote_data» на свой путь к папке vote_data. Чтобы это сделать максимально быстро, открываем документ при помощи программы NotePad++ и жмем CTRL+F. Далее переходим во вкладку заменить и заменяем пути, как это показано на изображении.

Замена путей в файле vote.php

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

var post_title = "Прописать код для вывода заголовка страницы";
var facebook_text_1 = vkontakte_text_1 = "Рекомендую прочитать статью " + "\"" + post_title + "\"";
var facebook_title_1 = twitter_title_1 = vkontakte_title_1 = "Мне очень понравилась статья " + "\"" + post_title +"\"";
var facebook_url_1 = twitter_url_1 = vkontakte_url_1 = "Прописать код для вывода ссылки на страницу";
var facebook_image_1 = vkontakte_image_1 = "Прописать код для вывода ссылки на изображение, которое будет отдаваться социальным сетям";

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

<?php include (TEMPLATEPATH . '/vote.php'); ?>

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

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

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

Сразу после добавления кода сохраняем файл и перезаписываем его на сервере. Если вы все правильно сделали, то на месте кода появится кнопка социальных сетей, которая будет выглядеть следующим образом.

Пример кнопок социальных сетей

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

Добавление кнопки социальных сетей на любой сайт

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

<?php the_title(); ?> - выводит заголовок страницы.
<?php the_permalink() ?> - выводит ссылку на текущую страницу.
<?php echo catch_that_image() ?> - данная функция возвращает ссылку на первое изображение в посте и выводит его на экран.

Это были три основных момента, которые стоит учесть. Далее аналогичным образом копируете все необходимые файлы на хостинг, подключаете необходимые файлы в <head> страницы, а также подключаете кнопку социальных сетей при помощи инструкции INCLUDE. Одним словом, процесс установки на другие сайты практически ничем не отличается от установки социальных кнопок на WordPress.

На этом я завершаю данную статью. Если у вас остались какие-то вопросы или пожелания, вы всегда можете оставить их в комментариях.

На этом все. Удачи вам и успеха в создании сайтов.

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

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

  • deSiter

    Что-то новое в блогосфере. Скрипт замечательный. Но, боюсь, посетители не увидев сразу привычных логотипов сетей, не станут кликать не безликую кнопку. Впрочем, желающие могут на неё эти логотипы наклеить.

  • Дмитрий

    Да, у меня была такая мысль. Придумал бы что-то поинтересней, но как-то не получилось… Нужно развивать в себе дизайнерские качества:)
    Кстати изменить внешний вид можно просто отредактировав одну картинку. Там сразу можно изменить обычный вид, вид при наведении и при нажатии. Одним словом, за все три вида отвечает одна картинка, что очень удобно.

  • appleist

    А как насчет маилру и одноглазников? Они же, заразы, тоже популярные у нас.

  • Дмитрий

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

  • Димка

    а можно так сделать, чтоб нажал на одну кнопку, а сразу три кнопки нажалось (лайкнулось)… это было бы прикольней )

  • Дмитрий

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

  • имя

    Хорошая штука! А одноглазники и маилру однозначно нужны!

  • Дмитрий

    Возможно когда-то добавлю. Сейчас нету времени заниматься этим.

  • Дмитрий

    У меня проблема, все поставил как и описано. Но когда в хеадер вставляю код и выходит так что сбивается весь дизайн, я так понял он конфликтует с другим встроенным в шаблон скриптом (там идет вывод картинок к популярным записям и на них текст 5 картинок которые можно листать) не подскажите как бы сделать так чтобы все работало ?

  • Дмитрий

    Это нужно смотреть и тестировать непосредственно на сайте. Так определить причину проблемы будет очень сложно. Все же рекомендую как минимум проверить, не идет ли повторное подключение библиотек jquery. Из-за этого могут перестать работать скрипты и как следствие поплыть дизайн.

  • Дмитрий

    На сайте смотреть и тестировать не получится так как я на денвере делаю. Может вам ссыль на саму тему кинуть, а вы посмотрите если не сложно?! Кстати вот не могу удержаться хочу сказать вам огромное спасибо за ваш блог очень полезный ресурс много чего узнал и уже даже сам темы могу редактировать и без проблем устанавливать различные плагины руководствуясь вашими статьями, отдельное спасибо за статьи по языку PHP,CSS,HTML все изложено грамотно и понятно ничего лишнего не то-что читать нудные книги котерова хотя после ваших статей книгу стало легче читать и внесло ясность во многие моменты. Как закончу создание своего блога обязательно размещу статью с благодарностями. Из некоторых статей понял что у вас не один сайт а несколько, хотелось бы узнать их адреса, думаю они не менее полезны чем ваш блог!

  • Дмитрий

    Для начала спасибо за оценку блога:) Очень приятно, что данный сайт помогает вам в обучении.
    Насчет темы оформления, то вы можете написать мне в «Контакты» и я по свободе постараюсь все пересмотреть.
    Ну и что касается моих сайтов, то часть из них я продал, а часть находится на стадии разработки и наполнения, поэтому показать я вам их не могу:)

  • Имя

    Отправил запрос. Заранее спасибо. 

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

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