js скрипт кнопок поделиться в соц сетях

Правильные социальные share-кнопки

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

Внешний вид

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

Быстродействие

В пору быстрого интернета все меньше приходится задумываться об оптимизации скорости загрузки сайта. Однако с каждым годом растет количество пользователей мобильного интернета, который пока не может похвастаться высокими скоростями. А социальные кнопки способны заметно замедлить загрузку сайта. Интересный факт: еще в 2007 году Amazon сообщил, что каждые лишние 100мс при загрузке сайта снижают продажи на 1%. А Google с 2010 года учитывает скорость загрузки при ранжировании сайтов в поисковой выдаче. И хочется ли после этого ставить нативные кнопки?

Что же делать?

К счастью, есть много сервисов, с помощью которых можно установить к себе на сайт одну кнопку «Поделиться», объединяющую сразу все нужные социальные сети. Самым популярным в Рунете подобным инструментом является блок «Поделиться» от Яндекса. И он действительно хорош: аккуратные иконки, лаконичный код и даже наличие API для разработчиков. Но как всегда, хочется чего-то большего. Для себя я определил вот какие критерии идеального сервиса социальных кнопочек:

PLUSO — молодой сервис, который удовлетворяет всем вышеуказанным требованиям, вот какие кнопочки он позволяет делать, всего более 300 вариаций:

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

Источник

Добавить на сайт кнопки поделиться в соц сетях без плагинов и скриптов — возможно ли?

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

п.с. для фейсбука и контакта нашли, для инстаграмма ссылку на группу

Конечно возможно. Всё возможно если захотеть!
А берёшь просто разбираешь URL там же всё легко.
Вот я делал кому то:

Ссылка для вконтакта:
http://vk.com/share.php?url=

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

насчёт «поделится от яндекс» я бы не стал ими пользоваться

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

«. стилизация иконок в блоке Поделиться не предусмотрена. «, «. опцию data-bare, при указании которой перестают подключаться все CSS-стили. «

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

Источник

Оптимизируем страницу при помощи собственных социальных кнопок

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

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

Готовые решения социальных кнопок

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

На github есть много готовых решений, например:

Создание собственных кнопок

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

Так же можно воспользоваться готовыми элементами, например для bootstrap — lipis.github.io/bootstrap-social который использует Font Awesome (Font Awesome сам по себе очень большой, по этому если Вам надо только определенные иконки, то советуем выбрать только те которые нужны через fontello.com)

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

Итак, сначала создадим объект и добавим функцию инициализации, в которой укажем классы объекта для запуска события и данных, которыми будем делиться и добавим к каждому объекту на странице eventListener:

Далее, опишем eventListener, добавив его к уже созданному классу:

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

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

Так же можно вызвать шаринг-кнопку таким образом:

Статистика и выводы

Источник

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

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

Сегодня хочу рассказать Вам как сделать кнопки шаринга, поделится, Расказать и тд. своими руками, без использования сторонних сервисов, таких как:«Поделиться» в соцсетях от Яндекс, share42.com, pluso, AddThis. Данный скрипт позволит сделать собственные кнопки которые поделятся ссылкой в таких сервисах: ВКонтакте, Одноклассники, Facebook, Живой Журнал, Твиттер, Google+, Mail.Ru

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

Итак, приступим. В готовом примере будут просто текстовые ссылки без картинок. Если вы владеете минимальными навыками в CSS и Фотошоп или поиском картинок гугл, думаю Вам не составит труда сделать кнопки не хуже чем мои 🙂

1. Подключение библиотеки jquery

Для начала нужно подключить библиотеку jquery.

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

В head вставляем следующий код:

2. Скрипт кнопок на базе jQuery c опциями

Код приведенный ниже вставляем в теги

И вставляем сразу после подключенной библиотеки.
Также, если вы не любите лишний код в html, то можете сделать немножко иначе.
Создайте файл buttons.js и вставляем код в него.
Далее после подключенной библиотеки вставляем ссылку на файл с правильным путем к нему.

Собственно, сам код:

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

3. Скрипт отвечающий за класс кнопок

Иногда если способ не работает, подключение скриптов осуществляется перед закрывающимся тегом body в подвале

4. html разметка

В нужном месте вставляем код. В WordPress это нужно сделать внутри цыкла в файле single.php

5. СSS стили

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

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

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂

Источник

Некоторые тонкости установки на сайт кнопок «Поделиться» (share) социальных сетей

Сегодня, в эпоху социальных медиа, принято давать посетителям сайта возможность поделиться с друзьями. Мы делали промо-страницу к Дню Рождения интернет-магазина Allsoft и нам нужно было установить кнопки «Поделиться» от Facebook, Twitter, Одноклассников, Вконтакте и Мой мир.

С первого взгляда показалось — что может быть тут особенного — поставил готовый html/js код и готово? Но тонкости оказались в деталях: что если для одной соц. сети нужно передавать один текст, а для другой — другой? Как правильно передать картинку и описание во все сети? А если несколько разных вариантов текста и картинок на одной странице? Как почистить уже закешированную информацию о ссылке в соц.сети? На все эти вопросы нам пришлось найти ответы, которые и вы сможете узнать из этой статьи.

Самый простой вариант:
Чтобы поставить блок «Поделиться» на страницу своего сайта, достаточно зайти наhttp://api.yandex.ru/share/ и через мастер сформировать нужный вид виджета с кнопками — получится код типа

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

Здесь фраза «Кто хочет купить софт со скидкой 8% по акции?» написана самим пользователем, а ниже — то, как ссылка на сайт выглядит в соц.сети. Не сильно красиво, правда?

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

тогда ссылка в соц.сети будет выглядеть так:

Здесь «Сегодня день Рождения allsoft.ru — 8 лет :)» — текст написанный пользователем, остальное — информация из мета-тегов. Подробнее об этих мета-тегах можно прочитать на странице Facebook developers.facebook.com/docs/share, остальные соц.сети тоже их вполне понимают.

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

Какие в связи с этим могут возникнуть проблемы во время разработки:
1. Если вы разрабатываете сайт на сервере, недоступном извне, закрытом http-авторизацией, или локально — соц. сеть не сможет получить информацию о странице, либо вообще не позволит поделиться ссылкой (например, так работает «Одноклассники»), либо отобразит ее без заголовка и описания (как на картинке в первом, самом простом варианте)
2. После того как сервер соц.сети уже один раз обратился к странице, он закешировал информацию о ней — следовательно, если вы захотите изменить заголовок и описание и измените на стороне своего сайта, то в соц.сети оно уже не поменяется — она будет использовать ранее закешированную информацию. (Как это исправить — смотрим ниже.)

Как передавать разные описания для одной страницы.
Например, при создании промо-страницы на allsoft.ru с шуточным тестом потребовалось для разного количества баллов, набранных пользователем в тесте, передать в соц.сети разные описания. Так как описание страницы соц.сеть получает заходя по ссылке, то для разных описаний нужны разные ссылки. Кроме того, Twitter позволяет вставлять только 140 символов, поэтому для него нужно отдельное, более короткое, описание.

Для этого:
1. Для разных результатов теста мы должны передать в API блока «Поделиться» Яндекса разные ссылки. В нашем случае это были:http://allsoft.ru/promo/allsoft8let/?share=normal, allsoft.ru/promo/allsoft8let/?share=high, allsoft.ru/promo/allsoft8let/?share=low иhttp://allsoft.ru/promo/allsoft8let/ для блока вне теста.
2. Соответственно, в зависимости от переданных скрипту страницы параметров в url, страница должна формироваться с разными мета-тегами.
3. Для того, чтобы передавать отдельное описание для Twitter, нужно уже использовать другой формат API блока «Поделиться» Яндекса — не теги, а js-код:

1. Здесь ya_share_normal — id элемента на странице (), в котором будет появляться блок с социальными кнопками, link — ссылка, плюс в serviceSpecific для твиттера указываем title, отличающийся от того, что находится в мета-теге og:title.

Таким образом, для задачи «3 разных результата теста плюс общая ссылка на страницу вне теста» у нас будет 4 тега:

и 4 блока кода в JavaScript, как указано выше.

При передаче через API другого title и description соц.сети обновляют закешированную ранее из мета-тегов информацию (за исключением Facebook — но для него есть способ 1)
Также, наверное, можно передавать и image для изменения картинки.

Ну вот, кажется, и все. Добро пожаловать на allsoft.ru/promo/allsoft8let и торопитесь делиться этой ссылкой с друзьями – сегодня последний день акции!

Автор: Владимир Хворостов — Веб-разработчик Softline

Источник