От автора: приветствую вас. Сегодня социальные сети развились до такого уровня, что в них зарегистрировано в общей сложности более 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 на практическом примере по созданию веб-приложения
Ссылки в Stories начали появляться достаточно давно, но использовать их могли только официальные аккаунты. В мае появилась возможность добавлять ссылки в рекламе с плейсментом в Истории, однако всё это были платные механизмы. Сегодня мне начали присылать скриншоты того, что Instagram начал постепенно позволять обычным пользователям добавлять активные ссылки на сайты в своих Историях.
Как добавить ссылку в свою Историю в Инстаграм?Эта функция доступна не всем аккаунтам в Instagram! Сегодня ссылки в Stories доступны только:
Причём ссылка может появиться не сразу после того, как вы получили 10.000 подписчиков. Накрутка ботов до 10k подписчиков работает не всегда. Плюс, накрутить ботов так, чтобы они не отписались сегодня сложно, а при падении числа подписчиков аккаунта до 9.999 и менее возможность прикреплять ссылку исчезнет.
Чтобы перейти по активной ссылке из Истории пользователь должен сделать «Свайп вверх». Так как народ ещё не привык к таким возможностям, я бы рекомендовал дополнительно акцентировать внимание на ссылке различными ссылками и призывами к действию. Ну вы же взрослые ребята, сами понимаете о чём речь, кого я тут вообще учу.
Про появление активных ссылок в Директе я уже писал , но в блог информацию не выносил. Как и любое другое обновление, пока доступны избранной и случайной части пользователей.
Последние обновления делают Instagram ещё более интересным для ecommerce и малого бизнеса, битва за подписчиков пойдёт ещё жарче. Надеюсь только на то, что Instagram будет активно бороться со спамом ссылками в Директе.
Здравствуйте, уважаемые читатели блога сайт. Как вы уже, наверное, догадались из заголовка, речь пойдет про, так называемые, социальные кнопки, которые очень серьезно могут помочь статьям на вашем сайте привлечь, при удачном стечении обстоятельств и высоком качестве самой статьи, большое количество посетителей с социальных сетей и сервисов.
Социальные сигналы так же учитываются и поисковыми системами при ранжировании вашего сайта. Большое количество расшариваний в качественные аккаунты в Твиттере, 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 - как добавить кнопки лайков в свой сайт
Здесь фраза «Кто хочет купить софт со скидкой 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 есть самый лучший способ: зайти на их дебаггер
Вконтакте
Дело не столько в расширении списка того, что можно передавать кому-либо. На текущий момент он охватывает едва ли не все типы данных, интересующих среднестатистического владельца iPhone или iPad. То есть, кроме электронной почты, картинок, видео и музыки, можно передавать навигационные координаты, списки контактов и адреса, ссылки на тематические ресурсы и конкретные файлы в «облаках», короткие мультимедийные заметки, созданные при помощи мессенджеров и еще много чего. Правильней сформулировать мысль так – когда появляется новый сервис, использующий свой формат данных, то и для него приходится выделять место в системе, но пока все сбалансировано.
Однако в Apple понимают, что мир приложений для iOS непременно будет развиваться и потому возникновение таких нестандартных новичков – вопрос времени. Вероятно, в Купертино решили избавиться от дополнительной нагрузки и поручить авторам приложений самим потрудиться над реализацией функций «шаринга». Жесткое требование заключать соглашение с Apple осталось в прошлом, API сделали открытыми – дерзайте, энтузиасты-новаторы. Потенциально это перспективнейшее направление работы для создателей социально ориентированных программ, но и ответственность за результат – тоже их забота.
Исключение делается лишь для собственных продуктов компании, таких как Mail
, Сообщения
, Общий доступ к фото
– они всегда будут оставаться активными. Впрочем, так как речь пока идет о бете, это и прочие новшества еще могут измениться к сентябрю.
