Блок Яндекса Поделиться и другие кнопки социальных сетей для сайта (Facebook, Google+, Twitter, ВКонтакте)

10 Январь, 2014

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

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

Социальные сигналы так же учитываются и поисковыми системами при ранжировании вашего сайта. Большое количество расшариваний в качественные аккаунты в Твиттере, Google+, Фейсбуке (возможно, что Вконтакте и другие сети тоже учитываются) может позволить вам подняться на определенное число шажков повыше и, возможно, войти в Топ и удержаться там, если поведенческие факторы не подкачают.

Блок «Поделиться» от Яндекса и другие варианты позволяют очень быстро и в удобной форме расшарить понравившуюся посетителю статью. Ему остается лишь щелкнуть по кнопке нужной ему социальной сети и фактически на этом его работа будет закончена. Все необходимые поля заполнятся автоматически (Урл, название заметки, дополнительное описание, картинка и т.п.). Лепота.

Социальные кнопки от Яндекса — блок Поделиться


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

Недавно, кстати, они добавили возможность отображения на кнопках числа расшариваний в данную социальную сеть. Причем учитываются все посты, а не только те, что были сделаны с помощью этого блока. Поддерживаются не все социальные сети (только facebook, Google+, Мой Мир, Одноклассники.ru, Twitter, ВКонтакте и Я.Ру), но большинство основных.

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

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

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

Кроме блока со счетчиками, Яндекс предлагает одну комбинированную кнопку соцсетей, нажав на которую вы увидите выпадающий список восьми самых популярных представителей: Одноклассники, Я.ру, Вконтакте, Facebook, Twitter, Livejournal, Friendfeed, МойМир, Google+ (лично мне не хватает еще Pinterest или Pinme, но они уже вроде бы намечены).

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

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

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

После того, как все необходимые настройки в конструкторе будут сделаны, вам останется только скопировать результирующий код блока «Поделиться» от Яндекса. Если вы обратите внимание, то увидите, что он состоит как бы из двух частей.

<script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>

<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareQuickServices="vkontakte,facebook,twitter,gplus" data-yashareTheme="counter"></div> 

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

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


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

<script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>

Проблема может возникнуть с тем, чтобы найти среди множества файлов движка своего сайта тот, который отвечает за формирование самой нижней части Html кода с закрывающим тегом /BODY или же того, который формирует Head. Давайте я просто расскажу по быстрому как это сделать для Joomla и WordPress.

Итак, прежде всего нужно подключиться к вашему сайту на Joomla по FTP, а потом открыть на редактирование в удобном для вас редакторе файл index.php, из папки с используемым вами шаблоном:

/templates/название_папки_с_шаблоном/index.php

В самом его низу вы найдите закрывающий тег /body, вставьте сразу перед ним код вызова скрипта кнопок Яндекса. Получится примерно так:

		<!-- footer end -->
		</div>
	</div>
<script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>
</body>
</html>

Если вы работаете с WordPress, то для этого потребуется открыть на редактирование файл footer.php (или header) из папки с используемой вами темой оформления WordPress:

/wp-content/themes/название_папки_с_используемой_темой_оформления/footer.php

В самом его конце найдите закрывающий тег /body. Получится примерно так:

<!--footer end-->
<?php wp_footer(); ?>
</div>
<script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>
</body></html>

Теперь останется только вставить в нужное место шаблона вашего сайта или же прямо в статью вторую часть кода социальных кнопок Яндекса:

<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div> 

Кстати, сразу оговорюсь, если вы захотите удалить какую-либо кнопку из этого блока, то необязательно опять идти в конструктор на сайте Яндекса. Можно будет просто убрать ее запись из этого списка (вместе с запятой идущей после нее, например, «vkontakte,»):

data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"

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

Для этого в свой файл style.css, из папки с используемой мною темой Вордпресс, я прописал CSS свойство padding, о котором можете почитать здесь.

span.b-share-icon {padding:0 0 0 33px !important;}

Но вернемся к вставке блока «Поделиться» от Яндекса в наш шаблон. В WordPress для этого я открыл на редактирование файл из моей темы оформления под названием single.php и вставил код кнопки сразу после строки, задающей вывод статьи на блоге:

  <?php the_content('Читать полностью'); ?> </index>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareQuickServices="vkontakte,facebook,twitter,gplus" data-yashareTheme="counter"></div> 

Мои длинные тайтлы всегда вызывали проблемы с добавлением сообщений в Твиттер, поэтому мне раньше приходилось ставить оригинальную кнопку от этой социальной сети и немножко ее дорабатывать, как показано чуть ниже. Сейчас разработчики Яндекса сделали автоматическое обрезание отдаваемого в Твиттер сообщения, но почему-то просчитались на один символ (написал в их техподдержку — может пофиксят):

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

<script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareQuickServices="twitter,facebook,vkontakte,gplus,odnoklassniki,moimir,yaru" data-yashareTheme="counter" data-yashareTitle="<?php trim_title_chars(124, '...'); ?>"></div>

Т.е. я добавил специальный атрибут data-yashareTitle в тег DIV (его описание вы найдете в документации к блоку Поделиться), который обрезает отдаваемые в социальные сети тайтлы на 124 символе (получено методом тыка). Это будет работать только для WordPress.

data-yashareTitle="<?php trim_title_chars(124, '...'); ?>"

Правда для того, чтобы это сработало в файле functions.php из папки с темой WordPress, нужно будет добавить функцию trim_title_chars:

function trim_title_chars($count, $after) {
 $title = get_the_title();
 if (mb_strlen($title) > $count) $title = mb_substr($title,0,$count);
 else $after = '';
 echo $title . $after;
}

В общем, где-то так в том аспекте, что касается моего блога на WordPress.

В Joomla для вставки этого блока, наверное, проще всего будет воспользоваться модулем Произвольного Html кода, расположив его в позиции шаблона, где-нибудь сразу под текстом статьи.

Как вставить модуль в текст материала (статьи) Joomla

Либо можно этот модуль Joomla с кодом кнопки социальных сетей от Яндекса расположить в несуществующую позицию шаблона (банально набрать в поле выбора позиции в настройках модуля произвольного Html кода что-нибудь типа: yandex-knopka). А затем, уже при написании или редактировании статей, вы сможете вставить в конце конструкцию:

{loadposition yandex-knopka}

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

Кстати, если вдруг этот способ у вас не работает, то зайдите в менеджер плагинов (из админки Joomla выберете пункты меню «Расширения» — «Менеджер плагинов») и найдите, а затем активируйте «Content — Load Module». Он входит в стандартный комплект поставки Joomla, поэтому он у вас должен быть в обязательном порядке.

Официальные кнопки социальных сетей


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

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

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

Кнопку Google+1 добавить на свой сайт можно будет руководствуясь приведенной по ссылке инструкцией. Сам конструктор найдете тут.

Ну и, конечно же, не могу не упомянуть про официальную кнопку Twitter, которая появилась относительно недавно. Ее конструктор расположен здесь. Естественно, что в ней предусмотрена возможность подсчета числа ретвитов и у вас будет возможность задать ее внешний вид :

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

<a rel="nofollow" href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php trim_title_chars(110, '...'); ?>" data-count="none" data-lang="ru" >Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Другие вариант получения кнопок соцсетей для сайта


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

Еще я нашел на просторах интернета интересный материал по самостоятельному созданию подобных кнопочек для Joomla (вот эта статья).

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

Для этого внутри области для контента (при написании статьи) в фигурных скобках пишется слово loadposition, а через пробел — выдуманное название позиции в шаблоне, которое вы задали для модуля, например, {loadposition bookmarks}.

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

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

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

В общем, сами смотрите, сравнивайте и выбирайте.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :SMO продвижение сайта

Комментарии и отзывы

polezno

Спасибо. Уже поставил на паре своих блогов.

Олег

Замечательная статья. Я наконец-то уяснил до конца для чего ставятся на сайт эти фишки. Теперь стану использовать на всю катушку.

Надежда

Думала, что без плагина не обойтись. А тут, оказывается, все просто!

Инна

Спасибо! Полезно и доступно, как всегда!

Skreebl

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

Виктор

А на локальном компьютере будет работать.

Виктор

А можна с помощю {loadposition ХХХХХХХХХХ} вивесть модуль Joomla в любом месте сайта.

Станислав

Спасибо, за интересную информацию. Поставил в своём интернет-магазине — буду смотреть на эффект.

Ирина

Спасибо!

Вот наконец-то решила развивать свои ресурсы...

Искала долго кнопку Я.РУ.

И у Вас нашла! 🙂

Ирина

Вот только не могу найти кнопочку liveinternet. 🙁

ЛедиШик

Спасибо за подробное описание установки кнопки от яндекса. искала и нашла.

Andrey

Возник вопрос. Вы рекомендуете закрывать в , а как закрыть их от googla. Поднимал тему на серче толкового ответа не получил.

VeloLIVE

Все получилось, не нужно подсказывать. Спасибо за идею 😉

VeloLIVE

Все получилось! Спасибо за идею!

Андрей

А как же все таки реализовать закрытия этого скрипта в nofollow, т.к. лишние ссылки уж никак не нужны на сайте...

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

макс

Joomla. Какой шаблон? зачем разбивать код на две части?

просто вставляем код в модуль html и всё! где надо там его публикуем, где не надо вставляем в текст, для вставки в текст есть отличный модуль — Modules Anywhere он всегда нужен когда необходимо вставить модуль в текст.

ВСЁ!

за яндекс блок поделиться не знал — спасибо

Дмитрий

Супер! до этой статьи пытался запихнуть на сайт каменты + кнопочку «мне нравиться» Вконтакте...постоянно после установки новых модулей слетал код.

сайт на joomla

Набрел на эту статью, все доступно и понятно.

Хотя сложность возникла, через файлзилу не ставил ни в какую, но последний вариант помог с модулем произвольного Html кода.

Теперь у меня и каменты, и вставка с кнопками.

Кстати установил отдельно на статьи комментарии через произвольный Html

кому интересно, в самом низу страницы все!)

(это не спам, просто я рад и делюсь с вами успехами!)

В общем, выражаю автору респект за такие статьи, очень помогают начинающим!!

Дмитрий

Спасибо, тоже воспользовался кнопками от Яндекса. Размещал на Joomla, только хотел заметить что по приведенному примеру не работает, если ставить перед закрывающим тегом body, поставил в начале — все нормально. Или как советовал Макс — не бить на две части

Евгений

Здравствуйте! Я первую часть кода вставил в файл index.php (все это для Joomla). А вторую часть никак не могу понять куда (в какой файл) вставлять в Joomle. Подскажите, пожалуйста, начинающему. Правда, нужно. Спасибо за ответ.

Вот эту фразу не понимаю «В Joomla для вставки кода кнопки от Яндекса, наверное, проще всего будет воспользоваться модулем Произвольного Html кода, расположив его в позиции шаблона, где-нибудь сразу под текстом статьи.»

Natali

спасибо за кнопочку!

А я ее просто в конец каждой интересной статьи повставляла, мне нравится)))

Nel

Ребят, а если сайт просто на html (типа сайт-визитка), как этот код вставить? Не выходит((

Если просто весь код вставить на страницу, то сначала сайт очень долго грузится, а потом кнопка просто не появляется((

Помогите плиз!

Или на html это не поставить???

blob

Евгений:

Вот эту фразу не понимаю — создаешь модуль. Тип модуля — произвольный хтмл код. Туда вставляешь код. Модуль публикуешь в какой-нибудь позиции шаблона.

Вставил тему от яндекса в virtuemart проблема: в 8 Explorer не работает. Ругается на яндексовский скрипт.

: Сведения об ошибке на веб-странице

Агент пользователя: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)

штамп времени: Tue, 11 Jan 2011 15:14:49 UTC

Сообщение: Неизвестная ошибка выполнения

Строка: 1

Символ: 25366

Код: 0

URI-код: http://yandex.st/share/share.js

В опере работает.

Mist

А как сделать, чтобы вставлялась не просто ссылка, а анкором — анонс записи?

Тот, который the_excerpt.

kapitonovih

Послушайте, кто нибудь знает как "Поделиться2 в ЖЖ вставить можно? Ну ни как не получается.

Алла

Дмитрий, добрый день!

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

Роман

У меня не получается ничего. Пробую в Joomle. В конце статьи вместо кнопок появляется html-код. И статья искажается. Уже попробовал разные способы, но ничего не работает. Помогите, пожалуйста, очень хочется на сайте такие кнопки поставить.

Евгений

Вот хорошее решение для джумлы, если стоит jcomments.

http://ar2r-studio.ru/joomla-button-2.html

Аж две статьи.

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

Андрей

А у меня почему-то и блок «Поделиться» от Яндекса иногда подтормаживает. Он у меня расположен сразу под контентом. После блока идет яндекс-директ и вывод похожих статей. Загружается левое меню, статья, яндекс-директ и похожие статьи. А правое меню не грузится. Я уже и не знал в чем причина. Думаю: раз до вывода последних статей догружается, значит причина в коде, который идет после них. А дальше у меня идет бегун и реклама от ледикэш. Убрал их, но ситуация не поменялась. Хотел уже обращаться к программисту, скрины сделал, а потмо заметил, что на недогруженной странице отсутствует блок «Поделиться». Значит, все-таки в нем дело.

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

ЕМ

вставляю яндексовский код код кнопок: в статьях — работает, в virtuemarte в описании товара — нет. Код не вставляется (пропадает после сохранения) ни в редакторе ни без редактора. а хочется вставить именно в VM.

может, кто сталкивался с таким ?

Васек Например

Кто может подсказать, как сделать что-бы кнопки от Яндекса выводились во всех статьях автоматически, без вставки каждый раз в статьи {loadposition yandex-knopka}, вот.

Роман Ваховский

Я скрипт влепил прямо на страницу в админке и все заработало. Частями скрипт вставлять в файл *.php и на страницу только для статей?

Алексей

а как установить кнопки «мне нравится» от вконтакте и фэйсбука а также «поделиться» именно так как на вашем сайте сразу после статьи внизу в таком блоке специальном, в котором еще есть получать обновления на E-mail и rss? мне именно такое отображение понравилось

Дмитрий

Алексей: в принципе, обычные Div контейнеры, положение которых задается с помощью CSS классов в файле стилевого оформления из папки с используемой мною темой WordPress. Позиционирование осуществляется стандартными CSS свойствами margin и padding.

Алексей

Дмитрий: спасибо.

Максим

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

Статья отличная, спасибо!

Руслан

После прочтения статьи и себе на сайт поставил кнопки Вконтакте и фейсбука.

Серега

А какие минусы у сервиса одна кнопка?

Adrian

Подскажите пожалуйста как добавить кнопку поделится (можно те что от Яндекса) сразу в статью (движок Joomla).

Сергей

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

На Яндексе код генерируется:

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div> 

В футере он стремно смотрится, а single.php его не воспринимает. У меня WordPress. Приходится в ручную пихать код целиком после каждого поста.

Подскажите, пожалуйста, как это сделать один раз и навсегда?!

Ну, нет на Яндексе того кода, о котором Вы пишите...

Заранее благодарю за ответ!

Сергей

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

На Яндексе генерируется совершенно другой код... То, о чем Вы пишите, почему-то, нет. Причем, он сильно отличается... Как разбивать?

Максим

благодарю за разъяснения

Андрей

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

Да и сайт ваш классный сто раз мне помог в многих вопросах!

Ярослав

Извяняюсь что не в тему но нужна помощь. Поставил код кнопки СПАСИБО Webmoney через произвольный код вместе где «ваш домен» написал адрес сайта без www. теперь вместо сайта грузится белый лист. Модуль через админ панель удалил не помогло... с www грузится. а без него нет.

Алекс

Кто знает — как стилизовать Лайки — или это нереально? там во фрейме они выводятся...

Guest

Спасибо за статью!

Я занимаюсь зарубежным сайтом, и для него использую addthis.com

Мне кажется, там есть все кнопки и соц сети какие могут быть

Но вот думаю, какой отрицательный эффект они могут оказать при продвижении?

Константин

Здравствуйте! Очень грамотный и полезный блог. Но у меня НИКАКИМ из вышеуказанных способов вставить Я-кнопки в джумла-сайт не получается. Файл index.php открывается в редакторе в таком виде http://s017.radikal.ru/i421/1112/90/e38f0982baee.jpg. Вставка в HTML-модуль тоже безрезультатна, плагин «загрузка модулей» активен. Подскажите что сделать.

Игорь

У меня в теме по другому

подскажите куда вставить скрипт закладок

Евгений

Спасибо большое очень помогло))))

только чуточку переделал. если кому интересно то я вставлял весь код от яндекса прямо в шаблон\html\article\default.php в то место где заканчивается описание класса modifydate после span но до php endif

Chip

Дмитрий, добрый день. Никак не получается установить блок «поделиться» от яндекс на сайт. Генерируется вот такой код:

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter"></div>

пробовал полностью вставлять этот код в сингл (на некоторых сайтах так учат) после content — блок не выводится. Более того ломается плагин auto-highslide (он отвечает за увеличение фото)непонятно почему.

По вашему методу нужно добавить строку в сингл, а в футер вставить весь сгенерированный код или

только часть со скриптом вот эту

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
???

Мне неясно, что делаю не так.

Chip

P.S. Забыл дописать в пред. комменте

По вашему методу нужно добавить строку

<span id="ya_share1"></span>
в сингл, а в футер вставить весь сгенерированный код или только часть со скриптом вот эту

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>

???

Александр

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

MMDance

Скажите как быть?Как я понял поделится можно только на той странице и самой страницей на которой расположен код...а что делать если надо например так: есть страница downloads.php там например есть код вывода инфо о mp3 файле и ссылка на скачивание, и на главной сайта тоесть index.php например есть ссылка на этот самый downloads.php вот хотелось бы чтобы на главной рядом с сылкой на этот файл downloads.php были кнопки поделится,чтобы он делился содержимым downloads а не index.можно как-то?

Александр

Добрый день, Дмитрий!

А как сделать, чтобы перед кнопками располагалась надпись (в одну строчку)? какой стиль css прописать?

Ольга

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

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

Пробовала разные варианты многие готовые скрипты, но ничего не выходит. Есть у меня такой же сайт с этой же темой — там все получается — здесь нет. Сайт vasilisa-lux.com

Помогите, пожалуйста

Т

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

Алена

Полезная статья!

Только у меня вопрос. Вы пишете, что «учитываются все посты, а не только те, что были сделаны с помощью этого блока». Это действительно так? То есть, к примеру, на сайте уже были установлены кнопки каждой соцсети по отдельности, а потом мы установили блок Поделиться — он будет учитывать репосты со старых кнопок и с блока Поделиться?

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

Дмитрий

Алена: информация о расшариваниях (репостах) берется, насколько я понимаю, непосредственно у самих социальных сетей, а не из данных установленных у вас кнопок. Как это делается — другой вопрос, на который я не знаю ответ. Но, это легко проверить.

art

Как сделать так чтобы при нажатии на картинку, открывалось окно соц сети с возможностью опубликовать пост на странице (к примеру ВКонтакте)?

Марат

Как сделать «Плавающие» кнопки социальных сетей от яндекс на WordPress-блоге?

Дмитрий

Марат: ну, как бы, можно по аналогии с тем, как я сделал плавающий сайдбар. Можно использовать Шаре42 или Easy Social Share Buttons (платный плагин).

Ирина Иванькина

Здравствуйте,Дмитрий!Обновление WP привело к появлению вертикальной панели с кнопками социальных сетей слева.Подскажите,пожалуйста,ПОПУЛЯРНО,как ее убрать и перейти к традиционному горизонтальному виду.Спасибо.

Дмитрий

А как написать свой текст в окно поделиться facabook и вставить изображение?

Виктория

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

Александр

Всё ясно кроме одного. Поясните пожалуйста, почему файлы в вордпресс нужно редакировать через ftp соединение. Ведь то же самое можно сделать админку: внешний вид -> редактор ? В чём разница?

Дмитрий

Александр: во встроенном в WordPress редакторе (насколько я понимаю) нет возможности откатиться на нужное число шагов назад. Понимаете? Если что-то напортачите, то потом придется вспоминать, а что же тут было до ваших изменений. Можно, конечно же, бекап делать файлов, но уж лучше сразу через Файлзилу в Нотепаде открывать, где всегда можно откатиться назад и начать все сначала (без кусания локтей и выворачивания рук от отчаяния). ИМХО.

Вадим

Собственно вопрос как и у Виктории.

Я установил кнопки от YandexShare

При нажатии на кнопку Поделиться (в ВК) — хочу что бы подтягивалась нужная мне картинка и описание. Как это сделать? Почитал тут http://habrahabr.ru/company/softline/blog/144946/

Но при вставке метатегов перед ничего не происходит.

Очень прошу помочь решить проблему.

Игорь

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

Ярослав

Здравствуйте! А подскажите пожалуйста, как вставить на сайт блок кнопок со ссылками на группы в соцсетях? Как у вас на сайте в верхнем правом углу.

Дмитрий

Ярослав: Здравствуйте!

Это вручную сделано. Если интересно, то код примерно такой:

<a rel="nofollow" class="rsskt" href="http://feeds.feedburner.com/Ktonanovenkogoru" title="RSS сайта KtoNaNovenkogo.ru" target="_blank"></a>
<a rel="nofollow" class="emailkt" href="http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru" title="Подписаться по e-mail" target="_blank"></a>
<a rel="nofollow" class="vkon" href="https://vk.com/ktonanovenkogoru"  title="KtoNaNovenkogo.ru В Контакте" target="_blank"></a>
<a rel="nofollow" class="twit" href="https://twitter.com/KtoNaNovenkogo" title="KtoNaNovenkogo.ru в Twitter" target="_blank"></a>
<a rel="nofollow" class="face" href="http://www.facebook.com/KtoNaNovenkogo.ru" title="KtoNaNovenkogo.ru в Facebook" target="_blank"></a>
<a rel="nofollow" rel="publisher" class="goog" href="https://plus.google.com/107949091476526100342" title="KtoNaNovenkogo.ru в Google+" target="_blank"></a>

Кнопки я использовал, по моему, из Шаре42

В style.css соответственно имеются такие строки:

.twit {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px  0;padding:0;outline:none;background:url(/icons.png) -0px 0 no-repeat;}
.vkon {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:18px 20px 0px 0;padding:0;outline:none;background:url(/icons.png) -24px 0 no-repeat;}
.face {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px  0;padding:0;outline:none;background:url(/icons.png) -48px 0 no-repeat}
.goog {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(/icons.png) -96px 0 no-repeat}
.rsskt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 55px;padding:0;outline:none;background:url(/icons.png) -120px 0 no-repeat}
.emailkt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px  0;padding:0;outline:none;background:url(/icons.png) -144px 0 no-repeat

Алена

Доброго времени суток.

Установила кнопочки Яндекса (скрипт в подвале). Проверила скорость загрузки страницы. Увеличилась в разы

Может подскажете как установить социальные кнопки, чтобы это особо не отражалось на скорости? Может плагин попробовать? На ВП их достаточно

Александр

Спасибо огромное за статью!

Игорь

В facebook, подгружается не тот текст. Несмотря на то что код вставлен в файле default.php (который отвечает за вывод статей) по пути component/com_content/views/article/tmpl, в фейсбуке подгружается текст выводимый модулем. Кто сталкивался, подскажите пути решения

Morgan

Вот еще есть красивые векторные кнопки — share.itraffic.su

Помимо стандартных круглых / скругленных кнопок можно выбрать кнопки соцсетей разных форм: от звездочек до сердечек. Есть даже в форме гарнитуры.

Понравился малый вес (около 40Кб подгружаемого кода) и то что идет всего 1 запрос к серверу.

P.S.

Себе на сайт поставил кнопки в форме комментов, пока доволен.

Ранее пользовался PLUSO пока там не начали пихать в код ссылки на левые сайты и картинки.

Жанночка

Спасибо за подробную статью. Нашла недавно ещё интересные кнопки — goodshare.js (как понимаю, это jquery плагин?). Так вот, хотелось бы увидеть такой же развёрнутый (качественный) обзор на них 🙂 По тому, что прочитала про них в интернете — довольно годные, достойные внимания! В общем, Дмитрий, сделайте плиз статейку... Вот их гитхаб: https://github.com/enjoyiacm/goodshare.js/ и офф страница: http://goodshare.ru

Олег

Дмитрий, здравствуйте

почему у Вас на блоге стоит блок Яндекс.Поделиться, а громоздкий плагин UpToLike, который делает 30 лишних обращений к базе?

Подписаться не комментируя