Поделиться с друзьями от яндекса. Социальные кнопки поделиться – пишем сами Добавить в поделиться еще 5

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

Добавление на сайт на WordPress

Начну с того, что самым простым способом, если у вас WordPress, является просто установить какой-нибудь плагин для этого дела. Какой? Я, например, пользовался Juiz Social Post Sharer. А вообще, просто введите в поиске плагинов слово social и просмотрите, что там есть. Преимущество тут только в том, что вам, вероятно, не придется ничего настраивать.

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

JavaScript. Быстрый старт

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

Теперь вам нужно найти файл с кодом, который выводит статьи. В wordpress, например, он обычно называется single.php или подобным образом. Итак, если вам нужно поставить блок с кнопочками после статьи, ищем строчку the_content. Именно за ней можно вставить код. Вам очень поможет, если разработчик вашего шаблона делал комментарии в коде.

Редактировать файлы сайты можно некоторыми способами. Например, сделать это напрямую через админку движка (внешний вид — редактор). В этом случае код не подсвечивается, поэтому ориентировать в нем не так удобно. Другой способ – через ftp. Подключитесь к сайту с помощью ftp-клиента, перейдите в wp-content – themes. Тут нужно найти тот шаблон, который является активным у вас в данный момент. Заходим в него и находим тот самый single.php или ищем что-то похожее по названию.

В самом файле с кодом найдите строчку the_content с помощью поиска (Ctrl + F). Вставьте где-нибудь после нее этот код.

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

Кнопки от Pluso

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

Еще один вариант – Share42

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

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

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

Далее вы можете выбрать тип панели: горизонтальная или вертикальная? И если выбрана вторая, то количество кнопок можно ограничить. Кодировку я рекомендую оставить UTF-8. Вы можете также добавить иконку самого сервиса в комплект кнопок, чтобы пользователи с вашей странички могли перейти на него и установить себе тоже эти кнопки.

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

Ниже есть 2 кнопки. Первая позволяет взглянуть, как будут выглядеть социальные кнопки, которые вы настроили. С помощью второй скачивается скрипт. Его нужно загрузить через ftp к себе на сайт в корневую папку.

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Surfingbird – сервис, который предлагает наиболее интересный контент в сети Интернет. Для этого необходимо зарегистрироваться, указать свои интересы, а в свою очередь данный сервис будет предлагать интересные фото, видео, заметки в зависимости от указанных интересов. Интересный сервис, надо будет по подробнее с ним ознакомиться!

Уважаемые читатели моего блога, есть ли у кого аккаунты в последних четырех представленных сервисах? Меня вот последний заинтересовал, обязательно зарегистрируюсь!

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

В моем случае (ввиду того, что я выбрал отображение “счетчики”) код получился вот таким:

Content – это и есть текст поста.

Но если просто расположить предложенный код, то получится следующее отображение:

Yashare-auto-init{
margin:10px auto;
text-align:center;
}

Где yashare-auto-init – это класс, который был добавлен вместе с кодом. Margin:10px auto – отступ по горизонтали и вертикали соответственно, а text-align:center – расположение объекта по центру.

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

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

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

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

Во-первых: дизайн кнопок фактически железный. Да он узнаваем и предоставляется самими соцсетями, но только нашим потребностям не соответствует. Ну вот, у кнопочки края закруглены, а дизайн нашего сайта требует, чтобы кнопка была квадратной, что делать? – Брать спрайт и перерисовывать! Кто пробовал, тот знает – дело неблагодарное: замена одной кнопки чревата пятью-шестью пробами «правильно» разместить её на спрайте. И это только замена одной/нескольких кнопок, а если сайт в готическом стиле и все кнопки нужны тёмные?

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

В-третьих: для теста сгенерируйте скрипт на share24 – он большой. Все ли из предоставленных строк кода так уж нам необходимы? – Не думаю.

Теперь перейдём к самому написанию скрипта, он будет делиться на три части: HTML, CSS и, собственно, сам код, написанный на JavaScript. Дополнительно я буду использоваться для удобства библиотеку jQuery.

Подключаем все необходимые файлы:

Теперь добавляем в файл share.js скрипт, он будет выглядеть таким образам:

Var share = { twitter: function($this){ var data = share.data($this); if(data){ var url = "http://twitter.com/share?"; url += "text=" + encodeURIComponent(data.text); url += "&url=" + encodeURIComponent(data.url); url += "&hashtags=" + ""; url += "&counturl=" + encodeURIComponent(data.url); share.popup(url); }; return false; }, vk: function($this){ var data = share.data($this); if(data){ var url = "http://vkontakte.ru/share.php?"; url += "url=" + encodeURIComponent(data.url); url += "&title=" + encodeURIComponent(data.title); url += "&description=" + encodeURIComponent(data.text); url += "&image=" + encodeURIComponent(data.img); url += "&noparse=true"; share.popup(url); }; return false; }, facebook: function($this){ var data = share.data($this); if(data){ var url = "http://www.facebook.com/sharer.php?s=100"; url += "&p=" + encodeURIComponent(data.title); url += "&p=" + encodeURIComponent(data.text); url += "&p=" + encodeURIComponent(data.url); url += "&p=" + encodeURIComponent(data.img); share.popup(url); }; return false; }, data: function($this){ if($this){ return $.parseJSON($this.parent("div").attr("data-share-data")); }; return false; }, popup: function(url){ window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; } };

Добавляем разметку на страницу:

Структура довольно простая, а именно обёртка с классом share, далее идёт div с атрибутом data-share-data, о котором было упомянута выше. Строка формируется из четырех параметров со своими значениями.

• url – адрес которым мы делимся;
• img – картинка, если она не нужна указываем пустую строку;
• title – заголовок страницы;
• text – нужное нам описание.

Внутри div лежат сами кнопки с навешенным на них событием onclick. По клику будет вызываться один из методов описанных выше.

Осталось только придать кнопкам человеческий вид и добавить CSS:

Share{ background-color: #ececec; display: inline-block; padding: 7px 5px; } .share div:after{ content: ""; display: block; clear: both; height: 0; } .share div:first-child{ margin-left: 0; } .share .twitter, .share .vk, .share .facebook{ background-image: url(share.png); margin-left: 7px; border-radius: 3px; height: 24px; width: 24px; float: left; cursor: pointer; } .share .twitter{ background-color: #00aced; background-position: 0 -61px; } .share .twitter:hover{ background-color: #008abe; } .share .vk{ background-color: #48729e; background-position: 0 -32px; } .share .vk:hover{ background-color: #3a5b7e; } .share .facebook{ background-color: #3c5a98; background-position: 0 0; } .share .facebook:hover{ background-color: #30487a; }

В итоге после добавления CSS кнопки получаться вида:

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

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

Вконтакте

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

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

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

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

2 способа добавить ссылку в Истории Инстаграм После определенного числа подписчиков (более 10к)

Функция добавления ссылки в Stories раньше была доступна верифицированным или «избранным» - случайным - бизнес-аккаунтам. Сегодня в социальной сети линк могут добавить все бизнес-аккаунты, число подписчиков которых превышает 10 000 человек.

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

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

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

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

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

При настройке рекламы

Добавление ссылки при настройке рекламы - более трудоемкий, но и более эффективный процесс. Чтобы настроить рекламу, нужно сначала зайти в связанный с бизнес-аккаунтом Instagram профиль в Facebook, и нажать на «Создать рекламу». Либо сразу зайти в менеджер рекламы Facebook.

В личном кабинете нажмите «Создать объявление» и следуйте простому алгоритму действий.

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

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

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

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

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

Установите бюджет и выберите стратегию ставок . Можно установить дневной лимит бюджета или сумму на всю кампанию, а система сама равномерно распределит ее. Затем выберите стратегию ставок - по умолчанию система выбирает самую низкую цену. Если хотите, можете настроить ее вручную, для этого кликните на «Установите предельную ставку». Чем она ниже - тем меньше шансов, что объявление покажут.

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

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

А еще можно отправить ссылку в Директ

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

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

Подведем итоги: как опубликовать ссылку в Инстаграм

• Добавить в Историю - доступно тем, у кого более 10 000 подписчиков.
• Добавить в рекламную Stories - доступно всем, но требует денежных затрат.
• Выслать в Директ.