Блок счетчики соц сетей

Конструктор блока «Поделиться» (Блок социальных кнопок Яндекса)

В предыдущей статье было показано, как найти Блок социальных кнопок Яндекса «Поделиться». В этой статье рассмотрим то, как с ним работать. Для этого программисты и дизайнера Яндекса предлагают использовать Конструктор блока «Поделиться», который прост в использовании и интуитивно понятен. Однако, для того, чтобы снять все вопросы и убрать сомнения, разберём его на составные части и посмотрим, как они работают и на что влияют.

Внешний вид Конструктора блока «Поделиться» Яндекса

Сперва как обычно картинка с тем, с чем предстоит разбираться, а ниже даны подробные пояснения, что есть что ; )

Набор сервисов Конструктора блока «Поделиться» Яндекса

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

Рядом с чек-боксом расположена иконка и название сервиса так, что ошибиться невозможно. Всё, что выделено галочкой в чек-боксе попадёт в Код для вставки на сайт (о котором будет рассказано ниже).

Стоит обратить внимание на то, что Pinterest требует привязки обязательной картинки. Поэтому следует выбрать картинку, представляющую сайт или материалы сайта, которая будет размещена в Pinterest, если пользователи захотят поделиться ссылкой на страницу сайта, на которую вы поместите блок Яндекса «Поделиться».

Внешний вид блока в Конструкторе блока «Поделиться» Яндекса

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

• «только иконки» — расположенные в ряд иконки большого размера
• «счётчики» — расположенные в ряд иконки маленького размера с указаниями количества репостов для тех соцсетей, которые отдают API этих счётчиков
• «иконки и меню» — для тех, кто хочет предоставить пользователям сайта максимальное количество социальных сетей для репоста, но не хочет загромождать страницу массой иконок, выведя . для того, чтобы оставшиеся иконки выдавались в выпадающем меню
• «маленького размера» — расположенные в ряд иконки маленького размера

Код для вставки на сайт в Конструкторе блока «Поделиться» Яндекса

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

В принципе всё просто и начинает работать сразу после размещения на сайте. К тому же не требует регистрации ни на Яндексе, ни в одной из социальных сетей! =D

OJS: кнопки соцсетей

В данном материале мы расскажем о том, как добавить кнопки социальных сетей в сайт на OJS (Open Journal Systems).

Реализация данной функции сделает сайт более посещаемым, а журнал более популярным в Интернете.

Для этого Вам нужно предпринять несколько шагов:

1. Выбрать один из специальных сервисов, настроить блок с кнопками и получить код;
2. Добавить полученный код в страницы сайта на OJS;
3. По желанию добавить и настроить отображение логотипа сайта.

1. Выбираем сервис, настраиваем виджет, получаем код

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

• AddToAny
• AddThis
• ShareThis
• Pluso
• Share42
• Yandex

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

В качестве примера можем воспользоваться кнопками от Яндекса.

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

2. Добавляем код в страницы сайта OJS

Чтобы расположить кнопки социальных сетей вверху страницы отдельной статьи на сайте, открываем файл в директории /templates/article/article.tpl и добавляем наш код после строки:

Чтобы расположить кнопки социальных сетей внизу страницы отдельной статьи на сайте, в этом же файле /templates/article/article.tpl добавляем наш код после строки:

Результат будет приблизительно такой:

Нужно отметить, что в OJS за шаблон страницы отдельной статьи и за шаблон других страниц сайта отвечают разные файлы . Т.е., если Вы добавите код кнопок таким способом, то он будет отображаться только на страницах со статьями. Если Вы хотите отображать блок с кнопками социальных сетей дополнительно на всех других страницах сайта, можете вставить его в настройках внешнего вида:

Управление журналом >>> Установка >>> 5. Внешний вид журнала >>> 5.4 Нижний колонтитул страницы журнала с помощью кнопки «HTML». Более детально см. здесь.

Еще один способ отобразить код на всех страницах сайта — добавить его в файлы шаблона, которые отвечают за «шапку» сайта templates/common/header.tpl и «подвал» сайта templates/common/footer.tpl. Дополнительные файлы шаблона также можно найти в директории: lib/pkp/templates/common/ … место отображения Вы можете выбрать на свое усмотрение.

3. Настраиваем отображение логотипа для соцсетей

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

Правильный образец:

Чтобы решить эту проблему, нужно создать изображение логотипа журнала (сайта, организации и пр.). Желательно квадрат 200х200 точек в формате PNG с название латиницей, например, «logo».

Далее нужно загрузить изображение с ПК в файлы OJS. Для этого идем: Управляющий журнала >>> Установка >>> Внешний вид журнала.

В любом из полей нажимаем кнопку «загрузить фото» (см. скриншот ниже). Загружаем с ПК наш файл.

Изображение появится в визуальном редакторе. После этого нужно или отменить действие (Ctrl + Z) или просто удалить изображение любым удобным способом. Оно уже было загружено на сервер.

Загруженное таким способом изображение в формате PNG и названием «logo» будет иметь приблизительно такой адрес: http:// your-site.com /public/site/images/admin/logo.png

Далее закрываем «Внешний вид журнала» без всяких сохранений и в административной панели идем: Управляющий журнала >>> Установка >>> 1. Детали .

В пункте «1.8 Индексация для поисковых машин» находим поле «Теги пользователя» и вставляем в него следующий код, содержащий ссылку на наше изображение:

Не забываем дублировать в остальных языковых версиях сайта и сохранить изменения.

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

В конце можно (на всякий случай) очистить кэш шаблона… Для этого идем в «Администрирование сайта» и нажимаем «Очистить кэш шаблонов»…

Надеемся, данная информация будет полезной. С уважением. Участники OSU.

JBSocial — социальные кнопки

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

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

В компоненте Zoo есть элемент Social Buttons, который использует только три социальные кнопки — Google+, Facebook и Twiter. Но их зачастую бывает недостаточно, особенно в России, где существуют свои соц.сети.

Мы создали элемент JBZoo Social, который содержит 20 кнопок, чтобы пользователи могли делиться ссылками в различных сообществах.

Как добавить новый элемент?

Перейдите во вкладку шестеренка и зайдите в приложение JBZoo App.

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

В Библиотеке нажмите на надпись JBZoo Social и у вас появится новый элемент.

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

Как настроить элемент в шаблоне?

Найдите тип материала, в котором вы создали новый элемент и напротив него зайдите в нужный шаблон материала. Перетащите ваш элемент в позицию слева.

Вы увидите множество настроек. Давайте разберем их по частям:

Кнопка ВКонтакте

Like ВКонтакте — опция, которая позволяет ставить лайки в данной социальной сети.

Тип кнопки ВКонтакте — её внешний вид. Вы можете выбрать в выпадающем списке тип, наиболее подходящий для сайта:

• Кнопка с текстовым счетчиком;
• Кнопка с миниатюрным счетчиком;
• Миниатюрная кнопка;
• Миниатюрная кнопка, счетчик сверху.

Высота кнопки — размер по вертикали. Выберите тот, который больше вам подходит (18, 20, 22 или 24 px).

Текст в кнопке — надпись, отображаемая внутри кнопки.

ID приложения — код, который необходим для отображения виджета «Мне нравится» на вашем сайте. Он обязательный и вы можете получить его как описано в статье. При этом вы должны быть авторизованы.

Кнопка Facebook

Like Facebook — параметр для включения лайков.

Отправить — опция, при активации которой на странице будет показана данная кнопка.

Шаблон кнопки — внешний вид, который может иметь кнопка. Выберите, какой по вашему мнению больше подходит сайту.

Цветовая схема — оттенок кнопки (светлый, темный).

Текст на кнопке — одна из надписей, отображаемая внутри (Нравится или Я рекомендую).

Локализация — язык, на который будут переведены все надписи на кнопке (русский, английский).

Кнопка Twiter

С помощью — настройка, в которую можно прописать имя пользователя твитера. Тогда к сообщению прибавится слова с помощью и ссылка на введенный аккаунт. Обычно у каждой компании (сайта) есть официальный твитер аккаунт. Рекомендуем прописать его в данное поле.

Размер — параметры кнопки (большой, стандартный).

Рекомендовать — текстовое поле, в которое вводится имя пользователя. После того, как кто-либо из посетителей твитнет, он перейдёт на твитер страницу прописанного пользователя. Можно прописать твитер аккаунт компании или сайта.

Метка (хештег) — тематическая метка, содержащая слово или фразу, о которой идёт речь в записи. Он должен начинаться с решётки (#) и не содержать пробелов. Можно написать кириллицей.

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

Счетчик — параметр для включения подсчета твитов.

Кнопка Одноклассники

Ваш ресурс — доменное имя вашего сайта в виде «http://mysite.ru».

Отображение счетчика — опция, показывающая количество лайков.

Счетчик — его местоположение (справа, сверху).

Текст на кнопке — настройка, при активации которой будет показываться текст.

Надпись на кнопке — слова, написанные на ней (Класс!, Поделиться или Нравиться).

Вид кнопки — её форма (Овал, Закругленные края, Квадратная кнопка)

Размер — параметры кнопки в пикселях.

Кнопка Google

Размер кнопки — различные линейные характеристики (Большая, Средняя, Маленькая, Вытянутая).

Аннотация — текстовое замечание:

• Горизонтальная — отображается справа от кнопки.
• Только счетчик, который находится над кнопкой.
• Без аннотации — замечание отсутствует.

Размер аннотации — линейные параметры (не менее 120 px).

Linked In

Linked In — настройка для включения данной социальной кнопки.

URL — адрес, который будет отправляться в эту соц.сеть.

Счетчик — его местонахождение относительно кнопки (Без счетчика, Справа, Сверху).

Блок Поделиться (Yandex Share)

Отображаемые сервисы. Укажите, через запятую, сервисы, иконки которых будут стоять рядом с кнопкой. Доступные значения: blogger, delicious, diary, evernote, facebook, friendfeed, gplus, guick, liveinternet, lj, moikrug, moimir, myspace, odnoklassniki, surfingbird, pinterest, tutby, twitter, vkontakte, yaru, yazakladki.

Шаблон отображения — внешний вид кнопки.

Как управлять кнопками в материале?

Зайдите на страницу редактирования материала. Вы увидите настройку для включения или выключения социальных кнопок. Выберите Да, если хотите, чтобы кнопки отображались на данной странице. В противном случае выберите Нет.

Блок социальных кнопок. Кнопки социальных сетей

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

Конструкторы кнопок социальных сетей для сайта

2. Лёгкий способ получить ссылки на сайт — QIP.RU
Разместите кнопку на сайте и дайте посетителям возможность добавлять понравившиеся материалы сайта в закладки, блоги и соцсети. Три шага: где разметите кнопку (сайт, Blogger или WordPress), стиль кнопок (готовые варианты) и получить кнопку.

3. Кнопки для добавления контента в соцсети — Pluso
Разместите кнопки и дайте посетителям возможность делиться понравившимися страницами в соцсетях, а также печатать, отправлять письмо и добавлять закладки.

4. Сервис социальной активности — UpToLike
Кастомизированные кнопки соцсетей с возможностью задать цвет, форму, размер и спецэффекты. Дополнительные фишки — виджет расшаривания картинок PicShare, функция «Цитирование» и кастомизированная функция Following.

5. Одна кнопка ! — для всех сервисов закладок и соцсетей
Выберите вид кнопку. Где будет установлена кнопка: сайт, Blogger или WordPress. Добавьте кнопку.

Скрипты кнопок социальных сетей для сайта

1. Красивые социальные кнопки для сайта — goodshare.js
Отображение кнопок практически на любом устройстве. Чистый код. Краткая документация. SEO friendly.

2. Скрипт кнопок социальных закладок и сетей — Share42
Выберите размер и отметьте иконки сервисов, которые хотите использовать на сайте. Выберите нужные опции. Посмотрите, как это будет выглядеть и/или скачайте готовый скрипт. Установите скрипт на сайт WordPress, Drupal, другое.

3. Красивые кнопки «лайков» соцсетей с использованием jQuery — Social Likes
Скрипт кнопок «лайков» со счётчиками в едином стиле для соцсетей: Facebook, Twitter, ВКонтакте, Одноклассники, Мой мир, Google+ и Pinterest.

Зарубежные аналоги кнопок социальных сетей для сайта

1. Share Buttons — AddThis
Кнопки шаринга помогут вам увеличить аудитория сайта, путем привлечения посетителей с других ресурсов и соцсетей, через распространяемый контент.

4. Social Sharing — Po.st
Получить больше пользы от шаринга в соцсетях. Сервис позволит облегчить процесс шаринга в соцсетях для посетителей, что позволит увеличить органический трафик сайта.

5. Share Buttons for Any Website — AddToAny
Получите код кнопок социальных сетей для любого сайта. Выберите тип и стиль кнопок, укажите e-mail и другие опции или выберите одну из платформ: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad или FeedFlare. Получите код кнопок.

Pluso X

Add This

Good Share

Shareaholic

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

Соцкнопки необходимы, это очевидно. Вопрос в другом — какие выбрать? Мы для вас протестировали ТОП 5 различных сервисов для добавления кода кнопок на сайты. Цель — выявить оптимальный и показать его в деталях. Начнём с отборочного этапа.

Выбор лучшего сервиса социальных кнопок

Выбор претендентов для сравнения оказался банален — мы взяли самые популярные сервисы , о которых слышал любой человек, сколь-нибудь близко знакомый с темой создания сайтов. Никаких редких, набирающих популярность, только опытные старички.

Состав команды аттестуемых таков:

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

Особенности кнопок uSocial

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

Словесного сравнения многим окажется мало. Поэтому мы составили сравнительную таблицу кнопок от uSocial и остальных дебютантов (используемая шкала оценки — от 1 до 5). Все эти данные получены в процессе тестирования.

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

Инструкция как установить кнопки социальных сетей на сайт

Для размещения социальных кнопочек от uSocial на своём сайте необходимо выполнить несколько простых шагов:

Собираем набор социальных кнопок. Можно выбрать отображаемые сервисы социальных сетей, форму и стиль кнопок.

Здесь же можно активировать кнопку «Вверх», включить поддержку мобильных устройств, подключить сервисы Viber, WhatsApp, Telegram, SMS.

После завершения всех операций вводим адрес своего сайта и жмём на кнопку «Получить код» .

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