Ссылка в истории Инстаграм: как добавить активную ссылку в сториз. Поделиться с друзьями от яндекса Добавить в поделиться еще 1

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

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

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

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

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

New Ya.share({ element: "ya_share_normal", elementStyle: { "type": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] }, link: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: { twitter: { title: "Результат теста: Дракон почти Ваш «конек»! Вы пока не можете преподавать Драконоведение, но на верном пути!" } } });
1. Здесь ya_share_normal - id элемента на странице (), в котором будет появляться блок с социальными кнопками, link - ссылка, плюс в serviceSpecific для твиттера указываем title, отличающийся от того, что находится в мета-теге og:title.

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

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

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

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

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

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

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

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

В-третьих: для теста сгенерируйте скрипт на 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ом или другим инструментом для веб-разработчика.

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

Как добавить ссылку в свою Историю в Инстаграм?

Эта функция доступна не всем аккаунтам в Instagram! Сегодня ссылки в Stories доступны только:

Для верифицированных аккаунтов Instagram

Для профилей, у которых больше 10.000 подписчиков.

Причём ссылка может появиться не сразу после того, как вы получили 10.000 подписчиков. Накрутка ботов до 10k подписчиков работает не всегда. Плюс, накрутить ботов так, чтобы они не отписались сегодня сложно, а при падении числа подписчиков аккаунта до 9.999 и менее возможность прикреплять ссылку исчезнет.

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

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

Последние обновления делают Instagram ещё более интересным для ecommerce и малого бизнеса, битва за подписчиков пойдёт ещё жарче. Надеюсь только на то, что Instagram будет активно бороться со спамом ссылками в Директе.

Я отмечал важность SMO (Social Media Optimization) в продвижение сайта. Теперь поговорим непосредственно о том, как сделать социальную оптимизацию на своем сайте, а точнее как добавить социальные кнопки популярных сетей на сайт.

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

Это и есть социальные кнопки, благодаря которым достигается SMO , а далее и социальная активность. Эта статья посвящена вопросу где взять код этих соц. кнопок и как правильно установить их к себе на сайте. Рассмотрим для начала установку Google+.

1. Добавляем на сайт кнопку Google+

2. Добавляем на сайт кнопку "Мне нравится" от Вконтакте и Facebook 2.1. Мне нравится от FaceBook

Начнем с получения кода кнопки для Facebook. Для этого зайдите на эту страницу: https://developers.facebook.com/docs/plugins/like-button . Вы должны увидеть следующую картину:

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

1. URL to Like
Это необязательный параметр. Если оставить поле пустым, то у каждой страницы будет свой индивидуальный счетчик лайков. Если вписать туда какой-то конкретный адрес URLa , то счетчик будет единым (лайки суммируются со всех страниц этого сайта).

2. Send Button
Добавить или убрать кнопку для отправки сообщений. Я рекомендую убрать эту кнопку, т.к. наша цель поставить просто кнопку "мне нравится", хотя возможно у вас совсем другие цели.

3. Layout Style
Стиль отображения кнопки. Лично мне больше всего нравится standard.

4. Width
Ширина кнопки в пикселях. Я ставлю обычно не больше 100 пикселей.

5. Verb to display
Что будет отображено на кнопке: "мне нравится" или "я рекомендую". Обычно я выбираю первый вариант (стоит по умолчанию), поскольку это более действенный способ замотивировать пользователя поставить лайк.

6. Color Scheme
Цветовая гамма: либо белая, либо черная.

7. Font
Просто задание шрифта для надписи "мне нравится".

После задания настроек наживаем на кнопку "get code" и размещаем на сайте. Обычный код кнопки для facebook:

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk") ); 2.2. Мне нравится от ВКонтакте

Теперь рассмотрим как получить код кнопки "мне нравится" от ВКонтакте. Для этого перейдите на следующую страницу: https://vk.com/dev . У Вас должна открыться следующая страница:

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

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

VK.init ({apiId: 2872188, onlyWidgets: true }); VK.Widgets.Like ("vk_like", {type: "button"} ); 3. Добавляем на сайт кнопку tweet

Как и в предыдущих случаях, для начала перейдите в место получения и настройки кнопки.

Вконтакте

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

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

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