Марафон v2.0

Урок 57 Сервис AddThis: ставим социальные кнопки на свой блог

addthis_servis

Сегодня мы будем добавлять на свой блог “красивые кнопки”, при нажатии на которых одним кликом можно будет отправить статьи в твиттер, вконтакт и др. социальные сервисы. Эта кнопка будет привлекать к Вам новых других посетителей, так что я рекомендую ставить их всем! О том, как добавить социальные кнопки без сторонних сервисов и лишнего мусора я тоже писал.

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

Регистрация в сервисе AddThis

  1. Заходите на addthis.com.
  2. Нажимаете на кнопку Join Now (правый верхний угол):
    Сервис AddThis: ставим социальные кнопки на свой блог
  3. Заполняете данные в регистрации (в принципе, как обычно):
    Сервис AddThis: ставим социальные кнопки на свой блог
  4. Нажимаете на Register, в принципе вот и все, Вы зарегистрированы 🙂

Установка социальных кнопок в статьях

  1. Сервис предоставляет большой выбор кнопок на вкус и цвет. Я покажу Вам на примере одного типа кнопок, который я буду ставить себе на блог. Заходите в пункт Explore –> Gallery:
    Сервис AddThis: ставим социальные кнопки на свой блог
  2. Я выбрал кнопки размером 32х32 (третья слева):
    Сервис AddThis: ставим социальные кнопки на свой блог
  3. Нажимаете по этой картинке, в следующем окно копируете HTML код, который предлагает сервис:
    Сервис AddThis: ставим социальные кнопки на свой блог Вставляете скопированный код в single.php (где находится файл single.php?), после вывода статьи. Например я вставил этот код у себя на блоге в это место (желательно в конце статьи, перед выводом комментариев, комментарии обычно выводятся следующим кодом

    <?php comments_template(); ?>

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

  4. Следующий код, который дает нам сервис:
    Сервис AddThis: ставим социальные кнопки на свой блог Копируете этот код и вставляете в footer.php перед закрывающим тегом </body>, заменив слово “YOUR-ACCOUNT-ID” на имя, на которое Вы зарегистрировали, в моем случае это WPnew:
    Сервис AddThis: ставим социальные кнопки на свой блог Теперь зайдя на любую статью своего блога, Вы можете увидеть примерно следующие кнопки:
    Социальные кнопки В принципе кнопки уже работают. Осталось выбрать какие кнопки поставить, о чем я поговорю ниже.

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

  1. Переходите по адресу http://www.addthis.com/services/list.
  2. Там Вы сможете выбрать кнопку какой социальной сети желаете вставить на свой блог. Это делается следующим образом: например Вы хотите вставить кнопку от Вконтакте. Для этого в списке (адрес я дал выше) ищите интересующий социальный сервис, я его нашел, он выглядит так:
    Сервис AddThis: ставим социальные кнопки на свой блог И со второго столбца копируете “короткую ссылку” (показано стрелкой на картинке выше).
  3. Теперь открываем single.php и там же, где находятся наши кнопки (куда мы вставляли код выше), копируем и вставляем такой же код, как и другие, но слово facebook (например) изменяем на vk (на ту самую короткую ссылку, о которой говорилось выше):
    Сервис AddThis: ставим социальные кнопки на свой блог
  4. Таким образом добавляем все нужные кнопки социальных сервисов. Я добавил несколько штук, Вы их можете видеть в конце этой статьи, приведу код этих кнопок, может кому-то пригодится:
    <div class="addthis_toolbox addthis_32x32_style addthis_default_style">
           <a class="addthis_button_facebook"></a>
    	<a class="addthis_button_vk"></a>
            <a class="addthis_button_twitter"></a>
    	<a class="addthis_button_livejournal"></a>
    	<a class="addthis_button_google"></a>
    	<a class="addthis_button_googlebuzz"></a>
    	<a class="addthis_button_friendfeed"></a>
    	<a class="addthis_button_blogger"></a>
            <a class="addthis_button_compact"></a>
    </div>

Напомню, чтобы эти кнопки поставить по середине, просто необходимо перед кодом кнопок прописать <div style=”text-align:center”>, а после кода просто добавить </div> (об и других полезных вещах функциях форматирования можете почитать тут).

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

На сегодня, думаю, все. Будут вопросы – задавайте в комментариях. До встречи на следующих уроках!

___________________________

Следующий урок: Урок 58 Ставим кнопку "Оставить отзыв".

Новый марафон 2.0 от WPnew
С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

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

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

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

по хронологии
по рейтингу сначала новые по хронологии
naikom blog http://naikom.ru/blog

а смысл самые красивые выбирать? это же не для красоты, а для раскрутки.. выбирать надо самые популярные имхо..

Я вам на почту писал насчёт обмена постовыми?? если интересует - напишите мне на почту.

Алексей Туманов

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

com http://nalbatron.com/

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

Автор
Пётр Александров

Я одновременно показал про установку красивых и полезных кнопок. Почту еще не разбирал, сейчас начну...

com http://nalbatron.com/

Чем по Вашему мнению отличаются эти социальные кнопки отличаются от социальных кнопок ?

mixon http://mixez.ru

А я сервисом odnaknopka пользуюсь, мне нравится, там самые основные сервисы есть)

Elma http://www.marmarisinfo.ru

Классные кнопки получились, спасибо!

Андрей

Вот этот сервис очень простой! Мне очень понравился! Спасибо!

Рунис http://relax-gid.ru

Надо будет поставить. прикольные кнопки. только livejournal не очень выглядит...

mixon http://mixez.ru

насчёт ЖЖ согласен, да и вообще мне кажется не в любой дизайн это впишется)

Надежда http://yadoma.com/

Пётр.

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

В какое место нужно вставлять код,, чтобы они выводились сразу?

Автор
Пётр Александров

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

Aleks Revo http://kalkulyatora.net/

На сервер - это вряд ли.

А вот с точки зрения раскрутки и вообще удобства пользования - весьма и весьма неудобно.

Не планируете обновить статью с googleplus? А то гугл вашу статью достаточно высоко держит ))

Автор
Пётр Александров

вы хотите кнопки вывести на главную страницу?

Надежда http://yadoma.com/

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

Артем http://artemosha.info

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

здравствуйте, на локалхосте не пашет. Так и должно быть?

Автор
Пётр Александров

Наверняка, честно я на локалхосте практически не работаю, поэтому не знаю...

san-chesss

спасибо за ответ, 25го окт. залью на хостинг - посмотрю.

Лакшми http://www.razvitieduha.ru

Александр, скажите, пожалуйста, возможно ли изменить текст всплывающих окон при подвидении к одной из кнопок? Например, вместо "Send to VK" написать "Отправить в вконтакте"

fStrange http://fstrange.ru

Это проще всего, надо добавить title="отправить в Вконтакте". Писал аналогичную статью.

Михаил http://mixez.ru

мне тоже интересно, а ещё чтобы вместо via @AddThis при постинге в твиттер вставить свой ник....

Евгений http://map.by

Нет ничего проще добавляете:

var addthis_share = {

templates: {

twitter: "{{title}} - {{url}} (via @your_username)"

}

}

а в кнопке дописываете:

<a class="addthis_button_tweet" tw:via="your_username">

Антибаннер Adblock Plus в Firefox закрывает их сразу, а кнопки соц. сетей рекламой не являются. Надо искать что-то другое

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

Elma http://www.marmarisinfo.ru

Нужно поставить кнопки внутри выравнивающего кода. Типа такого Поделиться с друзьями Еще и текст дописала, чтобы понятно было для чего это))

Elma http://www.marmarisinfo.ru

Ой, код не ставится 'Поделиться с друзьями '

Наталья http://croatianlife.ru

Я в замешательстве, может на сайте что-то поменяли, я упорно искала Gallery и не нашла.....

SHortyAlex http://paintvill.ru

Я в замешательстве, может на сайте что-то поменяли, я упорно искала Gallery и не нашла...

там теперь это всё можно выбрать на главной странице, внизу. выбираете стиль кнопок, жмете "Get your button" и Вам выдают нужный код

invest http://investclubs.ru

а просто возможно плагин поставить как здесь http://investclubs.ru, подскажите пожалуйста как в noindex его заключить как у вас на сайте.

Огромное спасибо!

Все сделала...вот только не подскажите, как поставить еще кнопку одноклассники... какой код у этой кнопки???

Ах, да... совсем забыла...не сочтите за наглость...

Подскажите еще, если можно, как сделать, чтобы ПЕРЕД этими кнопками был текст... например, ПОДЕЛИТЕСЬ НОВОСТЬЮ С ДРУЗЬЯМИ!

Заранее, спасибо! 🙂

Алексей Туманов

Елена, очень просто - пропишите нужный вам текст перед кодом сервиса. Ну, например Помогла статья?! Поделитесь с друзьями:

ShortyAlex http://elapetito.ru

Елена, есть другая возможность поставить кнопки на блог, скачать рускоязычный, удобный плагин. и надпись свою Вы тоже сможете вписать, вот он: http://wordpress.org/extend/plugins/sociable-re/

Наталия http://fullsubs.ru

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

Наталья http://croatianlife.ru

Я вот какой-то плагин поставила, а результат.... все налеплено как попало, даже и не знаю че теперь делать.

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

ShortyAlex http://elapetito

для начала Вам нужно удались старые кнопки. то есть кнопки addthis сервиса. их можно удалить простым способом:

в файлах single.php и footer.php удалить значения, отвечающие за этот сервис. в сингл убрать похожее на это:

Share

|

в футер убрать похожее на это:

var addthis_config = {"data_track_clickback":true};

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

ShortyAlex http://elapetito

никак не хочет вписывать нужные коды, коверкает их. вообщем удалить Вам нужно то, что Вы вписывали в данные файлы, эти коды Вы можете посмотреть в данном уроке...

Елена http://masterskayalenabik.ru

Спасибо Вам ShortyAlex!

Плагин, который Вы порекомендовали ну ОЧЕНЬ удобный... все переделала... вот только с текстом проблема... некрасиво получается. Оставила пока так... 🙂

ShortyAlex http://elapetito

для изменения текста, в настройках плагина, в графе "заголовок" нужно вписать-

нужный текст

ShortyAlex http://elapetito

снова не вставляется нужный код... вообщем там нужен такой вид кода:

нужный текст

то есть слово "сильный" напишите на английском-strong... должно получиться.. надеюсь Вы понимаете..

ShortyAlex http://elapetito

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

Наталья http://croatianlife.ru

Спасибо за помощь.

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

Елена http://masterskayalenabik.ru

Не переживайте так ShortyAlex!

Все хорошо... такая отзывчивость сейчас редкость. 🙂 Спасибо!

У Вас очень милый сайт. Все сами?

Я вот потихоньку твиттер осваивать начала. Аккаунт есть давно, вот только там так неудобно и непривычно... буду дальше штудировать уроки Пети...

Петя, пожалуйста, когда прочитаете этот комментарий... приходите в гости... я Вам уже писала, что как только с локального на реальный сервер все перенесу дам Вам знать. Так вот. Нам уже неделя. Все благодаря Вам!!! СПАСИБО!!!

Автор
Пётр Александров

Спасибо большое за ссылку с главное 🙂 вызвали у меня улыбку, честно, очень приятно... Желаю успехов Вам в покорении интернета!

Елена http://masterskayalenabik.ru

Будем стараться... Ваши уроки в этом большое подспорье. 🙂

Яна http://rain-love.ru/

Здравствуйте, Петр!

Понравился сервис описанный вами в статье, но к сожалению после регистрации я не нашла там даже указанной вами графы "Explore"

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

Пожалуйста подтвердите достоверность информации, написанной вами в этой статье или укажите на мою ошибку.

Заранее спасибо!

(Яна)

Автор
Пётр Александров

Да, сейчас там немного изменилась навигация, но общий принцип тот же.

ОлегЪ http://www.benatar.ru

Хорошая статья, здорово помогла настроить кнопки в моем блоге.

До этого пробовал поставить официальный плагин Wordpress. У меня он почему-то не сохранял настройки.

Сейчас на AddThis даются только коды вставляемые в сингл, в футер не нашел. Видимо не надо?)))

Есть ещё В кругу друзей:vkrugudruzei.ru/x/button/create

Ильшат http://free-moneys.ru

Вот за этот урок отдельное спасибо, т.к. именно у вас на блоге я о нем узнал))) На ОднаКнопка бывал, но там кнопки какие то унылые.

Сергей http://irinazaytseva.ru

Как вставить текст как у Вас на синем фоне:

Понравилось? Поделитесь с друзьями!

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

Автор
Пётр Александров

ЧТобы сдвинуть кнопки от правого край используйте

[php]<div style="margin-right:30px;">тут код кнопок</div> [/php]

30 пикселей меняете на свое значение.

kulturtrigger http://www.cultufa.com.ua

Петр, а можно-ли опубликовать весь блок кода, который приводит к смещению (или центрированию ) кнопок? - а то испробовал все предложенное- результат нулевой...

Андрей http://www.turmanshow.ru

в фаирворкс при нажатии на кнопку маил ру, открывется в маленьком бланке вместе с сайтом.

как исправить?

dasha) http://brunetlady.ru/

спасибо, полезная информация)

Петр а для чего у вас в коде прописано rel="nofollow" то есть полностью выглядит так:

[php]<a class="addthis_button_vk" rel="nofollow" title="Отправить в ВКонтакте"></a>[/php]

Автор
Пётр Александров

Попробуйте прочитать этот урок: http://wpnew.ru/raskrutka-bloga/seo_optimizaciya/rel-nofollow-i-noindex.html

Надежда http://vkusipol.ru

А если установить плагин WP Social Buttons? там по-моему проще :), но это только мое мнение

Артур http://komputer-life.ru/

А как сделать так, чтобы «Понравилось? Поделитесь с друзьями!» Стояло рядом с кнопками, а не сверху их? Заранее спасибо.

Даниил http://money2you.ru/

Существует отличный русскоязычный плагин Social Share Buttons, он помогает избежать суеты со вставкой кодов и тому подобное. Очень удобная штука.

Сергей

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

Даниил http://money2you.ru/

Да нет. Можно выбирать позицию расположения кнопок, а также внешний вид кнопок, то есть квадратные, круглые, закругленные и т.п. Вроде смотрится симпатично. Вот http://money2you.ru/ пример данных кнопок.

Сергей

закладки от addthis симпотнее смотрятся чем sbuttons.ru:

изменение прозрачности (opacity) при наведении курсора мыши

их можно закрепить слева, справа, снизу, сверху страницы

наличие box счетчика

закладки от addthis оптимальнее подходят для сайта любой тематики:

1) можно экспериментировать с набором кнопок

2) можно вставить скрипт который определяет в каких соц сетях "залогинен" на данный момент посетитель сайта и ему будут отображаться кнопки именно этих соц сетей

3) наличие полной статистки добавления ссылок в соц сети и статистики переходов по добавленным ссылкам

Но есть и недостатки:

основной недостаток это то что на сайте addthis отсутствует русский язык

для них слишком много настроек в которых придется разбираться как минимум пару часов

Dzed http://govorim.by/

Как добавить кнопки лайков с участием ВК? Как у вас на блоге, но именно лайки а не share?

Автор
Пётр Александров
Артёмка http://aksay.be

Большущие спасибо, установил плагин себе в блог.

Андрей

Можете помочь?

Когда ставлю "Мне нравится" от Вконтакте, у меня ставится только значок (прописываю ).

И ещё такой вопрос:

Почему у Вас, когда наводишь к примеру на "Порекомендовать в гугл" всплывает окно на русском, а у меня на английском?

Автор
Пётр Александров

Пропишите title для ссылки.

Андрей

Код не вставился

Андрей http://k-creative.ru

Здравствуйте, спасибо за ваш сайт и уроки, все получилось, но вот косяк какой то с размером кнопки и ее позиции относительно остальных как быть?

crazycoock http://k-creative.ru

Удалил эaddthis- перезалил файлы на хост, почистил хэш, а они все равно висят, а кнопкимне нравится от вконтакте не появляется. как быть?

Эко http://экологияюга.рф/

добрый день, не знаете с чем с вязан проблема с постами в FB?. при перепосте с сайта пишет

"Невозможно добавить сообщение на Стену.

Невозможно разместить сообщение на этой Стене."

твиттер работает. имя домен на кириллице

Автор
Пётр Александров

К сожалению, не знаю..

Виктор http://www.mlmonlineclub.com

Петр, почему сервис addthis.com не загружается

Автор
Пётр Александров

Вроде все работает.

Demyanych http://fx-trade.in.ua

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

Дарья http://biznes-iz-doma.ru/

Петр, здравствуйте!

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

Добавила код, кнопочки выводятся - все отлично. НО! изменяется урл при открытии с главной. То есть к нормальному урлу добавляется хвост вида #.T_IFsrU9W8A. Кстати - аналогичная ситуация и на самом сайте addThis.

Сергей

Была такая же проблема, решил перенеся часть кода в head.

var addthis_config = {"data_track_clickback":true};

Сергей

Меня интересует, если кто то сталкивался, как сделать что бы делилось не только ссылкой и заголовком, а так же фото товара. Да и ссылка не обязательна. Как это реализовать?

Vinchester http://macdrive.ru

Пётр, а вус кнопки на блоге реализованы с помощью плагина или ручками в коде прописаны?

Наталья http://ledi-uspeh.ru

После установки этого плагина с названии каждой статьи появилась надпись #.UQO3c_L-KUo Как мне ответили на форуме Вордпресс, это хвост от социальных кнопок. Подскажите, как их убрать? Заранее спасибо.

Решила воспользоваться Вашей статьей - пришлось немного помучаться: время прошло и на http://addthis.com всё выглядит немного по-другому. Пришлось разбираться. А вообще у Вас очень хорошие статьи - регулярно пользуюсь.

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

если кому интересно,вот ссылка где поясняется добавление счетчиков для наиболее популярных с точки зрения sharethis проектов http://support.addthis.com/customer/portal/articles/381237-third-party-buttons#google-plus-badge.ВК ,ясное дело,там не присутствует,а подробное описание для кастомизации обнаружить не удалось.Может посоветуете чего? =)

Заранее спасибо

Дорогие девушки Москва

текстовго документа с синонимами не нашел (((

Александр http://strojka-sovety.in.ua/

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

Виктор

Здравствуйте, Пётр!

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

Автор
Пётр Александров

Сразу одной кнопкой нельзя, к сожалению...

Addthis можно закрыть от поисковиков в noindex и nofollow, но внешние ссылки так и останутся, если они на главной в каждой статье, то 5-8 ссылок внешних Вам обеспечено. Плагин от данного сервиса ставить на сайт - засорять внешними ссылками.

Андрей

уважаемый не могу кнопки вставить по середине не выходит

с сервиса addthis которые

Galust http://videonews.am

Статья интересная и, главное, не потеряла актуальность до сих пор :))

Меня сегодня больше интересует немного другой вопрос, опять же связанный с соцсетями, а именно: хочу на блог выставить иконки от соцсетей с указанием количества подписчиков (для Youtube и Twitter), друзей (для Вконтакте, Facebook и Google+) !

Пока найти подходящего виджета не удалось, а на поклон к фрилансерам идти не хочется...

Не могли бы что-нибудь посоветовать ? Буду весьма благодарен :))

С искренним уважением, Галуст :))

Автор
Пётр Александров http://wpnew.ru

К сожалению, в этом вопросе не силен, даже не знаю, что посоветовать...

Елена http://kuhatpodano.ru

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

IvYur http://kuponam.ru

Ну если все подробно написано, то я думаю и проблем не должно случится, даже если кто-то не специалист. Главное что бы было понятно и наглядно.

Наверх Рейтинг@Mail.ru