Как установить кнопки социальных сетей на wordpress
Заметки по jQuery

Как установить кнопки социальных сетей на wordpress

Как установить кнопки социальных сетей на wordpress

Данный пост является продолжением цикла постов “Социальные кнопки“. Как я и обещал в предыдущем видеоуроке “Кнопка twitter – Как добавить кнопку twitter на свой сайт” речь пойдет про социальные кнопки, которые очень сильно могут привлечь к вашему посту большое количество посетителей с социальных сетей и сервисов, естественно при условии высокого качества самого поста.

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

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

В интернете есть различные сервисы и способы добавления социальных кнопок. Мы же рассмотрим самый лучший, на мой взгляд сервис, а остальные основные сервисы мы затронем вкратце в конце поста. Итак, называется он share42.com и создал его известный блоггер Dimox.

Социальные кнопки share42.com

Cоциальные кнопки Share42 или Как установить кнопки социальных сетей на wordpress
Демо можно посмотреть с левой стороны страницы данного поста.

Основные преимущества социальных кнопок закладок и сетей от Share42.com

  • Единый стиль иконок.
  • Выбор размера иконок: 32х32, 24х24, 16х16
  • Оптимизированный код скрипта, кэшируется браузером, код скрипта устанавливается на ваш блог и не зависит от сторонних сайтов. Данный метод позволит избежать потери в скорости загрузки блога.
  • Простая установка на ваш блог.
  • Все ссылки формируются с помощью JavaScript и поэтому на блоге не увеличится количество внешних ссылок.
  • Оптимальный HTML-код. В шаблон блога вставляется всего одна строка кода, а весь код формируется с помощью JavaScript.
  • Скрипт работает на любых CMS и платформах.
  • Набор иконок группируется в одну картинку (спрайт), что так же снижает количество обращений к серверу.
  • Большой выбор социальных сервисов (45 кнопки).
  • Возможность использования css стилей для иконок.

Как установить кнопки социальных сетей на wordpress мы рассмотрим в видеуроке
на примере социальных кнопок от Share42.com

[spoiler name=”ВидеоурокДля открытия – нажмите“]

[/spoiler]
[spoiler name=”Необходимые данныеДля открытия – нажмите“]

  1. В первую очередь заходим на сервис share42.com и настраиваем нужные вам кнопки и параметры для их вывода.
  2. Скачиваем на свой компьютер сформированный архив.
  3. Закидываем папку из скаченного архива на хостинг в корень блога.
  4. Вставляем в шаблон полной новости блога single.php следующий код:

[crayon lang=”js”]


[/crayon]

Не забудьте вместо http://site.ru вставить ссылку до папки share42 на вашем блоге.

Почти закончили. Зайдите в любую из ваших статей и смотрите – если кнопки появились, значит мы на правильном пути. Для того, чтобы красиво оформить социальные кнопки и сделать их плавающими, надо добавить в style.css вот такое свойство:

[crayon lang=”css”]#share42 {
position: fixed;
z-index: 2000;
margin-left: -70px; /* смещение влево от края контента */
}

#share42 {
padding: 6px 6px 0;
background: #FFF;
border: 1px solid #E9E9E9;
border-radius: 4px;
}
#share42:hover {
background: #F6F6F6;
border: 1px solid #D4D4D4;
box-shadow: 0 0 5px #DDD;
}
#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}
[/crayon]

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

По аналоги добавляются и все остальные кнопки других сервисов.

[/spoiler]

Другие сервисы по добавлению социальных кнопок

“Одна кнопка”

Cоциальные кнопки Share42 или Как установить кнопки социальных сетей на wordpress

Одна кнопка — сервис по добавлению ссылок на пост в социальные закладки и сети. Плюс в том, что не требуется устанавливать дополнительные плагины на блог. Сама кнопка смотрится не плохо, установка не сложная и проходит быстро.

Блок «Поделиться»

Как установить кнопки социальных сетей на wordpress

Блок «Поделиться» от Яндекс – сервис по добавлению кнопки с выпадающим списком социальных сетей. В список вошли восемь самых популярных соцсетей: Вконтакте, Одноклассники, Я.ру, МойМир, Facebook, Livejournal, Friendfeed,Twitter . Положительную сторону данного блока могут почувствовать пользователи Яндекс.Метрика т.к. все ссылки поставленные через Блок «Поделиться» можно отследить в данном сервисе.

Addthis

Как установить кнопки социальных сетей на wordpress

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

Новые посты

Кнопка “Наверх” с плавной прокруткой

Гордеев Игорь

Отгибающийся уголок на сайте – без плагина

Гордеев Игорь

Как к share42 прикрутить метрику яндекс

Гордеев Игорь

57 комментариев

wertock 02.03.2012 / 16:59

Я считаю что хватит и двух кнопок гугла и твиттера

Ответить
Гордеев Игорь 02.03.2012 / 18:41

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

Ответить
Юрий 04.03.2012 / 14:47

Здравствуйте! Второй день бьюсь, но у меня ничего не получается. Вроде все делаю по вашей инструкции пошагово, но…:( Просто ничего не появляется на сайте, никаких кнопок и все тут 🙁
Правда, в share42. у меня получилось не две строчки кода, как у Вас, а три. Я и две вставляла и все три, все равно не получается.

Ответить
Гордеев Игорь 04.03.2012 / 21:52

Здравствуйте, Юрий! Не совсем понял где вы видели у меня в примере 2 строчки кода? Код который вставляется в пост 3-х строчный. Проверьте правильность пути до папки с файлами. Надо следовать инструкции и все должно у вас заработать.(только что перепроверил). Попробуйте обновить КЭШ.

Ответить
CasinoLuckyWin 05.03.2012 / 20:25

Спасибо автору за такую замечательную статью! Она мне очень помогла.

Ответить
GGLMaster 06.03.2012 / 01:25

У меня на блоге установлен стандартный шаблон. Под статью ну никак не могу вставить кнопки, как не пытался…
Получилось только поставить кнопку над статье!)

Ответить
Гордеев Игорь 06.03.2012 / 03:02

В стандартных шаблонах в одном шаблоне статьи разделяются на форматы постов надо править content.php и в остальных форматах. А в другом шаблоне правится loop-single.php

Ответить
Юрий 06.03.2012 / 11:16

Игорь, виноват! Делал неправильно, переделываю.

Ответить
Максим 10.03.2012 / 18:40

Здравствуйте, Игорь! Отличная статья и самое главное полезная, но я никак не могу установить себе на блог эти кнопочки. У меня установлен не стандартный, во всех планах, шаблон вордпресс, зовут его Mystique. Мне чайнику очень тяжело с ним общаться. Помогите… 😆

Ответить
Гордеев Игорь 10.03.2012 / 19:18

Максим, надо внимательно следовать инструкции рассказанной в видеоуроке. Проверял и на вашей теме все работает. Код кнопок надо вставлять в single.php не забыть прописать нужные стили и желательно обновить КЭШ. И все у вас максим заработает.

Ответить
Максим 12.03.2012 / 00:05

Игорь, большое спасибо Вам. Все получилось!!! Хотел спросить, у Вас в начале сайта очень красивые иконки, соц. сетей, не подскажите где такие можно взять?

Ответить
Гордеев Игорь 12.03.2012 / 11:54

Максим, любые иконки можно найти в интернете их там полно. Данные иконки которые вам нужны можно взять например здесь.

Ответить
Юрий 11.03.2012 / 12:58

Переделал, все работает на отлично! Спасибо!

Ответить
Гордеев Игорь 11.03.2012 / 16:00

Я рад за Вас, Юрий, что у Вас все получилось.

Ответить
Сергей 15.03.2012 / 13:09

Игорь, добрый день. На моем сайте появляется панель, даже кнопочки работают, но нет иконок. В чем может быть проблема?

Ответить
Гордеев Игорь 15.03.2012 / 14:05

На это может быть 2 причины. Первая вы не закачали себе на хостинг файл с иконками. Второе вы не правильно указали путь до этого файла в коде.

Ответить
spok7 19.03.2012 / 23:22

В основном, такая богатая функциональность не шибко нужна. Обычно хватает твиттера, гугл +1, вконтакте мне нравится и ай лайк ит в фейсбуке. Остальное не очень популярно.

Ответить
Гордеев Игорь 19.03.2012 / 23:40

Каждому свое. Самое главное, что каждый может настроить эти кнопки по своему вкусу.

Ответить
Владимир 21.03.2012 / 15:50

У меня что то не получилось,все сделал точно так-же как на видео.

Ответить
Гордеев Игорь 21.03.2012 / 16:32

Следуйте внимательнее инструкцие

Ответить
AdameveCasino 23.03.2012 / 20:35

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

Ответить
Miroslav 26.03.2012 / 17:38

Товарищи подскажите в чем может быть проблема, если
кнопка ГУГЛ +1 не работает. Пользую плагин Share Buttons,
подскажите можно ли исправить код кнопки в самом теле
плагина?

Ответить
Гордеев Игорь 26.03.2012 / 19:20

Данным плагином не пользовался подсказать не могу. Но совет дам, пользуйтесь социальными кнопками share42.com они и работают, и гибконастраиваемые и блог не тормазят.

Ответить
Miroslav 03.04.2012 / 18:10

Спасибо за совет!

Ответить
Emin 03.04.2012 / 23:42

Спасибо за полезную информацию

Ответить
Александр 29.04.2012 / 16:56

Игорь, большое спасибо! Я в вордпрессе не очень, но с помощью вашей статьи, я установил себе соц. Все работает!

Ответить
Гордеев Игорь 29.04.2012 / 17:58

Александр, всегда пожалуйста!

Ответить
Звонилки н 19.05.2012 / 04:05

У меня ,также, справа в меню, виджетом добавлен вертикальный блок адсенса “Easy AdSense Lite”. Сбоку есть место, как туда рядом запихать вертикальный блок кнопок? 😈

Ответить
Гордеев Игорь 19.05.2012 / 09:45

Если вы хотите добавить, через виджет – то вам надо установить плагин WP PHP widget в этот виджет уже можно будет вставлять коды.

Ответить
Любовь 26.05.2012 / 01:33

Спасибо Игорь очень полезная статья!! 😛 😛 😛

Ответить
Василь 06.06.2012 / 23:53

Спасибо мне эта статья помогла.

Ответить
liebbe 07.06.2012 / 13:22

Здравствуйте, устанавил эти кнопки, но почему то вышел белый квадрат, внутри есть ссылки на блоги, но иконок нет, не знаю где подправить код..прикрепил пару скриншотов http://SSMaker.Ru/addcfea9/
http://SSMaker.Ru/4b597a99/

Ответить
Дмитрий 12.06.2012 / 00:52

Большое спасибо автору!Я новичек, очень помогло, все поставил, работает! 🙂

Ответить
intelegent 12.06.2012 / 15:09

share42.com самая вещь ! Пользуюсь на своём блоге и хлопаю в ладоши от счастья

Ответить
makar1711 14.06.2012 / 22:33

Спасибо за видео урок!!!!!!

Ответить
makar1711 14.06.2012 / 22:57

подскажи где поправить код,на мазиле бока.Белый экран а потом ниже отображения поста

Ответить
makar1711 14.06.2012 / 23:02

А в инет. эксплоуре вообще не отображается

Ответить
Светлана 02.07.2012 / 12:22

Здравствуйте, Игорь! У меня такой вопрос: на нашем сайте на главной странице к каждой записи появились кнопки “поделиться в соц.сетях” (очень некрасиво), до этого они были только в самих статьях. Как это появилось я не знаю… Создатель нашего сайта “пропал”, и обратиться мне не к кому, а я занималась только наполнением сайта (и вообще в этом деле новичок). Как можно убрать эти кнопки с главной? и оставить только в записях?

Ответить
Гордеев Игорь 04.07.2012 / 12:33

Я посмотрел ваш сайт и не увидел там соц. кнопок на главной странице. 😈

Ответить
Елена 05.07.2012 / 13:51

У меня установлен плагин Share Buttons. Все бы ничего, но не работает Like Faceboock. В настройках написано:

Пожалуйста, зарегистрируйте свой API ID для использования кнопки от Facebook и живого примера, иначе кнопка работать не будет.

Пишу API ID, перехожу по ссылке для регистрации и …..дальше “торможу”, не зная, что делать. Если вы сталкивались с таким вопросом, помогите мне, пожалуйста. Конечно, вы можете сказать, что установи кнопки, как написано в статье, а эти убери, так вот тут возникнет новая проблема, потому, что я такой “спец”, что в корневом каталоге могу такого “накрутить”, что ой-ё-ёй.

Ответить
Гордеев Игорь 06.07.2012 / 14:04

Я с данным плагином не работал, поэтому не могу подсказать. Можете поискать другой плагин дабы их уйма. Но я советовал бы вам обойтись без плагина как описано в посте. Данный способ совсем не сложен.

Ответить
Диана 29.07.2012 / 20:17

Большое спасибо за видеоуроки! Всё сделала по ним – получилось, работает, очень красиво. Очень благодарна вам за детальное объяснение!

Ответить
Егор 30.09.2012 / 23:06

Большое спасибо за статью. Интересует как добавить иконки “Мы в социальных сетях” как у вас на сайте между шапкой и статьей?

Ответить
Гордеев Игорь 30.09.2012 / 23:59

Это просто иконки с ссылками вставленные вручную в шаблон.

Ответить
Ксения Юрьевна 02.12.2012 / 23:48

хотела по вашему видео установить кнопки шаре 42, но это сделать совершенно невозможно, потому, что рассказано совсем непонятно.

Ответить
Гордеев Игорь 04.12.2012 / 14:40

Если не понятно по видео читайте тогда пост.

Ответить
Наталья 05.12.2012 / 11:21

На самом сервисе все предельно ясно. идете и делаете себе кнопки какие захотите 😉

Ответить
Марина Росса 26.02.2013 / 19:04

Игорь, а вы не знаете как установить на главной в постах соц.кнопки?

Ответить
Гордеев Игорь 27.02.2013 / 10:36

Код надо вставлять в файл отвечающий за вывод постов на главную, как правило в простых шаблонах это index.php .

Ответить
Марина Росса 28.02.2013 / 17:16

Спасибо

Ответить
Timur 08.03.2013 / 10:34

На вкус и цвет как говорится.. Но я пользуюсь сервисом от Яши

Ответить
Александр 22.04.2013 / 04:38

Здравствуйте!
Мой сайт на движке WordPress.
Разместил кнопки как на странице каждого поста, так и в ленте новостей под каждым постом (вставил код в single.php и index.php).
Но. Зачастую люди просматривают ленту новостей не заходя на отдельную страницу поста, и кликают на кнопки соцсетей прямо с ленты новостей. И я неожиданно обнаружил, что с ленты новостей при клике на кнопки всегда вставляется один и тот же адрес – адрес Главной страницы, а не адрес цитируемого поста.
Пожалуйста, подскажите, как сделать так, чтобы при нажатии с ленты новостей цитировалась ссылка поста, а не Главной страницы сайта?
Это действительно очень важно для блога, особенно если посты лаконичные, и пользователь просто не заходит на страницу поста.

Спасибо!

Ответить
Гордеев Игорь 22.04.2013 / 09:41

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

Ответить
Александр 22.04.2013 / 14:34

Описанный мной функционал реализован, например, в Живом Журнале. Технически, как я понимаю, реализовать это очень просто. Но нужны более глубокие знания php, MySQL, которых у меня, к сожалению, нет.

Ответить
Оксана 03.10.2014 / 03:43

Спасибо, с помощью Вашей статьи, все получилось. До этого стояли кнопки посредством плагина, но как мне казалось, они слишком грузили блог. С вариантом кнопок share42 все ок!)

Ответить
Лидия 20.12.2014 / 11:12

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

Ответить
Елена 13.11.2015 / 11:57

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

Ответить

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