Кнопки соцсети яндекс: Блок «Поделиться» — Технологии Яндекса – Блок «Поделиться» — Технологии Яндекса — Вебджем.рф

Содержание

Блок «Поделиться» от Яндекса v.2

Ну вот, наконец-то Яндекс обносил шару кнопок соцсетей. Теперь их внешний вид стал гораздо симпатичнее.

Блок «Поделиться» помогает посетителям вашего сайта быстро публиковать ссылки на интересные им страницы в социальных сетях и блогах.

Блок «Поделиться» позволит пользователям вашего сайта или блога в один клик поделиться контентом сайта в социальных сетях.

Как добавить блок на страницу

Вы можете создать блок для своего сайта с помощью конструктора (https://tech.yandex.ru/share/). Описание дополнительных параметров ищите в документации.

Или настроить все вручную.

Подключите скрипт блока. Чтобы загружать скрипт асинхронно и не блокировать загрузку страницы, укажите атрибут async=»async».
```
<script src="https://yastatic.net/share2/share.js" async="async"></script>
```
Поместите блок в контейнер. В качестве контейнера можно использовать любой блочный элемент, добавив атрибут class=»ya-share2″.
```
<div data-services="vkontakte,twitter,facebook,gplus" data-counter></div>
```
Настроить блок вы можете с помощью атрибутов контейнера (см. в таблице ниже).

Поддерживаемые атрибуты

Атрибут	Описание	Возможные значения
data-bare	Признак того, что загрузка стилей отключена. Если добавить атрибут, соцсети будут отображаться в виде текстового вертикального списка.	Наличие или отсутствие атрибута.
data-counter	Признак того, что на кнопке соцсети отображается счетчик публикаций. Внимание! На кнопке Твиттера счетчик публикаций отображаться не будет — Твиттер больше не поддерживает API с количеством публикаций.	Наличие или отсутствие атрибута.
data-copy	Позиция кнопки Скопировать ссылку. Кнопка Скопировать ссылку может отображаться, если используется параметрlimit.	first — кнопка внизу списка; last — кнопка вверху списка; hidden — кнопка не отображается. Значение по умолчанию: last.
data-description	Текст, которым нужно поделиться.	Строка.Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-image	Изображение, которым нужно поделиться.	URL изображения.Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-lang	Язык блока. Локализуются подписи кнопок соцсетей и кнопка Скопировать ссылку.	az — азербайджанский; be — белорусский; en — английский; hy — армянский; ka — грузинский; kk — казахский; ro — румынский; ru — русский; tr — турецкий; tt — татарский; uk — украинский. Значение по умолчанию: ru.
data-limit	Количество соцсетей, отображаемых в виде кнопок. Используется если нужно встроить в блок много соцсетей, а также чтобы блок занимал мало места на странице. Не вошедшие в лимит соцсети будут доступны по нажатию кнопки .	Натуральное число или отсутствие атрибута.
data-services	Список идентификаторов социальных сетей, отображаемых в блоке.	Несколько соцсетей указываются через запятую без пробела. Значение по умолчанию: vkontakte,facebook,twitter
data-size	Размер кнопок соцсетей.	m — большой ; s — маленький . Значение по умолчанию: m.
data-title	Заголовок, которым нужно поделиться.	Строка. По умолчанию указывается заголовок страницы, на которой размещен блок. Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-url	Ссылка, которой нужно поделиться.	Любой URL.По умолчанию указывается URL страницы, на которой размещен блок. Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.

Как было раньше. Очерки истории

Дата 28.12.2010

Взамен буржуйского AddThis (www.addthis.com) с кнопочками для сохранения понравившихся постов в соцсети, поставил на свой блог блок от Яндекса «Поделиться».

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

Дизайн блока «Поделиться» легко настраивается. На Яндексе есть подробная документация и инструкции по установке (//api.yandex.ru/share/).

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

Список поддерживаемых сервисов

В настоящее время Блок «Поделиться» поддерживает обмен ссылками с пользователями следующих социальных сетей:

Blogger;
Digg;
Evernote;
delicious;
facebook;
FriendFeed;
Google Buzz;
Google Reader;
Juick;
LinkedIn;
Живой Журнал;
Мой Круг;
Мой Мир;
MySpace;
Одноклассники.ru;
Twitter;
ВКонтакте;
Я.Ру;
Яндекс.Закладки.

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

Настройка дизайна и оптимизация внешних ссылок

Визуализацию яндексовского социального блока пришлось немного подправлять с помощью CSS: указав размер и цвет слова «Поделиться» и задав отступы для контейнера соцблока.

Но есть одно «но». Теперь каждая страница получила сразу же по 10 исходящих ссылок! (другие спрятаны под ссылкой «Поделиться»). Если будут появляться новые социальные сайты, то и ссылок на каждой странице увеличится. А этого не очень хочется для своего блога. Потому я поместил весь код в тег noindex, но его понимает только Яндекс.

<code>&lt;!--noindex--&gt;</code>
<code>&lt;script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"&gt;&lt;/script&gt;</code>
<code>&lt;div data-yashareType="link" data-yashareQuickServices="yaru,twitter,facebook,lj"&gt;&lt;/div&gt;</code>
<code>&lt;!--/noindex--&gt;</code>

Хотелось бы как-то добавить rel="nofollow"

. Но не знаю как :(. Может кто-то подскажет?

UPD: Находчивый Georg подсказал в комментах решение этого вопроса :).

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

Всем читателям блога «Вторая жизнь ITишника» большой позитивный привет! Давно не писал статьи в рубрику сайтостроение, все о компьютерах и о компьютерах. Пора поддержать и web-тематику. Сегодня я расскажу откуда взять яндекс кнопки социальных сетей (как у меня на постовых страницах) для сайта. Код социальных кнопок можно установить на любом движке (WordPress, Joomla и т.д.).

Для чего нужны на сайте кнопки социальных сетей?

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

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

Перед нами на выбор пять различных блоков кнопок социальных сетей для установки на сайт. Можете выбрать, то, что больше вам понравится или подойдет вашей странице. Однако я рекомендую установить кнопки со счетчиками. Когда есть цифры, посетитель подсознательно жмет на них. Больше кликов, выше результат. Однако в счетчиках есть маленький минус, можно установить лишь 7 кнопок на социальные сети: Я.ру, Вконтакте, Facebook, Twitter, Одноклассники, МойМир, Google+. Сказать честно, мне хватает ) В связи с закрытием сервиса блогов Я.ру, кнопка ушла. Но по последним данным появились другие дополнительные кнопки.

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

Как с помощью кнопок социальных сетей понять, какая статья наиболее популярна?

По кнопкам можно отследить какая у вас статья наиболее популярная. Понятное дело, что одна статья в поисковом запросе стоит на первом месте, а другая на 55-ом. Тут не надо быть математиком, чтобы понять, что делиться статьей в социальных сетях будут больше той, что на первом месте в поисковой выдаче. Вы зададитесь вопросом, как же понять, какая статья наиболее популярная? Тут все очень просто. После написания каждой статьи, я выкладываю анонс на subscribe.ru, в одни и те же группы. И в среднем мою статью просматривают одно и тоже количество посетителей, если только это не праздники или выходные. Через 3-4 дня я вижу, на сколько полезной оказалась моя информация.

Жду цифр ) Посмотрим, насколько полезным оказался данный пост. Не забываем подписываться на новые статьи.

Лучшее «Спасибо» — ваш репост

Установка кнопок Поделиться от Яндекс в шаблон блога на Blogger

Знаю, что тема с социальными кнопками не нова. Да и расписывать что-то о гаджете «Поделиться» от Яндекс нет никакого смысла. В тоже время, искать нужную информацию о его установке в шаблон блога на Blogger как-то напрягает. Поэтому решил опубликовать свою статью с пошаговой инструкцией и лишь некоторыми полезными пояснениями. Надеюсь, это сэкономит вам время и поможет добиться наилучшего результата.

Содержание

Введение

А начну я с того, что гаджетов для шаринга (англ. share – доля, участие, пай) в социальные сети достаточного много, например UpToLike. Здесь важно понимать, что шаринг включает в себя как ссылку, так и плюс, лайк и т.д., но сама отметка иногда может идти отдельно. Тем не менее, лучше совместить приятное с полезным и избавиться от лишнего на страницах сайта, например, оригинальных кнопок соцсетей, т.к. они создают дополнительную нагрузку на ресурс.

Кнопки соцсетей «Поделиться» от Яндекс

С моей точки зрения, самым оптимальным вариантом здесь будет использовать гаджет «Поделиться» от Яндекс. Он прост, удобен и стабилен. При желании вы можете сгенерировать нужный вам вариант на этой странице. Конечно, там даны далеко не все фишки, но тем не менее.

Следует также отметить, что если у вас установлен счётчик Яндекс.Метрика, вы сможете использовать отчет: Содержание > кнопка «Поделиться» – для отслеживания статистики кликабельности социальных кнопок и страницам сайта, где они расположены. Очевидно, что такая статистика очень полезна в плане изучения аудитории вашего сайта и выбора той социальной сети, где она присутствует.

Установка кнопок в шаблон блога на Blogger

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

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

Шаг 2. Авторизуемся на Blogger и переходим в раздел «Шаблон» нужного блога. Предварительно рекомендую сделать резервную копию шаблона, для этого воспользуйтесь кнопкой «Резервное копирование и восстановление» (она находится в правом верхнем углу страницы). Далее кликаем кнопку «Изменить HTML».

Шаг 3. На открывшейся странице редактора, вам нужно найти в коде шаблона закрывающийся тег

</HEAD>. Для этого кликните по текстовому полю редактора шаблона и нажмите комбинацию кнопок Ctrl+F. В самом редакторе шаблона появится форма поиска, куда надо ввести: </head> – и нажать кнопку Enter. Нужный тег, будет выделен желтым цветом.

Шаг 4. Перед этой строкой вам нужно будет вставить HTML-код вызова JavaScript библиотеки кнопки «Поделиться» от Яндекс:

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

<b:if cond=’data:blog.pageType == "item"’><script src=’/share/share.js’ type=’text/javascript’ charset=’utf-8’/></b:if>

Таким образом, скорость загрузки других страниц будет куда как выше.

Примечательно здесь и то, что сам гаджет работает в кодировке UTF-8. Поэтому, если вы используете другу кодировку, обязательно явно укажите кодировку для вызова JavaScript библиотеки, т.е. атрибут:

charset='utf-8'.

Шаг 5. Теперь найдите и выберите в списке «Список виджетов» (он находится рядом с оранжевой кнопкой «Сохранить шаблон») виджет «Blog 1». Таким образом, вы будете автоматически перенаправлены к нужному виджету, который состоит из нескольких инклудов (англ. includable). Среди них нас интересует тот, что с id='post'. Для того, чтобы раскрыть его, вам нужно кликнуть по стрелочке в соответствующей строке.

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

<b:if cond=’data:post.hasJumpLink’><div><a expr:href=’data:post.url + "#more"’ expr:title=’data:post.title’><data:post.jumpText/></a></div></b:if>

Главный ориентир это шаблонные переменные

data:post.hasJumpLink (показывать ли ссылку) и data:post.jumpText (текст ссылки подробнее). Сразу после этого условия, т.е. тега </b:if> вам нужно вставить следующий код:

<b:if cond=’data:blog.pageType == "item"’>
<div><div data-yashareL10n=’ru’ data-yashareQuickServices=’twitter,facebook,vkontakte,moimir,odnoklassniki,gplus’ data-yashareTheme=’counter’ data-yashareType=’big’ expr:data-yashareDescription=’data:post.snippet’ expr:data-yashareImage=’data:post.thumbnailUrl’ expr:data-yashareLink=’data:post.url’ expr:data-yashareTitle=’data:post.title’/></div>
</b:if>

Как вы видите, я и здесь использовал условие, что гаджет «Поделиться» от Яндекс, будет выводиться только на страницах со статьями, но это не значит, что он не будет работать на страницах архива. Опять же, DIV с id='sharethis' не обязательный, его я использую лишь для дополнительного оформления гаджета.

Шаг 7. Вот собственно и всё, жмем кнопку «Сохранить шаблон» и наслаждаемся результатом. Тем не менее, я рекомендую ознакомиться с тем, что и как работает, а также как это всё можно красиво оформить.

Параметры гаджета «Поделиться» от Яндекс

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

data-yashareL10n – идентификатор языка гаджета. По умолчанию: ru.
data-yashareQuickServices – идентификаторы социальных сетей и сервисов, перечисленных через запятую, для формирования кнопок в гаджете. По умолчанию использован стандартный набор. У себя я использую оптимальный, с моей точки зрения, набор и последовательность кнопок в виде: Twitter, Facebook, ВКонтакте, Мой Мир@Mail.ru, Одноклассники и Google+.
yashareTheme – тема оформления гаджета, по умолчанию «ссылка». У себя я использую вариант «счетчики» (counter ), т.е. кнопки со счётчиками.
data-yashareType – недокументированный параметр, который определяет тип кнопок в гаджете. У себя я использую вариант «большие» (big). Можно не указывать.
data-yashareDescription – краткое описание статьи. По умолчанию определяется автоматически на основе метатега description текущей или указанной в data-yashareLink страницы. К сожалению, на Blogger существует только шаблонная переменная data:blog.metaDescription, но она выводит описание для текущей страницы (подробней тут), что не подходит для тех же страниц архива. Поэтому я предлагаю или не указывать этот параметр или использовать шаблонную переменную data:post.snippet, которая содержит начальный текст поста.
data-yashareImage – URL-адрес картинки. По умолчанию определяется автоматически на основе ссылки image_src, метатега og:image, первой картинки на текущей или указанной в data-yashareLink страницы. На Blogger URL-адрес картинки содержит шаблонная переменная data:blog.postImageThumbnailUrl (для текущей страницы) и data:post.thumbnailUrl (для отдельного поста). К сожалению, размер этой картинки всего 72 пикселя, что приемлемо не для всех соцсетей. У себя на блоге я использую простенький трюк, о котором писал тут.
data-yashareLink – URL-адрес страницы, т.е. ссылка шаринга. По умолчанию определяется автоматически для текущей страницы. Это значение содержится в шаблонной переменной data:blog.canonicalUrl (для текущей страницы) и data:post.url (для отдельного поста).
data-yashareTitle – заголовок страницы, т.е. текст ссылки (анкор). По умолчанию определяется автоматически на основе тега TITLE на текущей или указанной в data-yashareLink страницы. Это значение содержится в шаблонной переменной data:blog.pageName (для текущей страницы) и data:post.title (для отдельного поста).

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

Оформления гаджета социальных кнопок

Я не просто так использовал дополнительный DIV в коде гаджета, т.к. это позволяет оформить его надлежащим образом. Например, у себя на блоге я добавляю картинку с надписью: Понравился пост? Поделись с друзьями! – и стрелочкой на гаджет. Для этого, с учётом выше приведённого кода, достаточно добавить следующий CSS:

#sharethis {
background:url(‘/-65B3BIcn6Ho/UPsukLoCTiI/AAAAAAAAh4w/XQC1s6H0OEs/s800/share.png’) 0 15px no-repeat;
padding:60px 0 10px 10px;
}

Добавить его можно непосредственно в шаблон, в секцию b:skin или через дизайнер шаблонов: Шаблон > Настроить > Дополнительно > Добавить CSS. На этом у меня всё. Спасибо за внимание. Поделитесь моей статьёй с друзьями в социальных сетях. Удачи!

Короткая ссылка: http://goo.gl/n4wkoZ

Плагин Яндекс Поделиться кнопки соцсетей настройка ! – INFO-EFFECT

На чтение 2 мин. Опубликовано 25.08.2015

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

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

Итак, плагин называется – Яндекс.Поделиться, установить данный плагин вы сможете прямо из своей админ-панели wordpress. Перейдите по вкладке: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте открывшийся плагин. Кстати, в форму поиска вводите – Yandex, а не само название плагина, потом просто опуститесь вниз страницы и увидите там этот плагин. А то по названию плагина не найдёте.

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

На странице добавления кнопок выберите соцсети для кнопок, вид кнопок и нажмите на кнопку – Сохранить.

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

Супер кнопки поделиться плагин Яндекс WordPress – INFO-EFFECT

На чтение 2 мин. Опубликовано 14.03.2018

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

ВКонтакте
Мой Мир
Skype
Evernote
Qzone
Tencent Weibo
Facebook
Живой журнал
Viber
Pocket
Reddit
Одноклассники
LinkedIn
WhatsApp
Яндекс
Renren
Google+
Pinterest
Telegram
Delicious
Sina Weibo
Twitter
Tumblr
Blogger
Digg
Surfingbird

Установить плагин Yandex Share 2 вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу: Настройки – Блок Поделиться. Здесь вы можете настроить плагин.

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

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

– Размер кнопок.

– Отображение. Горизонтально или вертикально.

– Лимит кнопок.

– Facebook токен. Не обязательно.

– Счетчик. Показывает сколько раз поделились.

– Bare. Оставьте по умолчанию. Ничего не меняет.

– Сохраните изменения.

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

Самый большой в интернете каталог плагинов WordPress с руководством по настройке!

Остались вопросы? Напиши комментарий! Удачи!

Яндекс позволил добавлять на турбо-страницы виджеты, комментарии и кнопки соцсетей

Команда Яндекс.Поиска сообщила о существенной доработке функционала турбо-страниц. Теперь есть возможность на них добавлять:

Speed_1

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

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

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

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

Журналист, новостной редактор, работает на сайте с 2009 года. Специализация: интернет-маркетинг, SEO, поисковые системы, обзоры профильных мероприятий, отраслевые новости рунета.

Кнопки соцсети яндекс: Блок «Поделиться» — Технологии Яндекса – Блок «Поделиться» — Технологии Яндекса