Friendfeed – агрегатор информации, собранной из социальных сетей, блогов, микроблогов, который работает в реальном времени. С помощью Friendfeed можно узнавать и обсуждать интересные материалы, которые найдут в сети Интернет ваши друзья!
Surfingbird – сервис, который предлагает наиболее интересный контент в сети Интернет. Для этого необходимо зарегистрироваться, указать свои интересы, а в свою очередь данный сервис будет предлагать интересные фото, видео, заметки в зависимости от указанных интересов. Интересный сервис, надо будет по подробнее с ним ознакомиться!
Уважаемые читатели моего блога, есть ли у кого аккаунты в последних четырех представленных сервисах? Меня вот последний заинтересовал, обязательно зарегистрируюсь!
Лично я выбрал первый вариант, который называется счетчики. В нем будет показываться количество рекомендаций поста, другими словами, сколько раз поделились ссылкой на пост. После выбора варианта отображения, ниже необходимо будет скопировать код, который надо будет разместить на блоге.
В моем случае (ввиду того, что я выбрал отображение “счетчики”) код получился вот таким:
Content – это и есть текст поста.
Но если просто расположить предложенный код, то получится следующее отображение:
Yashare-auto-init{
margin:10px auto;
text-align:center;
}
Где yashare-auto-init – это класс, который был добавлен вместе с кодом. Margin:10px auto – отступ по горизонтали и вертикали соответственно, а text-align:center – расположение объекта по центру.
Развитие блога набирает обороты, внешний вид меняется и улучшается, блог постепенно наполняется интересным контентом, советую подписаться на блог, чтобы быть в курсе всех изменений и обновлений блога.
Ссылки в Stories начали появляться достаточно давно, но использовать их могли только официальные аккаунты. В мае появилась возможность добавлять ссылки в рекламе с плейсментом в Истории, однако всё это были платные механизмы. Сегодня мне начали присылать скриншоты того, что Instagram начал постепенно позволять обычным пользователям добавлять активные ссылки на сайты в своих Историях.
Как добавить ссылку в свою Историю в Инстаграм?Эта функция доступна не всем аккаунтам в Instagram! Сегодня ссылки в Stories доступны только:
Причём ссылка может появиться не сразу после того, как вы получили 10.000 подписчиков. Накрутка ботов до 10k подписчиков работает не всегда. Плюс, накрутить ботов так, чтобы они не отписались сегодня сложно, а при падении числа подписчиков аккаунта до 9.999 и менее возможность прикреплять ссылку исчезнет.
Чтобы перейти по активной ссылке из Истории пользователь должен сделать «Свайп вверх». Так как народ ещё не привык к таким возможностям, я бы рекомендовал дополнительно акцентировать внимание на ссылке различными ссылками и призывами к действию. Ну вы же взрослые ребята, сами понимаете о чём речь, кого я тут вообще учу.
Про появление активных ссылок в Директе я уже писал , но в блог информацию не выносил. Как и любое другое обновление, пока доступны избранной и случайной части пользователей.
Последние обновления делают Instagram ещё более интересным для ecommerce и малого бизнеса, битва за подписчиков пойдёт ещё жарче. Надеюсь только на то, что Instagram будет активно бороться со спамом ссылками в Директе.
Инструмент Stories в Instagram появился сравнительно недавно, но уже успел завоевать признание, как среди блогеров, так и среди . Сториз располагаются сверху, над основной лентой, поэтому их просматривают чаще. Опубликованная ссылка в Истории Инстаграм, позволяет направить пользователя на сайт или другую страницу в соцсеть. Благодаря этому можно собрать дополнительный трафик на сайт или в свой блог, а ещё - выделить историю на фоне других.
2 способа добавить ссылку в Истории Инстаграм После определенного числа подписчиков (более 10к)Функция добавления ссылки в Stories раньше была доступна верифицированным или «избранным» - случайным - бизнес-аккаунтам. Сегодня в социальной сети линк могут добавить все бизнес-аккаунты, число подписчиков которых превышает 10 000 человек.
Чтобы добавить линк, следуйте простому алгоритму:
Помните, что многие пользователи не знают, как переходить по ссылке в опубликованной истории. Подтолкните их к целевому действию - добавьте на фото или ролик призыв перейти по линку, чтобы узнать что-то интересное. Например, напишите «проведите вверх, чтобы узнать подробнее» или «нажмите “ещё”, чтобы перейти на сайт магазина».
При настройке рекламыДобавление ссылки при настройке рекламы - более трудоемкий, но и более эффективный процесс. Чтобы настроить рекламу, нужно сначала зайти в связанный с бизнес-аккаунтом Instagram профиль в Facebook, и нажать на «Создать рекламу». Либо сразу зайти в менеджер рекламы Facebook.
В личном кабинете нажмите «Создать объявление» и следуйте простому алгоритму действий.
Выберите цель рекламы. Для ссылок в историях доступны 6 целей, в числе которых «Трафик», «Установка приложения», «Конверсии». Выберите подходящую цель в зависимости от формата бизнес-аккаунта и продвигаемого линка.
Выберите цель кампании. Здесь можно выбрать клики или просмотры. То есть вы будете платить либо за клик по ссылке, либо за посещение страницы, когда пользователь дождется ее загрузки.
Настройте аккаунт. Если вы раньше не создавали рекламу в Facebook, вам предложат указать часовой пояс, страну и валюту рекламного кабинета.
Настройте аудиторию . Выберите место, куда ведет линк - на сайт, приложение или мессенджер. Затем укажите нужные параметры целевой аудитории: пол, возраст, интересы и другие.
Выберите место рекламы. По умолчанию объявление будут показывать на трех площадках. Если вам нужны только Истории Инстаграма, кликните на «Редактировать плейсменты» и оставьте галочку только на «Instagram», «Истории».
Установите бюджет и выберите стратегию ставок . Можно установить дневной лимит бюджета или сумму на всю кампанию, а система сама равномерно распределит ее. Затем выберите стратегию ставок - по умолчанию система выбирает самую низкую цену. Если хотите, можете настроить ее вручную, для этого кликните на «Установите предельную ставку». Чем она ниже - тем меньше шансов, что объявление покажут.
Выберите формат рекламы. Можно выбрать одно изображение или одно видео. С точки зрения маркетинга лучше использовать видео - несмотря на то, что у рекламы есть ограничение по времени в 15 секунд, оно позволяет лучше донести идею до пользователей и добавить более заметный призыв к действию.
После заполнения необходимых полей перед вами откроется предпросмотр. На этой странице можно загрузить изображения или ролики для объявления, добавить призыв к действию, добавить и изменить URL. После сохранения ваше объявление начнут показывать ЦА по выбранным параметрам и установленному бюджету.
Директ в Инстаграме похож на систему личных сообщений в других социальных сетях. Если вы отправите одному или нескольким пользователям какой-то пост, его увидят только они - он не будет опубликован в ленте.
Сегодня функция добавления ссылки в сообщения в Инстаграме доступна абсолютно всем. Чтобы добавить линк, достаточно просто зайти в Директ, выбрать чат с пользователем, которому хотите выслать его, и ввести ссылку вручную или вставить заранее скопированный URL-адрес. Ссылка будет активна, а расширенный сниппет с заглавной картинкой и описанием страницы будет выслан автоматически.
- Добавить в Историю - доступно тем, у кого более 10 000 подписчиков.
- Добавить в рекламную Stories - доступно всем, но требует денежных затрат.
- Выслать в Директ.
Перед тем, как углубляться в кодинг, давайте осмотримся и обратим внимание нате ресурсы, которые уже нам предоставляет глобальная паутина. К слову их очень много мы же рассмотрим два наиболее популярных.
Ещё один сервис достойный нашего внимания – , представляет собой такой же простой конструктор, вот только кнопок с сервисами и сетями гораздо больше, некоторые из которых, признаться, я увидел впервые. Главное отличие от «Яндекс.Технологий» – мы получаем полностью сгенерированный скрипт, который будет отрабатываться не облачно, а непосредственно на нашем сервере.
Казалось бы, при наличии столь замечательных решений никому и в голову не придет вновь «изобретать велосипед»? А нет, написанный кем-то скрипт хорош ровно настолько, насколько нам самим лень над ним заморачиваться. Конечно, он будет исправно работать и выполнять свои функции, но – это универсальное решение, написанное для общей массы сайтов, т.е. оно не учитывает наших личных маленьких потребностей и условностей.
Во-первых: дизайн кнопок фактически железный. Да он узнаваем и предоставляется самими соцсетями, но только нашим потребностям не соответствует. Ну вот, у кнопочки края закруглены, а дизайн нашего сайта требует, чтобы кнопка была квадратной, что делать? – Брать спрайт и перерисовывать! Кто пробовал, тот знает – дело неблагодарное: замена одной кнопки чревата пятью-шестью пробами «правильно» разместить её на спрайте. И это только замена одной/нескольких кнопок, а если сайт в готическом стиле и все кнопки нужны тёмные?
Во-вторых: в надежности Яндекса сомневаться не приходится, но кнопки, в отличие от счетчика метрики, почему-то грузятся тяжело, и не редко происходит видимое их запаздывание от основного контента страницы. Особенно это заметно при хорошем высокоскоростном соединении, когда страница вылетает фактически мгновенно, а у вас несколько блоков с кнопками.
В-третьих: для теста сгенерируйте скрипт на 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ом или другим инструментом для веб-разработчика.
Здравствуйте, уважаемые читатели блога сайт. Как вы уже, наверное, догадались из заголовка, речь пойдет про, так называемые, социальные кнопки, которые очень серьезно могут помочь статьям на вашем сайте привлечь, при удачном стечении обстоятельств и высоком качестве самой статьи, большое количество посетителей с социальных сетей и сервисов.
Социальные сигналы так же учитываются и поисковыми системами при ранжировании вашего сайта. Большое количество расшариваний в качественные аккаунты в Твиттере, Google+, Фейсбуке (возможно, что Вконтакте и другие сети тоже учитываются) может позволить вам подняться на определенное число шажков повыше и, возможно, войти в Топ и удержаться там, если поведенческие факторы не подкачают.
Вообще, сервисов предоставляющих скрипты (кнопки) расшаривания контента в социальные сети в интернете очень много, но не всем из них стоит доверять (запросто или еще как-то вас использовать по нехорошему). Да и просто «подвесить сайт» они способны при не очень грамотном размещении их кода и не очень мощных вычислительных возможностях их серверов. Хотя есть и приличные варианты, свободные от данных недостатков, и их я перечислил в конце этой публикации.
Также имеется возможность отображения на кнопках числа расшариваний в отдельно взятую социальную сеть. Причем учитываются все посты, а не только те, что были сделаны с помощью этого блока (подгружаются данные по API). Поддерживаются правда не все социальные сети (только facebook, Google+, Мой Мир, Одноклассники.ru, ВКонтакте), но большинство основных. Печально, что недавно из этого списка был исключен Твиттер, т.к. он перестал предоставлять эти данные по API.
Например, тут можно укоротить тайтлы для отдачи в Твиттер, ибо там имеется ограничение на их длину (как это сделать читайте ниже), настроить отображение или не отображение счетчиков расшариваний, задать направления раскрывания меню с дополнительными кнопками соцсетей и многое другое. В общем, покопайтесь и посмотрите.
Вообще, в сравнении с родными кнопками расшаривания, которые предлагают установить на сайте сами социальные сети (об этот читайте чуть ниже), блок Яндекса выигрывает в скорости загрузки, компактности и простоте установки и настройки. Например, у меня раньше официальная кнопка Twitter зачастую не подгружалась из-за проблем с их сервером, поэтому по долгу не подгружалось сделанное на Джава скрипт левое меню моего блога. Возможно, что сейчас эта проблема решена, но много скриптов завсегда будет хуже, чем один в плане оптимизации скорости загрузки сайта.
Проблемы с доступностью у Яндекса, думаю, вряд ли возникнут, ибо это хорошо зарабатывающая коммерческая организация, довольно трепетно относящаяся к своему имиджу. К тому же, если у вас , то вы сможете отслеживать статистику кликов по этим кнопочкам, что может быть полезным.
Кроме блока с иконками обычного размера можно сделать блок со счетчиками, а также Яндекс предлагает добавить выпадающее меню с дополнительными социалками, которое будет прятаться под спойлером, расположенном после отображения нужного числа кнопок основных соцсетей (типа Вконтакте, МойМир, ):
Если захотите добавить счетчики к кнопкам в этом блоке (с выпадающим меню), то просто на сайте вставьте к его код (между тегами Div) еще один атрибут: data-counter="« и все. Как я говорил, проще некуда. Счетчики можно будет добавить и к маленьким кнопкам, которые рассмотрены чуть ниже:
Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"
Также можете заменить все иконки на их уменьшенные миниатюры кнопок , что лично мне пригодилось при вставке блока в верхнюю часть всех статей этого блога:
В первой части в открывающем и закрывающем тегах SCRIPT приведен путь до скрипта, который будет подгружаться с сервера Яндекса, а во второй части размещен непосредственно код вставки, который нужно будет разместить в том месте вашего шаблона, где этот блок должен будет отображаться.
Как вставить социальные кнопки от Яндекса на сайтПоэтому код вызова скрипта я вставляю вместе с блокм Div в том месте, где необходимо отобразить кнопки соцсетей. Ну, а чтобы его загрузка не повлияла на скорость загрузки основной страницы, я по совету, данному в документации Яндекса , добавил в него атрибут async="async" инициируя тем самым его асинхронную загрузку скрипта :
Проблема может возникнуть с тем, чтобы найти среди множества файлов движка своего сайта тот, который отвечает за формирование самой нижней части Html кода с закрывающим тегом /BODY или же того, который формирует Head. А так же найти место в файлах темы оформления, где нужно вставить фрагмент кода в тегах Div (для размещения самих кнопок).
В принципе, что в Вордпрессе, что в Джумле это делается в одном из файлов используемой темы оформления. Т.к. этот блог работает на Ворпрессе, то за него и скажу.
Если вы работаете с WordPress , то для вставки кода вызова скрипта вам потребуется открыть на редактирование файл footer.php (там найдете закрывающий тег Body или header.php (там найдете теги Head) из папки :
/wp-content/themes/название_папки_с_используемой_темой_оформления/footer.php
Теперь останется только вставить в нужное место шаблона вашего сайта или же прямо в статью вторую часть кода социальных кнопок Яндекса, отвечающую за место расположения блока с кнопками на страницах сайта:
Кстати, еще раз оговорюсь, если вы захотите удалить какую-либо кнопку из этого блока, то не обязательно опять идти в конструктор на сайте Яндекса. Можно будет просто убрать ее запись из этого списка (вместе с запятой идущей после нее, например, «vkontakte,»). Ну, вы поняли...
Ну, и также вы можете изменять позиционирование кнопочек внутри блока с помощью CSS.
Li.ya-share2__item {background:none!important;padding:0 7px 0 7px!important;}
Т.к. у меня используется адаптивная под мобильные устройства верстка, то я для устройств с малым разрешением экрана дописал похожую строку, где задал чуть меньшие отступы, но это уже детали:
Li.ya-share2__item {padding:0 3px 0 3px!important;}
В общем, где-то так в том аспекте, что касается моего блога на WordPress. В Joomla для вставки этого блока, наверное, проще всего будет воспользоваться модулем Произвольного Html кода, расположив его в позиции шаблона где-нибудь сразу под текстом статьи.
Официальные кнопки социальных сетейМногие социальные сети сами предоставляют всем желающим возможность скачать код кнопки, и зачастую при этом вы можете даже настроить ее внешний вид и функциональность. вы, например, сможете настроить и получить код скрипта для расшаривания поста в .
Настроек, как вы можете видеть, довольно много, и кроме внешнего вида кнопки Вконтакте вы так же можете настроить отображение счетчика, показывающего количество расшариваний.
Кнопочку Facebook можно будет получить . Она очень гибко настраивается под ваши нужды, и пусть вас не смущают английские надписи на ней, ибо при размещении ее кода на вашем сайте надписи автоматически переведутся на русский язык.
В поле с урлом лучше ничего не вставлять, тогда расшариваться будет та страница, на которой расположен этот код.
Получится примерно так:
Получится примерно так:
Ну и, конечно же, не могу не упомянуть про официальную кнопку Twitter , которая появилась относительно недавно. Ее конструктор расположен . Естественно, что в ней предусмотрена возможность подсчета числа ретвитов и у вас будет возможность задать ее внешний вид:
Полученный код я тогда немного модернизировал по описанному выше принципу, чтобы мои длинные тайтлы обрезались и не создавали дополнительных проблем пользователям при расшаривании.
Другие варианты получения кнопок соцсетей для сайтаКак я уже говорил, всевозможных онлайн-сервисов, где можно бесплатно взять скрипт кнопок социальных сетей и поставить к себе на сайт много. Все они преследуют разные цели: «от души» (как в случае сервиса Димокса), для сбора данных нужных для работы других сервисов (как в случае с АпТуЛайк) или для наживы (вирусы и прочие незаконные махинации с имеющимся у вас на сайте трафиком). Есть и просто платные решения, например, как упомянутый ниже плагин.
Трудно сказать, что из этого многообразия выбрать. Скажу пару слов про то, что довелось самому попробовать, и про что уже писал ранее.
В общем, сами смотрите, сравнивайте и выбирайте.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Создаем для блога на WordPress кнопки добавления в социальные сети и закладки (без плагинов и скриптов)
Лайкли - автономные социальные кнопки для сайта
Кнопки для мобильных сайтов от Uptolike + возможность делиться ссылками в мессенджерах
UpToLike - конструктор социальных кнопок для вашего сайта с расширенным функционалом
Uptolike Share Buttons - бесплатный плагин по добавлению кнопок социальных сетей в WordPress
uSocial - обзор нового сервиса социальных кнопок для вашего сайта
Привлечение трафика посетителей на свой сайт методами SMO (форумы, социальные сети, группы Subscribe)
Как добавить на свой сайт блок с кнопками, ведущими на ваши страницы или группы в социальных сетях, а так же на RSS ленту
Google+1 и Мне нравится от Вконтакте и Facebook - как добавить кнопки лайков в свой сайт
