Как добавить кнопку одноклассников на сайт

knopki-socialnyx-setei-dlya-sajta

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

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

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

Как добавить на сайт кнопки соцсетей (на примере блока «Поделиться» от «Яндекса»)

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

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

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

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

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

Кнопка социальной сети ВКонтакте

Пожалуй, ВКонтакте является самой популярной социальной сетью в России и странах СНГ, хотя facebook в этом плане упорно наступает ему на пятки. ВКонтакте предлагает сразу две кнопки для сайта. Для начала остановимся на виджете «Мне нравится». Думаю, суть понятна каждому пользователю.

Если посетителю понравился материал, он нажимает на кнопку, чтобы оценить его, при желании он также может поделиться ссылкой на материал со своими друзьями на своей стене. Теперь давайте разберемся, как установить социальную кнопку на сайт. Для начала авторизуйтесь в социальной сети. После этого перейдите по ссылке. Перед вами откроются настройки кнопки «Мне нравится».

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

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

Разбег небольшой: от 18 до 24 пикселей. Здесь все зависит от того, сколько места на сайте вы отвели под социальные кнопки. Выбираем название кнопки. Я предпочитаю «Мне нравится», так как данный вариант встречается чаще всего и более привычен для пользователей интернета. После этого нам остается скопировать код и вставить его в тему (шаблон) своего сайта.

Первую часть кода требуется вставить между открывающим и закрывающим тегами и . Они находятся только в одном файле шаблона. На wordpress он чаще всего называется header.php, на других движках каким-нибудь аналогичным образом. Файл также часто называют «заголовком», «шапкой» или как-либо еще в этом духе.

Еще по теме:  Как скрыть друзей в Одноклассниках от других пользователей с телефона Андроид

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

Ориентироваться в нем можно по различным тегам и записям. К примеру, если вы хотите вставить кнопку, как и у меня, в конце поста, тогда найдите строку или какую-нибудь похожую на нее и вставьте после нее тот самый код. После этого не забудьте нажать на «обновить файл» или «сохранить». Алле-оп, и кнопка «Мне нравится» появляется у вас на сайте. Легко, не правда ли?

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

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

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

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

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

Здесь все еще проще, даже сайт подключать не надо. Все что нужно, это выбрать стиль, рекомендую «Кнопка», также можно указать абсолютно любой текст, рекомендую оставить «Сохранить», так как данный вариант известен и понятен уже большинству пользователей интернета. Дальнейшие манипуляции аналогичны кнопке «Мне нравится»: первую часть кода вставляем внутри тега , вторую часть в том месте шаблона, где должна выводиться кнопка. Сохраняем и смотрим результат.

Кнопка социальной сети Facebook

Самую популярную социальную сеть в мире никак нельзя обходить стороной. Кнопка от facebook должна стоять на каждом сайте. Настроить ее можно здесь.

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

В принципе, все как всегда: можно выбрать стиль, цветовую гамму, шрифт и тд. Устанавливать на сайт только кнопку «Мне нравится» или же в паре с «Отправить», решать вам. Я галочку с «Send Button» снял. Ее смысл заключается в том, что можно отправить сообщение с ссылкой на материал другу или группе друзей в пределах facebook или даже на электронную почту.

Вещь очень удобная, но русскоязычные пользователи интернета пока редко этим пользуются, поэтому я ограничился только кнопкой «Мне нравится». После того как вы ее настроите, нажмите «Get Code». Можно выбрать несколько вариантов кода, я остановился на формате html5.

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

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

Кнопка социальной сети Twitter

Твиттером пользуются многие люди по всему миру. Он нравится как звездам, так и политикам. Если произошло что-то важное в жизни какой-либо знаменитости, об этом первым делом вы скорее всего узнаете именно в твиттере, а не где-либо еще. Устанавливать кнопку twitter на сайт? Конечно!

Заходим сюда и видим, как всегда, настройки.

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

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

Галочкой можно выбрать кнопку побольше, если это требуется. Не забываем сменить язык на свой родной. Код для вставки в формате html доступен справа. Копируем его и вставляем в том месте шаблона, где бы вы хотели видеть кнопку. Рекомендую закрыть ссылку от индексации.

Внутри тега абсолютно ничего вставлять не нужно.

Еще по теме:  Какой браузер самый лучший для игр в одноклассниках

Кнопка социальной сети Google+

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

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

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

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

У социальных сетей Мой Мир и Одноклассники один и тот же владелец, а именно Mail.Ru Group, поэтому и их интерфейсы очень тесно связаны между собой. Точнее сказать, интеграция коснулась не только социальных сетей, но и всех сервисов от mail.ru с Одноклассниками. Ходят слухи, что соц.сети хотят и вовсе объединить в единое целое, так ли это, увидим. А пока что предлагаю разобраться, как установить кнопки этих социальных сетей на сайт. Переходим на эту страницу и опускаемся чуть ниже до настроек.

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

Настройки, должен сказать, очень удобные. Все наглядно и интуитивно понятно. Можно выбрать и размер, и положение счетчика, и текст, и даже вид углов. Если какая-то из кнопок вам не нужна, ее можно отключить в пункте настроек «Кнопки». После этого копируем код и, устал уже этого говорить, вставляем его в том месте шаблона, где должны выводиться кнопки.

Еще совсем недавно и половины этих настроек не было, а также наблюдались проблемы с отображением кнопки «Класс» в Google Chrome. Браузер почему-то обрезал ее. Сейчас все отлично.

Обновление 22.09.2013. Теперь кнопки социальных сетей Мой Мир и Одноклассники настраиваются отдельно. Настройки кнопки Одноклассники доступны на этой странице. В остальном без изменений.

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

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

На самом деле сервисов для установки кнопок на сайт существует достаточно много, но не вижу смысла разбирать каждый из них. Наиболее удобным и популярным является блок от Яндекса «Поделиться». Заходим сюда и видим следующее:

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

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

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

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

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

Кнопки каких социальных сетей устанавливать на сайт, решайте сами. На это очень сильно влияют контент и тематика сайта. Но то что социальные кнопки должны быть на каждом сайте — это факт. Если вы еще не установили их, скорее это сделайте.

Источник: yaroslaff.su

WordPress кнопка одноклассники

Подробные видеоинструкции WordPress на тему: «WordPress кнопка одноклассники»:

Как установить кнопку на сайт WordPress за 30 секунд. WordPress кнопка с помощью плагина!

Как установить кнопки социальных сетей в новых темах WordPress

Как установить виджет группы социальной сети Одноклассники на сайт на WordPress

Социальные кнопки для WordPress

Источник: wordpressunik.ru

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

Выбираем лучшие кнопки социальных сетей для сайта - uGuide.ru

Кнопки соцсетей – неотъемлемая часть поискового продвижения и комфорта пребывания посетителей на сайте. Они позволяют делиться интересными публикациями с друзьями или сохранять полезные статьи для дальнейшего ознакомления. Какие же кнопки лучше выбрать?

Еще по теме:  Есть ли Одноклассники в Бразилии

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

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

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

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

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

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

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

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

uSocial – это мощный конструктор социальных кнопок «Поделиться» и «Мне нравится» для сайта. Имеет собственную функциональную кнопку для шаринга uLike, виджет для привлечения посетителей (завлекающее pop-up окно), приложение для ВК сообществ, конструктор мета-данных и инструмент отладки (очистки кэша). Отдельно стоит выделить наличие такой полезной опции как «Социальный замок» позволяет скрывать заданный контент (ссылку, промокод и т.д.) на страницах сайта и предоставлять к нему доступ по истечению определенного времени или при выполнении условия – «Поделиться» сайтом в социальных сетях! Само собой, есть поддержка мобильной версии блока, счетчика репостов/лайков, доступна масса гибких настроек для отображения, а также подробная статистика репостов в личном кабинете. Кнопки можно установить на сайт любого конструктора или CMS: uCoz, uKit, Wix, Jimdo, WordPress, Joomla и остальных движков.

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

  • Во-первых, конструктор соцкнопок uSocial обладает удобным, понятным и эргономичным дизайном.
    Перемещаясь по панели функционала, которая включает в себя несколько пунктов, вы можете всегда слева видеть окно предпросмотра, что является большим плюсом. При этом, конструктор не выглядит перегруженным. Он полностью на русском языке, но имеет также и полноценную английскую локализацию. Многие аналогичные сервисы поддерживают русский язык, но не все. Например, AddThis не имеет такой возможности, что резко снижает его привлекательность для российских вебмастеров.
  • Во-вторых, uSocial предоставляет реально широкий функционал. В конструкторе можно настроить блоки “Поделиться” и “Мне нравится” так, чтобы они максимально органично смотрелись на вашем сайте. Круглые или квадратные иконки, пять различных эффектов при наведении, расположение – вертикальное, горизонтальное или статичное в заданном месте, три вида размеров, наличие общего счетчика и для каждой кнопки в отдельности, добавление кнопки “Наверх”, настройки мобильного вида, привлечение внимания к кнопкам и призыв к действию – в общем всё, что душе угодно. Таким обширным функционалом не сможет похвастаться ни один из приведенных в нашем обзоре конкурентов.
  • В-третьих, сервис дает возможность добавления, хранения и редактирования наборов в личном кабинете. Такой функции нет, например, в Яндекс Поделиться и Pluso. Эта фича очень удобна, если вы разработчик однотипных сайтов, а потому изменений в блоке “Поделиться” нет совсем или они незначительные.
  • В-четвертых, удобство использования самого блока. Для пользователя сайта работа с блоком не должна вызывать затруднений, иначе он просто откажется им пользоваться. Как, например, в случае с блоками от сервиса Яндекс.
    Для того, чтобы найти нужную вам соц. сеть, если она изначально не представлена в блоке, придется пролистать вниз внушительный список и отрываться при этом от содержимого сайта, что не слишком удобно.
    uSocial никак не мешает просмотру страницы. Если вдруг пользователь не хочет постоянно видеть данный блок на сайте, он может его скрыть и развернуть вновь при необходимости.

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

Источник: uguide.ru

Рейтинг
( Пока оценок нет )
Загрузка ...