Кнопка поделиться вконтакте для сайта: Интеграция | Виджеты | Публикация ссылок

Содержание

Яндекс кнопка «Поделиться» (facebook, вконтакте, одноклассники, мой мир)

Яндекс кнопка «Поделиться» (facebook, вконтакте, одноклассники, мой мир)

Для чего нужна кнопка «Поделиться»? А для того, чтобы пользователи могли делиться полезной информацией со своими друзьями в таких социальных сетях как Facebook, Вконтакте, Одноклассники, Мой мир, Livejournal, Я.ру, Friendfeed, Мой круг.

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

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

Как поставить кнопку Яндекса «Поделиться»? Для того чтобы настроить и получить кнопку «Поделиться» пройдите по этой ссылке.

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

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

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

Внешний вид и код кнопки «поделиться» для вставки на сайт, блог или форум

Естественно, когда будет вставлять код кнопки на страницы сайта, вам необходимо переключиться в режим HTML. При вставке кода в сайт или блог на WordPress никаких проблем не возникает, т.к. движок относится лояльно к различным скриптам. Другое дело, если используете CMS Joomla с редактором JCE, который удаляет весь код отличный от классического HTML. В этом случае, на время вставки кода кнопки «поделиться», отключайте визуальный редактор в настройках движка и работайте в режиме HTML.

Собственно, если вам понравился этот пост, то щелкните по кнопке «Поделиться», которую я приготовил для сайта «Компьютер для чайников».

Евгений Мухутдинов

Как добавить виджет на сайт. Часть 1 ВКонтакте.

Как добавить виджет на сайт. Часть 1 ВКонтакте.

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

Что такое виджеты?

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

Для чего нужны виджеты?

Во-первых, для того что бы люди зашедшие на Ваш сайт могли остаться с Вами, подписавшись на Ваше сообщество в социальной сети;

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

 

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

Нам нужно попасть на страницу «разработчикам» 

Можно к этому прийти двумя способами, первый это собственно нажать на эту ссылку, либо в низу любой страницы ВК есть кнопка, которая так и называется «разработчикам» (рис 1). Быстрее всего попасть вниз страницы через «закладки» или «настройки».

Рис 1.

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

Рис 2.

Вот мы и перешли на нужную нам страницу с виджетами.

Начнем с самого  простого виджета, — это виджет-сообщества на вашем сайте. Этот виджет тесно свяжет Ваше сообщество с сайтом. В данном виджете отображаются либо новости сообщества, либо фото участников (см. Рис 3)

Рис 3.

Как же его установить? Очень просто. Выбираем пункт «сообщества» (рис 4), нас перенаправляет на страницу, где мы можем сделать настройки нашего виджета (рис 5.)

Рис 4.

Рис 5.

Первое что нам нужно это ввести ссылку на наше сообщество (то которое мы хотим добавить на сайт), далее мы выбираем «вид», это может быть один из трех вариантов:

Участники – будут отображаться фото участников (рис 3.)

Новости – будет отображаться стена сообщества

Только название – как ясно из названия, будет отображаться одно название в красивом блоке (Рис 6.)

Рис 6.

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

Я, например, всегда вставляю первый – классический вид – участники.

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

Далее мы можем настроить цвета: цвет фона, цвет текста, цвет кнопок. Можно удобно подобрать под цветовою палитру Вашего сайта

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

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

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

И так, возвращаемся на нашу страницу, однако теперь вместо кнопки «сообщество» (см. рис 4.) мы выбираем первый пункт «комментарии». Нажимаем на него и оказываемся на странице по настройке виджета комментарии (Рис 7)

Рис 7.

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

  1. Масштаб;
  2. Вирусность;
  3. Многомерность;
  4. Скорость;
  5. Контроль;
  6. Цитируемость
  7. Независимость;
  8. Гибкость.

Теперь давайте перейдем непосредственно к настройке виджета, для начала нам нужно написать название сайта, у меня это «

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

Идем далее, выбираем количество комментарием на странице, по умолчание нам предлагается 10, думаю этого вполне достаточно, если же Вам нужно что бы на странице было видно как можно больше комментариев, то Вы может выбрать 20 (больше не предусмотрено).

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

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

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

И последний виджет. О котором я хочу поговорить сегодня это «виджет мне нравится».

Снова нам нужно попасть на страницу с выбором виджетов (рис 4) и выбрать виджет «мне нравится». После чего мы попадем на страницу  (рис 8).

Рис 8.

Настройки тут схожи с настройками «виджета комментарии» — вводим название сайта, адрес сайта и нажимаем «сохранить».

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

  • Кнопка с текстовым счётчиком
  • Кнопка с миниатюрным счётчиком
  • Миниатюрная кнопка
  • Миниатюрная кнопка, счётчик сверху

Далее мы выбираем высоту кнопки (18,20,22 и 24 пикселя) по умолчанию стоит 22, как по мне оптимальный вариант, который подходит практически на любой сайт.

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

мне нравится» и «это интересно».

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

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

Если Вам понравилась и помогла эта статья, ставьте лайк и рассказать друзьям.

Твитнуть

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

Присоединяйтесь к нам:

Кнопка «поделиться Вконтакте» для WordPress через Jetpack

Jetpack — это бесплатный плагин для WordPress, позволяющий использовать многие функции, которые раньше были доступны сайтам только на WordPress.com. В этой краткой статье вы узнаете о том, как с помощью плагина Jetpack добавить на свой сайт кнопку «поделиться» для популярной российской социальной сети Вконтакте.

Установка и настройка Jetpack

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

Подключить Jetpack к WordPress.com

Если у вас ещё нет учётной записи в сети WordPress.com, сейчас самое время её создать. Учтите, что сеть WordPress.com и ваш сайт на WordPress это разные вещи. Если вас интересуют подробности, обратитесь к нашей статье о разнице между WordPress.org и WordPress.com.

После подключения Jetpack к вашему аккаунту на WordPress.com, вам станут доступны все модули. Найдите модуль Поделиться и убедитесь в том, что он активен.

Модуль Поделиться в Jetpack

Настройка кнопки поделиться Вконтакте

Щёлкните кнопку Настроить в модуле Поделиться, или перейдите в раздел Параметры → Поделиться из основного меню WordPress. Настройки модуля делятся на два раздела, в данном случае нас интересует настройка блока Поделиться (Sharing Buttons). В области доступных сервисов найдите ссылку «Добавить новый сервис».

Настройки блока Поделиться

Во всплывающем окне вам нужно будет заполнить настройки для новой кнопки Вконтакте. В названии сервиса напишите «Вконтакте», а в URL-адресе сервиса вставьте следующую ссылку:

http://vk.com/share.php?url=%post_full_url%

Вам так же потребуется иконка размером 16х16 для вашей кнопки. Вы можете скачать её здесь и загрузить в вашу медиа библиотеку. Затем в поле URL-адрес иконки вставьте ссылку на файл картинки из вашей медиатеки.

Настройки для кнопки Вконтакте

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

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


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

Если у вас возникли вопросы по настройке социальных кнопок в плагине Jetpack, вы можете задать их нам в комментариях. Не забывайте подписываться!

Не могу сделать репост ВКонтакте, поделиться записью

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

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

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

Если сделать репост все-таки необходимо, то придется создать пост заново: скопировать текст из старой записи и вставить в новую, добавить фотографии и другие материалы (если нужно).

Не могу сделать репост записи друга

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

Репост на стену и в сообщество недоступен

Сделал много репостов, больше не могу

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

Не могу сделать репост в сообщество или из сообщества

1. Репост записи, сделанной от имени человека, а не сообщества

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

2. Репост в сообщество из него самого

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

3. Репост в сообщество, если не состоишь в нем

Нельзя сделать репост в сообщество, даже если ты владелец или администратор, но не являешься его участником (вышел из группы). Его не будет в списке групп. Чтобы сделать репост в собственное сообщество, нужно быть участником группы (или подписаться на паблик).

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

4. Репост из закрытой группы

Сделать репост из закрытого или частного сообщества не получится, так как его материалы доступны только его участникам. Это подразумевают сами слова «закрытое» и «частное». Но можно поделиться записью из такого сообщества в личном сообщении.

5. Занесли сообщество в черный список

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

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

6. Твои права в сообществе изменились

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

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

Если группа отсутствует в разделе Сообщества → Управление, ты не можешь делать в нее репосты, но при этом все права в группе у тебя есть, то это глюк. Решить проблему можно только через обращение к агентам (не забудь указать ссылку на свою группу и кратко описать ситуацию):

Не могу сделать репост, ничего из перечисленного не подходит

Вероятно, это глюк, а его причины могут быть разные. Воспользуйся решателем проблем:

Смотри также

Актуальные данные виджетов «Мне нравится» / «Поделиться» для сайтов ВКонтакте и Facebook

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

Виджеты и кнопки

Что же именно публикуется? Название страницы, изображение-тумба, короткое описание и собственно, сама ссылка на страницу.
Но нередко администратор сайта меняет какие-либо данные из приведенных выше, что в свою очередь совершенно не отражается на вновь публикуемых ссылках. А всё потому, что алгоритмы социальных сетей заточены под высокую нагрузку и кеширует практически любые данные. Причем многие из этих данных остаются в кеше навсегда (ну или пока их оттуда не удалят руками / через специальные методы). И такие способы — очистить кеш — существуют!

  • У социальной сети Facebook есть специальная страница https://developers.facebook.com/tools/debug, которая после ввода нужного вам адреса сайта, покажет закешированные данные и позволит их очистить. Но этим функционал не ограничивается — вам также подскажут спорные места в коде сайта, которые не могут быть интерпретированы фейсбук-ом из-за ошибок или из-за излишества данных.
  • ВКонтакте такой богатой функциональности не имеет, но зато у них есть метод в API, который позволяет просто очищать кеш для страниц. Подробно про метод описано в их документации здесь https://vk.com/dev/pages.clearCache. К сожалению, ничего кроме скупого {response: 1} (успешный ответ в формате JSON), Вы ничего более не увидите. Но это и не важно — главнее то, действительно ли данные стираются. Ответ на этот вопрос спорный, во всяком случае у меня. Для виджета «Мне нравится» кеш не стирается — картинка, название, описание остается прежним. На странице подробной документации есть сведения о 3-ем параметре при инициализации кнопкиpage_id. Если изменить этот параметр, то виджет «думает», что мы подсунули ему новый URL и соответственно, кеша для него нет, поэтому все данные берутся заново, т.е. становятся актуальными. Но при этом есть огромный минус — количество «лайков» для прежнего URL теряется, т.е. вы снова видите рядом с кнопкой жизнеутверждающий ноль. Есть еще у ВК кнопкапубликации ссылок, которая позволяет вручную указывать все данные и при этом ничего не кеширует. А если такое и случится, то метод очистки кеша как раз работает для нее.

Универсальность данных

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

Кнопка «Мне нравится» от ВКонтакте позволяет задать изображение вручную, а также указать его в теле документа через мета-теги микроразметки:

Проблема заключается в том, что ни один из этих вариантов не дает 100% -ой гарантии в использовании указанного вами изображения. Проще говоря, ВКонтакте берет код страницы по пубкликуемой ссылке и считывает оттуда все изображения (вероятнее всего, больше какого-то минимально установленного размера). Далее, судя по всему, изображения сортируются по значимости / размеру (опять же по мнению ВК) и выдаются на выбор пользователю. И совсем не факт, что первым будет стоять логотип или нужная вам картинка.

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

Решение проблемы

Все социальные сети, даже кешируя контент вашего сайта, регулярно обращаются к нему снова при нажатии кнопки «Поделиться» / «Рассказать друзьям». При этом все они передают специфический user-agent (в PHP это глобальная переменная массива $_SERVER[‘HTTP_USER_AGENT’]).

Достаточно в начале кода всех страниц (либо в общем файле, который включается во все страницы) добавить проверку на предмет ключевых слов из этих агентов. И если условие пройдено (ключевые слова найдены), то выдавать шаблон (страницу) без контента, а только лишь с нужным title, descrpition, image. В качестве изображения можно не использовать мета-теги типа vk:image / og:image, а просто в теле документа BODY прописать нужный тег IMG. Тогда алгоритмы социальной сети точно не ошибутся, попросту потому, что выбирать не из чего.

Кнопка от В Контакте «Мне нравится»

Кнопка от В Контакте “Мне нравится” появилась уже на многих сайтах, блогах. Читатели блога WPnew.ru также спрашивали у меня, как поставить ту самую заветную кнопку. Сегодня я решил Вам показать, как это делается.

Чтобы поставить “Мне нравится” от В Контакте, нужно конечно зарегистрироваться в данной социальной сети (хотя, наверное, тех, кого нет Вконтакте, осталось единицы). Из-за того, что в данной социальной сети очень много людей, кнопка от В Контакте может принести огромную пользу – привлечь дополнительных посетителей.

Как установить кнопку от В Контакте “Мне нравится”

  1. Первым делом заходите по адресу http://vk.com/dev/Like (если Вы не авторизованы, то сделайте это).
  2. Дальше заполняете следующее:
    Сайт/приложение: Подключить новый сайт.
    Название сайта: Вводите название своего сайта/блога.
    Адрес сайта: Введите адрес своего сайта/блога.
    Основной домен сайта: Введется автоматически на основе адреса сайта.
    Нажимаете “Сохранить”.
  3. Далее выбираете тип кнопки, как будет выглядеть кнопка Вы сразу же увидите на той же странице, только чуть ниже:
    Лично я предпочел выбрать пункт “Кнопка с текстовым счётчиком”. А название кнопки оставил “Мне нравится”, можно также поставить “Это интересно”.
  4. Дальше нам нужно вставить код в блог. Как я считаю, кнопка “Мне нравится” от Вконтакте должна стоять в конце статьи, чтобы читатель прочитал статью и, если ему понравилось, нажал на кнопку.
    Чтобы кнопка была в конце статьи нам для начала нужно:
    1) Скопировать часть кода, который дает нам Вконтакте от начала до
    <!-- Put this div tag to the place, where the Like block will be –>

    :
    2) Открыть файл header.php и перед закрывающимся тегом </head> вставить код этот код:
    3) Потом, копируем весь код, который остался:
    4) Открываем файл single.php и после окончания статьи вставляем скопированный код. Если Вы вставляли социальные кнопки, то перед кодом этих кнопок:

Вот и все. Все работает. Если Вам понравился урок, нажмите на кнопку “Мне нравится” от В Контакте в конце этого урока :).

До встречи на следующих уроках!

Как создать кнопку поделиться.

Вы здесь: Главная — JavaScript — JavaScript Скрипты — Как создать кнопку поделиться.

Всем привет! В этой статье мы рассмотрим небольшую и простую javascript библиотеку Sharer.js, которая позволит вам создавать свои собственные кнопки «поделиться».

Сейчас на многих сайтах вы можете встретить кнопки «поделиться», которые позволяют рассказать друзьям о какой-то записи в разных социальных сетях. Это достаточно удобно, и поэтому была создана Sharer.jsjavascript библиотека, которая позволит вам очень быстро и просто создавать свои собственные настриваемые кнопки «поделиться» для более чем 20 социальных сетей! Отдельным плюсом данной библиотеки будет то, что она не имеет зависимостей и достаточно мало весит.

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

1) Зайдите на официальный сайт

2) Установите библиотеку, используя NPM, Bower или скачав ее самостоятельно

npm install sharer.js // NPM
bower install sharerjs // Bower

3) Подключите последнюю сжатую версию на сайт

<script src="path/to/sharer.min.js"></script>

Или используйте CDN

<script src="https://cdn.jsdelivr.net/sharer.js/latest/sharer.min.js"></script>

Если вы используете Meteor, можете сделать так

meteor add ellisonleao:sharerjs

Теперь давайте рассмотрим, как добавить кнопку «поделиться» для ВКонтакте

<button data-sharer="vk" data-caption="Sharer.js is the ultimate sharer js lib" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on VK</button>

Вам доступны следующие атрибуты:

  • data-url
  • data-title
  • data-image(необязательно) – ссылка на картинку
  • data-caption(необязательно)

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

А у меня на этом все. Надеюсь, библиотека вам пригодится! Спасибо за внимание!

  • Создано 05.02.2016 17:04:52
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

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

В этом сообщении блога вы узнаете, как интегрировать кнопки обмена социальными сетями и оформить их в контент веб-сайта Sitefinity CMS.

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

В этом сообщении блога вы узнаете, как именно это сделать — интегрировать кнопки совместного доступа в социальных сетях в контент вашего веб-сайта Sitefinity CMS. Эти кнопки обмена не используют JavaScript, что означает, что они загружаются молниеносно и не блокируют отображение вашего веб-сайта. Так как вы хотите гибко решать, какие кнопки использовать для какого контента, вы просто добавляете другой набор кнопок общего доступа в шаблоны виджетов для определенных типов контента, будь то контент встроенного или динамического модуля.

Допустим, вы ведете блог с сообщениями, касающимися исключительно вашего профессионального опыта. Вы хотите, чтобы вашим контентом делились только в LinkedIn и Twitter, поэтому вы добавляете эти параметры в шаблон виджета Blog post . Кроме того, вы хотите настроить внешний вид и поведение этих кнопок — например, при нажатии кнопки вы хотите, чтобы посетители видели определенное изображение или логотип вашей компании. Все зависит от вас.

В следующих разделах вы узнаете, как это сделать — создать кнопки обмена в социальных сетях и добавить их в шаблон, который будут использовать все виджеты MVC Blog post .

Создание кнопок

Обо всем по порядку. Для создания нужных кнопок вы используете генератор sharingbuttons.io. Все, что вам нужно, это URL-адрес и название контента, которым вы хотите поделиться, потому что эта информация отображается для посетителей после того, как контент, например сообщение в блоге, будет опубликован.

Эй, подожди. Это не сработает для всех сообщений в вашем блоге. Итак, давайте сделаем вещи более динамичными.

Чтобы автоматически заполнить заголовок и URL-адрес любого сообщения при публикации, вам необходимо использовать соответствующие URL-адреса и текстовые заполнители в коде шаблона виджета MVC Blog post .Эти заполнители должны быть легко идентифицируемы и динамически заменены с помощью логики HTML-кода фактическими данными поста в блоге. Например, вы можете использовать следующие заполнители:

.
  • URL-адрес: urlToBeReplaced
  • Название: titleToBeReplaced
  

    <дел>
        

Поместите код HTML в шаблон виджета

Затем вы расширяете представление Detail шаблона виджета Blog post с помощью HTML-кода, сгенерированного в sharingbuttons.io. Просто продублируйте существующий файл Detail.DetailPage.cshtml , расположенный по адресу ~/ResourcePackages/Bootstrap4/MVC/Views/BlogPost , и переименуйте новый файл в соответствии с соглашениями об именовании MVC.Например, назовите дублированный файл Detail.DetailPageSocialShare.cshtml .

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

.
  • urlToBeReplaced => @Model.Item.DefaultUrl
  • titleToBereplaced => @Model.Item.Fields.Title
  @model Telerik.Sitefinity.Frontend.Mvc.Models.ContentDetailsViewModel

@используя Telerik.Sitefinity;
@используя Телерик.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Web.DataResolving;

@Model.Item.Fields.Title <дел> @Model.Item.GetDateTime("PublicationDate", "MMM d, yyyy, HH:mm tt") @Html.Resource("От") @DataResolver.Resolve(@Model.Item.DataItem, "Автор", ноль) @HTML.CommentCount(string.Empty, @Model.Item.DataItem)
<дел> <дел> <дел>
<дел>
<дел>
<дел>
@Html.HtmlSanitize((string)Model.Item.Fields.Content)
@HTML.Список комментариев(@Model.Item.DataItem)

И вуаля!

Стиль кнопок обмена в социальных сетях

Давайте стилизуем эти кнопки и сделаем их красивыми. Для этого скопируйте код стиля, сгенерированный sharingbuttons.io, и вставьте его в свой проект. Всегда разумно следовать рекомендациям, поэтому в приведенном ниже примере структура файла проекта соответствует рекомендациям, установленным в обзоре GitHub Bootstrap 4, и выглядит примерно так:

.

Вам нужен файл, посвященный стилю кнопок социальных сетей, скажем, _social-share.ссс . Импортируйте этот файл в main.scss , а затем приступайте к работе — внесите все необходимые изменения и создайте активы, как описано в этом полезном документе по Bootstrap 4. В качестве ожидаемого результата вы получаете то, что хотели в первую очередь — кнопки социальных сетей, которые работают и имеют правильный вид.

 

Последние штрихи — дополнительные материалы

И последнее, но не менее важное: сделайте это фантазией! Картинка говорит больше, чем тысяча слов, а миниатюра с текстом и того больше! Таким образом, чтобы обогатить свой общий контент для отображения миниатюры, все, что вам нужно сделать, это добавить настраиваемое поле к вашему контенту, в данном случае — к сообщениям в блоге.Просто зайдите в серверную часть Sitefinity CMS и добавьте настраиваемое поле Social Media (OpenGraph) в тип контента Blog post . Для получения дополнительной информации ознакомьтесь с документацией Sitefinity CMS:

.

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

На этом все, друзья, наслаждайтесь и делитесь новостями с помощью кнопок обмена! Извините, я имею в виду поделиться новостями.

Если вы новичок в Sitefinity CMS, вы можете узнать о ней больше здесь или сразу же воспользоваться бесплатной 30-дневной пробной версией прямо сегодня.

Мы разработали бесплатный курс , чтобы помочь разработчикам, которые практически не имеют опыта разработки для Sitefinity, освоиться. Зарегистрируйтесь здесь, это бесплатно.

Как добавить кнопки «Поделиться» на свой сайт

Перейти к разделу:

 

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

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

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

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


Как добавить ShareThis на свой веб-сайт

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

Это связано с тем, что ShareThis использует этот код для ссылки на настройки вашей учетной записи. Любые изменения, которые вы вносите в кнопки «Поделиться» на ShareThis, будут автоматически обновляться на вашем веб-сайте. Это избавляет вас от необходимости обновлять и добавлять HTML-код на свои страницы каждый раз, когда вы хотите внести какие-либо изменения.

Чтобы добавить ShareThis на свой веб-сайт:

1. Перейдите в ShareThis и создайте учетную запись

2. Введите свое доменное имя при появлении запроса

.

3. Перейдите к Настройки на левой панели инструментов


4. Скопируйте код из раздела Получить код

.


5. Войдите в свою учетную запись Create Account

6. Выберите Content в верхнем меню

7. Нажмите Фрагменты HTML в меню слева

8.Нажмите кнопку New HTML Fragment в верхней части экрана

9. Дайте HTML-фрагменту описание для справки (например, ShareThis)

10. Вставьте свой HTML-код в большое поле HTML Code

.


11. Нажмите Добавить HTML-фрагмент , чтобы сохранить код

.

12. Перейдите к Верхний и нижний колонтитулы сайта из левого меню

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


14.Опубликуйте свой сайт

Теперь вы установили соединение между вашим веб-сайтом и вашим профилем ShareThis, и теперь вы можете приступить к настройке кнопок общего доступа.

 

Кнопки Sticky Share

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

Чтобы добавить кнопки Sticky Share на свой веб-сайт:

1.Перейдите в каталог приложений в своей учетной записи ShareThis

.

2. Выберите Sticky Share Buttons


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

3. Выберите социальные платформы, которые вы хотите добавить

4. Настройте разделы Design , Extras и Share Counts по своему усмотрению

5.Нажмите Обновить


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

 

Встроенные кнопки общего доступа


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

Чтобы создать встроенные кнопки общего доступа:

1. Перейдите в каталог приложений в своей учетной записи ShareThis

.

2. Выберите Встроенные кнопки общего доступа


3. Выберите социальные платформы, которые вы хотите добавить

4. Настройте разделы Design , Extras и Share Count s по своему усмотрению

5. Нажмите Обновить

6. Вернитесь наверх страницы и скопируйте код

7.Создайте HTML-фрагмент , как вы делали это раньше (этот фрагмент не следует добавлять в нижний колонтитул сайта)


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

ii) Если вы добавляете встроенные кнопки «Поделиться» в описание продукта или в блог, переместите курсор туда, где вы хотите, чтобы они отображались, и используйте значок HTML на панели инструментов, чтобы выбрать фрагмент HTML

.



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

 

Кнопки обмена изображениями и видео

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


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


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

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

Как настроить текст кнопки «Поделиться в Твиттере»

Что такое кнопка «Поделиться в Твиттере» и почему она важна?

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

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

Кнопка Twitter Follow позволяет пользователям следить за корпоративной (или личной) учетной записью, показывая ваши твиты и публикации в своей хронике, автоматически увеличивая охват.Это был бы вход для них, чтобы связаться с вами и получить от вас информацию. Кнопки «Подписаться» — отличный способ автоматизировать рост вашей аудитории и подписчиков.

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

Пользовательские кнопки «Поделиться в Твиттере» оказывают большое влияние на успех вашего бизнеса, позволяя вам повышать осведомленность, распространять контент, такой как фотографии и видео, и привлекать трафик на ваш веб-сайт.Чтобы воспользоваться этим удобным инструментом, вы должны добавить что-то, чтобы привлечь внимание пользователя, а не просто настроить стандартные кнопки Twitter. Настройка поможет вам увеличить взаимодействие с пользователями. Проведите некоторое время в своих социальных сетях, и вы получите результаты. Маркетинг в социальных сетях — это последовательность и терпение.

Как работает кнопка «Поделиться» в Твиттере?

Обычно, когда вы нажимаете кнопку «Поделиться в Твиттере», открывается небольшое окно с информацией о веб-странице, готовой для публикации в Твиттере.Там вы можете настроить собственный URL-адрес и добавить дополнительный текст, если это необходимо. Вы можете отметить кого-то и даже добавить хэштеги. Точно так же, как если бы вы писали новый твит в Твиттере, но не покидая страницы.

Итак, вы можете поделиться небольшим текстом с заголовком контента и URL-адресом. Также желательно настроить текст для лучшей производительности. Возможно, вы захотите добавить свой дескриптор Twitter (@username), чтобы продвигать себя и взаимодействовать с вашей целью, которая делится вашим контентом. Кроме того, вы можете добавить хэштег, чтобы привлечь внимание вашего целевого клиента, если хотите.

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

Как сделать кнопку «Поделиться» в Твиттере?

Существует два разных способа создания и настройки кнопки «Поделиться в Твиттере». Мы говорим о Twitter Publish и Custom Anchor Element.

Публикация в Твиттере

Twitter Publish — это простой инструмент, позволяющий создать любую кнопку Twitter для вашего сайта. Это основанный на формах инструмент с пошаговыми инструкциями для создания всего необходимого кода для добавления кнопки Twitter на любой веб-сайт.

Просто зайдите на сайт publish.twitter.com и следуйте инструкциям или прочитайте наше объяснение ниже.

Как добавить пользовательскую кнопку Twitter на свой веб-сайт с помощью Twitter Publish?
Источник: публикация в Твиттере.
  1. Посетите Twitter Опубликовать.
  2. Выберите то, чем вы хотите поделиться, или прокрутите немного вниз, чтобы увидеть все доступные параметры (рекомендуется).
  3. Выберите кнопки Twitter на втором этапе.
  4. Там вы найдете несколько вариантов; давайте рассмотрим простую кнопку «Поделиться».
  5. Вот и все! Скопируйте предоставленный код и вставьте его туда, где вы хотите добавить кнопку «Твитнуть» на свой веб-сайт.
  6. (Необязательно) Нажмите «Установить параметры настройки», чтобы увидеть все дополнительные параметры:
Источник: публикация в Твиттере.
Профессиональный наконечник:

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

Пользовательский элемент привязки Twitter с пользовательским текстом

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

Я проведу вас через весь процесс.

Как добавить пользовательскую кнопку Twitter на свой сайт, написав собственный код?
  1. Первое, что вам нужно сделать, это создать элемент привязки . Вам нужно будет добавить класс «twitter-share-button» и установить параметр href, как показано ниже. Здесь вы можете настроить текст кнопки Twitter (Tweet this!) и ввести свой собственный:
      Tweet this!  
  2. Вы можете использовать параметры запроса Tweet Web Intent для предварительного заполнения текста твита , как в примере ниже:
      Tweet this!  
  3. Затем вы можете использовать параметров данных для настройки и установки параметров кнопки Tweet. Давайте сделаем кнопку больше :
      Твитните это!  
  4. Помните, что вы потребуется загрузить Twitter для веб-сайтов JavaScript . Для этого просто используйте следующее.js:
        

Теперь я хотел бы услышать от вас!

Это все, что касается моего пользовательского руководства по кнопке «Поделиться в Твиттере».

Надеюсь, это руководство показало вам, как создать собственную кнопку «Поделиться в Твиттере».

Используете ли вы кнопки Twitter Share на своем веб-сайте? Как насчет других социальных сетей, инструментов и стратегий социальных сетей? Что еще вы находите полезным в своем маркетинге в социальных сетях?

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

Что такое кнопки социальных сетей и как они влияют на…

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

Выбор социальных сетей для интеграции с интернет-магазином

Хотя владельцы интернет-магазинов могут выбрать практически любую социальную сеть для публикации, некоторые платформы более актуальны, чем другие.Facebook и Pinterest — сети с высокой степенью визуальности, и некоторые потребители используют Pinterest в качестве цифрового списка пожеланий. LinkedIn не подходит для этой функции, потому что публикация продуктов не соответствует тому, как большинство участников используют платформу. Кроме того, у Google Plus не так много пользователей, как у Facebook или Twitter, поэтому общие элементы не будут привлекать столько внимания. Ограничение его Facebook, Twitter и Pinterest не позволит клиентам отвлекаться на беспорядок на страницах продуктов.

Когда следует использовать кнопки социальных сетей?

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

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

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

Как создать удобные для конверсии кнопки

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

  • Тестируйте все: A/B-тестирование помогает владельцам интернет-магазинов определить наилучшее расположение кнопок на страницах товаров, оптимальный размер и эффективность счетчиков. A/B-тестирование также определяет, какая версия страницы лучше конвертируется: с кнопками социальных сетей или без них.
  • Удалить счетчики репостов из кнопок: Поскольку малое количество репостов может снизить коэффициент конверсии, удаление счетчика репостов — лучший вариант, если только владельцы интернет-магазинов не уверены, что увидят высокие цифры для определенных продуктов.
  • Отдайте предпочтение продажам, а не продвижению в социальных сетях: Бесплатная реклама в социальных сетях — это здорово, но главная цель — повысить конверсию. Важно, чтобы кнопки социальных сетей не мешали клиенту совершать покупки. Использование кнопок меньшего размера позволяет делиться информацией для клиентов, которые этого хотят, не прерывая пользовательский интерфейс для тех, кто этого не делает. Кнопки большего размера отвлекают потребителей от завершения транзакции.
  • Сохранить кнопки социальных сетей для страницы подтверждения: Поскольку кнопки социальных сетей могут отвлекать клиентов на страницах продуктов, ожидание подтверждения покупки является оптимальным временем для поощрения обмена.Клиенты уже чувствовали себя достаточно уверенно, чтобы купить продукт, что повысило вероятность того, что они выразили свое волнение и поделились покупкой в ​​социальных сетях.

Кнопки общего доступа и API Web Share

Ранее мы уже писали о негативном влиянии кнопок общего доступа на производительность. Что, если бы был лучший способ? Давайте поговорим об API Web Share.

Что такое API веб-ресурсов?

Web Share API предлагает что-то альтернативы.Это API, разработанный Google для предоставления в Интернете собственных возможностей совместного использования базовой платформы. Это означает, что кнопка «Поделиться» на вашей веб-странице может запускать собственный виджет общего доступа вашего устройства, как это может делать собственное приложение. На Android — сейчас поддерживается только на Android — это будет выглядеть примерно так, в зависимости от приложений, установленных на устройстве:

.

Родной виджет общего доступа на Android

Почему это хорошо?

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

Кроме того, он предлагает унифицированный и знакомый способ обмена из Интернета из собственного приложения или через этот API.

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

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

Пока звучит хорошо; посмотрим, как это работает.

Как использовать

Прежде чем перейти к коду, обратите внимание на две вещи:

  1. Страница должна обслуживаться через HTTPS
  2. Он может быть запущен только взаимодействием с пользователем (это означает, что он не может быть запущен, например, при загрузке страницы)

Теперь к API.Есть только один метод: navigator.share() . Вам обязательно нужно протестировать поддержку перед его использованием, вы можете сделать это с помощью:

  if(navigator.share) {…}

Теперь мы можем вызвать метод share() . Нам нужно передать объект, который может включать title , text и url полей и должен включать одно из text и url :

  если(навигатор.share) {

    navigator.share({

      title: ‘mobiForge: API Web Share’

      text: ‘Прочитайте эту замечательную статью об API Web Share’

      url: ‘http://mobiforge.com. design-development/web-share-api’

    })

  }

Вы можете указать все, что хотите, для title , text и url . Пользователи, как правило, ожидают, что общий URL-адрес будет URL-адресом текущей страницы, хотя он также может ссылаться на другие страницы, например, если вы включили кнопку «Поделиться» рядом с каждым элементом в списке, или он может ссылаться на некоторую позицию в списке. страница с якорем страницы.

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

  if(navigator.share) {

    navigator.share({

      title: ‘mobiForge: Web Share API’

      text: ‘Прочитайте эту замечательную статью об API Web Share’ 90 ‘l ur : 900 //мобифорж.com/design-development/web-share-api’

    })

    .then(() => console.log(‘Общий доступ завершен’))

    .error((error) => console.error(‘ Не удалось поделиться в это время’, ошибка))

  }

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

Добавление кнопки «Поделиться»

Нам нужен способ активировать виджет общего доступа.Для этого мы будем использовать кнопку. Когда эта кнопка нажата, мы активируем функцию navigator.share() :

  

Затем мы прикрепим к кнопке обработчик события JavaScript, используя событие click, чтобы выполнить код, который мы видели ранее:

  документ.querySelector(‘.share-button’).addEventListener(‘click’, function() {

    if(navigator.share) {

      navigator.share({

        title: ‘mobiForge: Web Share API’

   900 : ‘Ознакомьтесь с этой отличной статьей об API Web Share’

        url: ‘https://mobiforge.com/design-development/web-share-api’

      })

      .then(() => console .log(‘Общий доступ завершен’))

      .error((error) => console.error(‘Не удалось поделиться в данный момент’, ошибка))

    }

  });

Если вы посещаете эту страницу в поддерживаемом браузере (например, в браузерах на основе Chrome на Android), вы сможете открыть собственный виджет общего доступа, нажав кнопку ниже:

Общий доступ с помощью Web Share API

Вы также можете посмотреть демо и исходный код на github здесь.

Итак, могу ли я избавиться от своих кнопок общего доступа?

В настоящее время этот API широко не поддерживается.Хотя это описано в проекте отчета сообщества W3C, на самом деле это не стандарт, и он работает только на устройствах Android. Это означает, что вам понадобится обходной путь, когда он не поддерживается.

Здесь у вас есть несколько вариантов:

  1. Интегрируйте стороннюю службу и используйте ее, когда navigator.share() не поддерживается
  2. Реализуйте простые кнопки общего доступа без стороннего сервиса, существует множество примеров
  3. Используйте полифилл, чтобы принести навигатор .share() API в браузер, где он не поддерживается. Доступно множество полифиллов

Могу ли я избавиться от кнопок «Поделиться» даже с полифиллом?

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

Или это…? Ранее мы дразнили, что даже веб-сайт может быть использован в качестве цели для публикации.Давайте посмотрим, как это может произойти. Пришло время взглянуть на целевой API Web Share .

Добавление веб-сайтов в собственный виджет общего доступа с помощью целевого API веб-ресурса

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

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

Это подводит нас к целевому API Web Share, обманчиво простому API, который работает как дополнение к API Web Share.Он подходит к проблеме с другой стороны, позволяя веб-сайту подписаться или зарегистрироваться в качестве цели веб-обмена в родном виджете обмена.

Он настраивается через файл манифеста веб-приложения, таким образом, несколько пересекаясь с территорией прогрессивного веб-приложения (PWA) и еще больше уменьшая разрыв между родным и веб-приложением.

Регистрация цели веб-ресурса

Во-первых, нам нужно зарегистрировать цель веб-ресурса в родном виджете ресурса. Для этого нам нужна страница, которую может посетить пользователь, и которая предложит пользователю «Добавить на домашний экран».Это важно: сайт должен быть добавлен на главный экран устройства до того, как цель общего доступа будет зарегистрирована на устройстве. Это означает, что нам понадобится страница для ссылки на файл манифеста веб-приложения и сервис-воркер. Мы добавим этот материал на нашу индексную страницу (источник) по адресу mobiforge.github.io.

Чтобы указать цель общего ресурса, мы должны добавить объект share_target в манифест веб-приложения. Объект share_target должен включать свойство url_template , например:

«share_target»:  {

  «url_template»: «целевой веб-ресурс.html?title={title}&text={text}&url={url}»

}

В приведенном выше url_template мы указываем страницу и три параметра: title , text и url . Когда страница добавляется на главный экран устройства, манифест будет прочитан, а цель общего доступа зарегистрирована на устройстве.

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

Это полный манифест для нашего примера на https://mobiforge.github.io/manifest.json:

1

2

2

3

4

5

6

7

8

70002

8

9

10

11

12

13

12

14

13

14

15

16

17

18

19

20

{

  «lang»: «en»,

  «name»: «веб-примеры mobiForge»,

  «short_name»: «mobiForge»,

  «start_url»: «/»,

»  «display : «standalone»,

  «theme_color»: «#ffffff»,

  «background_color»:»#ffffff»,

  «icons»: [

    {

      «srco»: «mf-14.log.PNG «,

» Размеры «:» 144×144 «,

» Тип «:» Image / png «

}

],

» Share_target «: {

» url_template «:» TEB .html?title={title}&text={text}&url={url}»

  },

  «scope»:»/»

}

Если вы посетите https://mobiforge.github.io/ в Chrome Canary на Android, вы должны увидеть приглашение Добавить на домашний экран . Chrome Canary проанализирует манифест и зарегистрирует целевой URL-адрес общего доступа.Вы можете проверить это сразу, нажав Меню -> Поделиться в браузере. Теперь вы должны увидеть новую иконку в родном виджете общего доступа, например, mobiForge Web:

.

Добавление цели общего доступа на главный экран (слева) и цель общего доступа, отображаемая в виджете общего доступа (справа)

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

Создание целевой страницы общего доступа

Итак, теперь нам нужно создать страницу для обработки общих данных. Мы указали, что web-share-target.html будет целью общего доступа, и для этого потребуются параметры title , text и url , поэтому давайте настроим это. Когда пользователь выбирает цель веб-ресурса из собственного виджета общего доступа, он будет перенаправлен на целевой URL-адрес общего доступа в веб-просмотре.

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

.

  

пример целевой страницы веб-ресурса mobiForge

  

Вы поделились:

  

  

  

Затем мы запустим приведенный ниже код JavaScript в событии загрузки страницы. Он анализирует общие параметры из URL-адреса, а затем записывает каждый параметр в соответствующий элемент HTML:

.

  

Вот оно!

Совместное тестирование целевого API веб-ресурса и API веб-ресурса

Для сквозного тестирования API веб-ресурсов и целевого API веб-ресурсов можно выполнить следующие действия:

  1. Посетите исходную страницу (mobiforge.github.io) в браузере Chrome Canary (или Chrome Dev), чтобы получить приглашение «Добавить на главный экран». Это должно добавить новую цель веб-ресурса к собственному виджету.
  2. Посетите пример страницы Web Share API: (mobiforge.github.io/web-share-api.html)
  3. Нажмите кнопку «Поделиться»
  4. Выберите цель веб-ресурса, которую мы создали
  5. Прибыль!

Примечание: на момент написания была проблема с API, поэтому когда параметры text и url включаются в общий ресурс, они объединяются в поле text .

Итак, может ли Web Share API заменить мои кнопки общего доступа?

Поначалу так и хочется сказать нет, это не замена, он делает что-то немного другое. Собственный виджет общего доступа и, следовательно, API-интерфейс Web Share не могут предоставлять доступ к произвольным веб-сайтам, как это делают кнопки общего доступа в Интернете. Однако вы можете поделиться с любым приложением или веб-приложением, которое вы установили или добавили на рабочий стол. Вы можете поделиться в Twitter, если у вас установлен Twitter. Таким образом, в том смысле, что вам нужно установить приложение (или веб-приложение), это не прямая замена виджетам для обмена веб-сайтами.

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

Что, если вы не поклонник приложений и предпочитаете Интернет? Тогда у вас не будет установлено родное приложение вашей любимой социальной сети. Ну, вот тут-то и появляется API-интерфейс Web Share Target. Вы можете поделиться с любым веб-приложением, где

  1. вы добавили веб-приложение на главный экран устройства (для установки используется PWA)
  2. веб-приложение должно реализовывать целевой API Web Share в своем манифесте

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

«share_target»: {

    «url_template»: «создать/твитнуть? title={title}&text={text}&url={url}»

}

Это означает, что вы можете поделиться в веб-приложении Twitter Lite PWA так же, как и в родном приложении:

Публикация в Twitter Lite PWA через API Web Share

Посмотрим правде в глаза, сколько из десятков значков общего доступа обычно использует один пользователь? Один или два, может три? Так почему же пользователи должны видеть одни и те же значки, которые они не используют на каждом сайте? С помощью Web Share API вы будете видеть только те цели общего доступа, которые используете.Поэтому, хотя поначалу это может показаться более строгим, на самом деле это имеет большой смысл: варианты обмена, созданные специально для вас, вами, основанные на приложениях и веб-приложениях, которые вы фактически используете, и встроенные в браузер.

Каталожные номера

Что можно и чего нельзя делать при использовании кнопок «Поделиться» в социальных сетях

Ни для кого не секрет, что социальные сети предлагают огромные возможности для построения конструктивных отношений с вашими клиентами. Только в Австралии более 60% активных пользователей социальных сетей, поэтому легко понять, как вы можете рассказать о своем бизнесе.Однако заниматься продвижением самостоятельно недостаточно; вам также понадобится сарафанное радио.

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

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

Подумайте о дизайне кнопки

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

Не переусердствуйте

Наличие слишком большого количества кнопок «Поделиться» в социальных сетях может создать беспорядок на вашем веб-сайте.Это может не только замедлить работу вашей страницы, но и перегрузить пользователей. Когда они не могут решить, следует ли им делиться вашей публикацией в Facebook, Twitter, LinkedIn, Reddit или Pinterest, они могут вообще не поделиться вашей публикацией.

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

Подумайте о размещении

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

Вот некоторые из популярных мест размещения кнопок:

  • Верх поста. Может показаться нелогичным размещать кнопки «Поделиться» в социальных сетях поверх сообщений в блоге, учитывая, что посетители вашего сайта еще не читали контент.Но это размещение дало положительные результаты. Когда они находят заголовок интригующим, они сразу же решают, стоит ли им делиться.
  • Слева от поста. Такое размещение выделяет кнопки, потому что люди читают текст слева направо.
  • В строке поста. Эта растущая тенденция легко встраивается в ваш контент, делая обмен естественной частью чтения. Это может быть стратегически реализовано после предоставления мощной цитаты или важной статистики.
  • Нижняя часть стойки. Это место размещения позволяет пользователям делиться вашим сообщением после того, как они прочитают ваш блог. Однако они могут конкурировать с другими элементами, такими как комментарии и похожие посты. Убедитесь, что они появляются на видном месте.

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

Не размещайте кнопки «Поделиться» на всех страницах вашего веб-сайта

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

Организуйте заказ значков социальных сетей

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

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

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

 

Кнопки «Поделиться в социальных сетях»

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

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

Улучшение качества обслуживания клиентов

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

Повышение узнаваемости бренда

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

Расширение охвата вашего целевого рынка

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

Leave a Reply