В последнее время каждый второй (если не первый) заказчик в требованиях по разработке сайта просит непременно связать его с социальными сетями. «Социальные» кнопки на сайте — средство номер 1 для привлечения целевой аудитории, распространения контента и пиара в целом. Причем совершенно бесплатное!

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

Каковы возможности и функции?

Если ваш сайт ориентирован на людей которые общаются популярных соц. сетях, например, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest и прочее, и вы хотите охватить их все, то чтобы не устанавливать кнопки каждой из них по отдельности, учитывая то, что они могут отличаться по размерам и дизайну, советуем воспользоваться сервисами-агрегаторами. Это простые и удобные инструменты, которые позволят посетителям сайта быстро делиться информацией со своими друзьями вне зависимости какой социальной сетью они пользуются. Ниже мы разберем наиболее популярные сервисы.

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

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

Сервисы, которые я использовал на сайтах клиентов и на своём блоге — и . Эти сервисы позволяют достаточно легко реализовать поставленную задачу.

В чём преимущество собственных социальных кнопок перед сервисами и плагинами

1. Безусловно, неоспоримым фактором является скорость загрузки сайта. Так, к примеру, сервис PLUSO, который я использую на блоге, при лучшем раскладе прибавляет к загрузке 633 миллисекунды.

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

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

1. Очень простая установка. Достаточно вставить html код блока в исходный код страницы сайта, загрузить спрайт, добавить css стили и установка закончена. Вам лишь необходимо будет подправить путь к файлу с изображениями кнопок.
2. Этот пункт скорей и не плюс и не минус в сторону собственного блока социальных кнопок. Фишка в том, что у собственного блока нет счётчика нажатий на кнопки. И это можно посчитать за минус. Но, с другой стороны, есть возможность поставить на каждую кнопку и вы точно будет знать сколько раз нажимали на кнопки и делились вашими статьями в социальных сетях ваши посетители.
3. Статистика, собираемая сервисами, по вашему сайту больше не будет передаваться третьим лицам.

Вставка блока социальных кнопок в исходный код

Мы же рассмотрим классический вариант, когда кнопки расположены после статьи.

Сделать это можно либо открыв файл, отвечающий за вывод статей (single.php ) и в исходный код добавить блок социальных кнопок. Либо это можно сделать через файл функции темы (functions.php ).

Я покажу оба варианта, а вы для себя выберите подходящий.

Вставка блока в исходный код single.php

Предупреждение: Пред началом всех действий сделайте резервную копию файла single.php!

Открываем административную панель Вордпресс – «Внешний вид» — «Редактор» — «Одна запись (single.php)» .

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

Внимательно смотрите на скриншот, ориентируйтесь на коды, отвечающие за вывод статьи и комментариев . И вставляйте приведённый ниже код.

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

А вот и сам html код блока социальных кнопок:

Пояснения по коду: это один блок ДИВ с классом.share, в котором содержатся ссылки на социальные сети. Ссылка открывается в отдельном всплывающем окне, за это отвечает вот эта функция onClick=window.open . Подстановка ссылки на статью осуществляется вот этим кодом . Каждая ссылка имеет свой класс, через который присваивается изображение кнопки.

На этом вставка через исходный код закончена. И далее нужно подключить css стили.

Вставка блока в исходный код single.php через функции темы

Предупреждение: пред началом работ, — сделайте резервную копию файла functions.php!

Для того чтобы использовать это вариант, нужно открыть файл functions.php и в самом конце добавить этот код:

/* Вставка соцкнопок*/ add_action("comments_template","soc_button"); function soc_button() { ?> И будьте внимательны после вставки кода у вас не должно быть пробелов и других символов. Либо только закрытие php кода?>. В противном случае сайт перестанет работать.

Пояснения по коду: место, где будут выставлены кнопки социальных сетей, определяется через API ключ comments_template . По этому ключу определяется место перед комментариями. Сам код соцкнопок заключён в обратные теги открытия и закрытия php. В коде я их обозначил красным цветом. в этом вся хитрость вставки html кода в php, через функции темы.

На этом и это способ окончен, переходим к загрузке изображений на сайт.

Загрузка изображения кнопок на сервер

Для примера я подготовил несколько спрайтов с изображениями социальных кнопок. Скачать их можете .

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

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

Подключение стилей CSS

Этот шаг можно конечно, выполнить самым первым, но я предпочитаю вначале выполнить всю сложную техническую работу, а уже после приступить к приятным мелочам с css стилями.

Итак, открываем файл style.css, отвечающий за дизайн вашего сайта. И вставляем вот эти стили:

Share a { display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test..png ") no-repeat scroll 0px 0px transparent;} .share a.vkontakte { background: url("http://test..png ") no-repeat scroll -168px 0px transparent; } .share a.google { background: url("http://test..png ") no-repeat scroll -252px 0px transparent; } .share a.livejournal { background: url("http://test..png ") no-repeat scroll -336px 0px transparent; } .share a.twitter { background: url("http://test..png ") no-repeat scroll -42px 0px transparent; } .share a.mail { background: url("http://test..png ") no-repeat scroll -294px 0px transparent; } .share a.odnoklassniki { background: url("http://test..png ") no-repeat scroll -126px 0px transparent; } .share a.pinterest { background: url("http://test..png ") no-repeat scroll -210px 0px transparent; } .share a.liveinternet { background: url("http://test..png ") no-repeat scroll -378px 0px transparent; } .share a.evernote { background: url("http://test..png ") no-repeat scroll -420px 0px transparent; } .share a.bookmark { background: url("http://test..png ") no-repeat scroll -462px 0px transparent; } .share a.email { background: url("http://test..png ") no-repeat scroll -504px 0px transparent; } .share a.print { background: url("http://test..png ") no-repeat scroll -546px 0px transparent; } .share a.digg { background: url("http://test..png ") no-repeat scroll -588px 0px transparent; } .share a.spring { background: url("http://test..png ") no-repeat scroll -630px 0px transparent; }

Пояснения по коду: класс.share определяет общий вид блока, размеры каждой кнопки, отступы и задаёт единый фон. А далее каждая ссылка имеет свой класс и каждой такой ссылке, через свойство background присваивается вид кнопки. Кнопки выполнены в качестве css спрайта, и каждая кнопка имеет ширину и высоту 40px, а между ними отступ 2px, что позволяет с точностью определить изображение для каждой кнопки. То есть первая кнопка указана, как 0, а вторая как 42 и так далее. В коде эти значения обозначены оранжевым цветом. Ссылка на спрайт тоже выделена оранжевым цветом, её вы меняете на путь к своему спрайту.

На этом весь процесс создания своего блока социальных кнопок – закончен. Можно смело переходить к проверке.

А ещё у меня есть видеоурок, в котором весь процесс показан наглядно, полюс показана работа самих кнопок. Смотрите и внедряйте на своих сайтах и блогах.

Вот теперь всё. С поставленной задачей справился. Всем желаю удачи и до встречи в новых статьях и видеоуроках.

2014-05-16

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

Социальные кнопки очень важны и являются неотъемлемым элементом сайта.

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

В ней я рассказывала о нескольких вариантах установки кнопок:

2). С помощью плагина Social Share Buttons

3). При помощи сервиса http://api.yandex.ru/share

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

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

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

Социальные кнопки на сайте или блоге. Сервис Share42

К достоинствам данного сервиса относится:

— удобство и простота в установке и настройке

— все файлы размещаются на хостинге вашего блога, что обеспечивает её стабильную работу

— симпатичный внешний вид кнопок, выполненный в одном стиле

— отсутствие ненужных исходящих ссылок

— возможность расположить блок кнопок как горизонтально, так и вертикально

Подробнее об остальных преимуществах можно почитать на самом сайте.

Как добавить социальные кнопки на сайт. Установка и настройка соц. кнопок

Первым делом заходим на сайт сервиса Share42.com

1). Выбираем размер кнопок и соответственно те кнопки, которые хотите видеть у себя на сайте.

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

3). Обязательно смотрим, что получилось и как выглядят социальные кнопки. Если всё нравится, то скачиваем скрипт.

4). Теперь самый главный шаг – установка скрипта на свой сайт.

Советую куда-нибудь скопировать файл single.php – на всякий случай.

Скачанный скрипт — закачиваем на хостинг через панель управления и распаковываем. Выбираем подходящий тип сайта, я выбрала WordPress. И чтобы указать путь к файлам вставляем приведённый ниже код в шаблон вашего сайта. Только вместо site.name пишем свой домен.

Заходим в редактор, и если вы хотите поставить кнопки в конце каждой статьи, то вставляем этот код в single.php после строчки:

У меня лично такая строчка, ваша может отличаться.

Если хотите расположить вертикально, то вставляете в header.php перед закрывающим тегом «/head».

Теперь осталось дело за малым — оформить внешний вид панели с кнопками.

Выравнивание по центру.

Чтобы сделать социальные кнопки на сайте по центру используйте тег

код кнопок или перед кодом пропишите .

Добавляем социальные кнопки с помощью сервиса Pluso

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

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

Итак, переходим на share.pluso.ru и выбираем желаемый стиль кнопок.

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

Обратите внимание на предпросмотр и увидите, что же у вас получилось.

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

Если вас всё устраивает и всё нравится, приступаем к установке.

Копируем полученный код и вставляем в нужное нам место. Здесь всё тоже самое — в single.php. Выравнивание по центру социальных кнопок происходит так же как и в предыдущем варианте.

Есть минус в данном сервисе. Это внешняя ссылка (реклама сервиса) в виде плюса в конце кнопок.

При желании можно удалить эту красную кнопку, зайдите в style.css и в конце добавьте следующий код:

Pluso-more {display: none !important;}

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

От автора: приветствую вас. Сегодня социальные сети развились до такого уровня, что в них зарегистрировано в общей сложности более 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 на практическом примере по созданию веб-приложения

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

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

• Вконтакте
• Фейсбук
• Одноклассники
• Гугл «+1»
• Твиттер
• Мой Мир

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

1.1. Вконтакте

1.1.1 Кнопка «сохранить»

Кнопка достаточно гибкая, надпись на ней можно менять на любую желаемую (по умолчанию «сохранить»).

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

Здесь можно выбирать один из 5 стилей : кнопка, кнопка без счетчика, ссылка, ссылка без иконки, иконка.

Поле «текст » позволяет изменять стандартную надпись «сохранить» на свою.

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

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

1.1.2 Кнопка «мне нравится»

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

Для настройки кнопки перейдите по этой ссылке . Здесь также необходимо заполнить ряд параметров.

Название сайта – здесь лучше указать краткое и настоящее название вашего сайта.

Адрес сайта – укажите адрес главной страницы вашего сайта.

Основной домен сайта – укажите главное зеркало сайта (его можно найти в в качестве параметра оператора «Host»), если затрудняетесь это сделать – то оставьте предлагаемое ВКОНТАКТЕ.

Варианты кнопки – это различные стили кнопки, они влияют на ее внешний вид.

Высота кнопки – геометрические размеры «Мне нравится».

Название кнопки – доступно два варианта (мне нравится, это интересно).

Код для вставки – тот код, который нужен для отображения кнопки социальной сети Вконтакте.

1.2 Фейсбук

Настраивается кнопка на этой странице . Могут возникнуть трудности, т.к. комментарии к форме написаны на английском языке, но ниже вы можете прочитать краткое описание каждого поля.

URL to Like – url-адрес страницы для кнопки (если поле не заполнено, то будет браться адрес страницы, на которой расположена кнопка).

Send Button – наличие галочки включает новую возможность – отправлять ссылку в Фейсбук (отобразится дополнительная кнопка – «отправить»). При включении будет одновременно отображаться две кнопки.

Layout Style – стиль кнопки, влияет на ее внешний вид (стандартным считается button_ count ).

Width – ширина кнопки в пикселях.

Show Faces – при включении будут показываться аватары людей, уже нажавших на данную кнопку.

Font – тип шрифта кнопки.

Color Scheme – фон пространства рядом с кнопкой (белый и черный).

Verb to display – название кнопки (нравится, я рекомендую).

Get Code – кнопка, формирующая код скрипта.

1.3 Одноклассники и Мой мир

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

Для настройки кнопок нужно перейти на . Можно добавлять кнопки по отдельности, настраивая каждую по-своему, а можно редактировать обе кнопки одновременно.

Размер по высоте – геометрический размер кнопок.

Вид – внешний вид рамки кнопок.

– выбор кнопок (нравится, класс)

Счетчик – включение и выключения счетчика нажатий на кнопки (справа, сверху – расположение счетчика).

Текст на кнопках – выбор одного из трех названий, доступных для кнопок.

Код для вставки – код скрипта, который нужно будет устанавливать на сайт.

1.4 Гугл «+ 1»

Новая социальная сеть, которая за короткое время набрала огромную аудиторию. Трудно представить себе сайт без кнопки «+1», т.к. она не только позволяет добавлять ссылки в социальную сеть и увеличивать количество «плюсиков», но и может влиять на результаты сайта в ТОПе поисковой системы Google.

Все подробности об этом, а также установка и настройка кнопки находятся .

1.5 Твиттер

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

Сначала нужно выбрать нужную кнопку (нас интересует первый вариант – кнопка «отправить ссылку»).

После этого на странице появится форма с несколькими полями, которые нужно заполнить.

Отправить ссылку – выбор страницы, на которой расположена кнопка, или любой другой.

Текст – выбор текста, который будет появляться рядом с кнопкой (НЕ НА САМОЙ КНОПКЕ).

Показывать счетчик – включить или выключить отсчет количества нажатий на кнопку.

С помощью – выбор способа добавления сообщения ссылки в Твиттер (практически ни на что не влияет).

Отметить – выбор метки, которая будет публиковаться в Твиттере (практически ни на что не влияет).

Большая кнопка – увеличение геометрического размера кнопки.

Отказаться от адаптации Твиттера – отказ от стилей Твиттера (лучше оставить поле без галочки).

Язык – выбор языка кнопки.

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

1.6 Я.ру

Для этого нужно заполнить несколько полей, которые сформируют нужный код скрипта.

Размер – маленький или большой размер кнопки.

Стиль – выбор между кнопкой или иконкой.

Наличие счетчика – включение или выключение счетчика нажатий на кнопку.

Внешний вид кнопки – пример того, как будет выглядеть кнопка.

Заголовок – выбор заголовка для страницы (произвольный или заголовок текущей страницы).

Код для вставки – нужный код, который добавляется на сайт.

2. Готовые кнопки для сайта

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

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

Набор сервисов – выбор кнопок социальных сетей для сайта (те, что с галочкой – будут отображаться на сайте).

Код – нужный скрипт, который необходимо добавить на сайт.

2.2 Кнопки «PLUSO»

В последнее время широкую популярность приобрел конструктор кнопок социальных сетей – PLUSO. Перейти на сайт можно по этой ссылке .

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

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

Затем необходимо настроить ряд параметров, выбрав

• расположение блока (вертикальный, горизонтальный);
• цвет кнопок (яркие, темные);
• величину блока (крупный, маленький);
• счетчик (наличие или отсутствие);
• фон (бесцветный или цветной);

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

S hare42

Еще один сервис, позволяющий сконструировать кнопки для своего сайта – Share42.com/ru .

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

Выберите размер кнопок и нужные социальные сети, а затем перейдите к настройке дополнительных опций.

Тип панели с иконками – отображение блока кнопок (очень интересен вариант «вертикальная плавающая»).

Ограничить видимое кол-во иконок – выбор числа отображаемых кнопок (другие будут скрыты за ссылкой).

Кодировка сайта – выбор кодировки вашего сайта.

Добавить иконку сайта Share42.com – возможно, следует убрать галочку.

Показывать счетчики – включение счетчика нажатий по кнопкам (только при работающем jQuery).

Установка данного скрипта довольно сложная, но она пошагово описывается на самом сайте Share42.

3. Как устанавливать кнопки на сайт

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

Первую часть кода нужно добавить между тегами и . Для этого зайдите в админ-панель WordPress и перейдите к редактору шаблона.

В редакторе шаблона нужно найти файл «Заголовок» (header. php) , если такого нет, тогда – «Основной шаблон» (index.php) . Теперь необходимо найти тег или . Если в указанных файлах таких тегов нет (все темы разные, такое вполне может быть), тогда вам придется открывать для редактирования все файлы и искать в каждом из них тег . Для поиска можно использовать сочетание клавиш «Ctrl+F».

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

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

Чаще всего кнопки добавляются перед статьей или в ее конце. Проще, конечно, второй вариант. Его мы и рассмотрим.

Вам нужно найти то место, где заканчивается статья (основная текстовая часть страницы). Для этого нужно редактировать файл «Одна запись» (single. php) .

Теперь нужно найти тот оператор, который отвечает за вывод основного содержимого статьи. В моем случае это «the_content», сразу после него и размещается код кнопок.

Аналогично можно размещать код вначале статьи, нужно только найти место между заголовком и текстом статьи.