Избавляемся от JavaScript в социальных кнопках (Facebook, VK, Twitter и др.). Как сделать ссылку вконтакте в виде кнопки Кнопка социальной сети вконтакте

Каждый блоггер стремится к эффективному продвижению своего сайта с помощью и применяет всевозможные инструменты для этого. А как сделать кнопку Вконтакте? Чтобы добавить её на блог следует зарегистрировать аккаунт на сервисе vk.com (правда людей, не имеющих здесь своей странички, осталось считанные единицы;)). Читайте также статью, . Именно из-за огромной популярности данного сервиса размещение такой приятной функции способно привлечь немало посетителей на площадку.

Как добавить кнопку Мне нравится Вконтакте на свой сайт?

1. Для начала требуется войти в свой аккаунт в системе.

3. Теперь выбираем Подключить новый сайт и заполняем ниже все строки:
– Название сайта: указываете название своего блога или сайта.
– Адрес сайта: прописываете адрес проекта.
– Основной домен сайта: вносится автоматически после заполнения адреса.
Кликнете на Сохранить .

5. После переходим к дизайну кнопки: я выбрал Кнопка с миниатюрным счетчиком высотой 22 px и в названии указал Мне нравится (второй вариант Мне интересно показался неинтересным:smile:). Данная высота со счетчиком идеально сочетается с уже добавленными кнопочками других социальных сетей на сайте. В самом низу таблицы будет автоматически отображаться вид нашей кнопочки при внесении каких-либо изменений:

6. Сейчас необходимо скопировать предоставленный код и вставить его в блог. Итак, копируем первую часть:

Вот так она выглядит:

of your page –> VK.init({apiId: 3144046, onlyWidgets: true});

7. Теперь код нужно вставить после тега . Если у вас WordPress, то в админке стоит перейти во вкладку Дизайн/Редактор , выбрать файл header.php и добавить скопированный код:

8. Идем обратно на открытую веб-страницу сайта vk.com и копируем оставшуюся вторую часть:

Я разместил сразу же за кодом от кнопки Твиттера.

Как мы избавились от JavaScript-библиотек социальных сетей, ускорили скорость загрузки страниц и использовали RESTful API для “шаринга” и “лайков”.

Почему HTML и только? Все кнопи “шаринга” и “лайков” предлагаемые от Twitter, Google+, LinkedIn, vk.com, Facebook обязывают нас внедрять в проекты их собственный JavaScript-код, каждый подключенный скрипт выполняет запросы и подгружает дополнительные файлы со сторонних серверов, каждый запрос «на сторону» замедляет скорость загрузки страницы и увеличивает нагрузку на устройство пользователя. Пользователь вынужден ждать пока будут закончены такие процессы как DNS-lookup, HTTP-запрос, затем ответ включающий в себя сам скрипт, стили и изображения используемые в кнопке.
Далее следует процесс проверки пользователя на предмет авторизации в социальной сети, парсинг пришедшей информации, перестраивание DOM’а и отрисовка новых элементов. После того как все необходимые процессы для появления самой кнопки - окончены, погруженный скрипт продолжает работать, устанавливает third-party cookies, следит за пользователем, его действиями и предпочтениями (вот откуда социальные сети показывают нам “правильную” рекламу).
Другой момент - все “шаринг/лайк”-кнопки находятся вне нашего контроля, как их поведение, так и стили на странице.
Мы решили использовать RESTful API (он же HTTP GET) и связку Twitter Bootstrap 3 + Font Awesome для имплементации кнопок “шаринга” и “лайков” от всех популярных социальных сетей. Данный подход применим к любому открытому REST-функционалу не требующему авторизации приложения, любой социальной сети.Подготовка Подключаем TWBS3 и FA. Находим цвета брендов социальных сетей и пишем CSS-стили для них. Для Google+ и Surfingbird создаем дополнительные стили, помещающие логотип в кнопку “правильным” образом. Стили:

Код дополнительных CSS-стилей

i.fb, span.fb{ color: #3b5998; } i.tw, span.tw{ color: #00aced; } i.google, span.google{ color: #dd4b39; } i.linkin, span.linkin{ color: #007bb6; } i.vk, span.vk{ color: #45668e; } i.pinterest,span.pinterest{color: #cb2027;} i.surfingbird{ max-height: 12px; min-width: 25%; } i.surfingbird::before{ content: url(http://bootstrap-ru.com/cdn/i/surf.png); position: relative; left:0px; top: -7px; float: left; } .google-plus-one{ overflow: hidden; position: relative; } .google-plus-one i{ position: absolute; left: -4px; bottom: -5px; } .google-plus-one span{ font-size: 16px; font-weight: 900; line-height: 10px; margin-left: 15px; } .btn-sm.google-plus-one span{ font-size: 14px; } .btn-sm.google-plus-one i{ bottom: -3px; } .btn-lg.google-plus-one span{ font-size: 20px; margin-left: 18px; } .btn-lg.google-plus-one i{ bottom: -5px; } .btn-xs.google-plus-one span{ font-size: 12px;} .btn-xs.google-plus-one i{ bottom: -7px; }

Финальный код кнопок объединенных в.btn-group

Share: 1

Пример с полным набором работающих кнопок есть на

ВК, Facebook и Twitter

Как добавить кнопки ВК, Facebook и Twitter в WordPress? Инструкция по установке дополнительных кнопок добавления статей в социальные сети - Вконтакте, Facebook и Twitter.

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

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

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

В моем случае получился следующий код:

tweetmeme_style = "compact"; tweetmeme_source = "bankomet"; tweetmeme_service = "bit.ly";

tweetmeme_style = ‘compact’;
tweetmeme_source = ‘bankomet’;
tweetmeme_service = ‘bit.ly’;

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

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

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

Tweet

Tweet

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

Идем дальше, кнопка номер 3 - Like (мне нравится) от Facebook . Тут у меня осталось парочку вопросов, на которые толковых ответов я, увы, не нашел, но таки заставил эту кнопку работать как надо. Во-первых, для ее добавления в блог можно использовать следующий код:

Здесь я указал вариант, который у меня работает, но нет гарантии, что у вас тоже получится. Если возникнут ошибки - вперед на страницу разработчика плагина с вопросами. Интересно также то, что кнопку Вконтакте VK Share Button можно добавлять в тело любого поста - допустим, если вы хотите отметить только одну из статей.

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

За информацию спасибо: http://wordpressinside.ru

Здравствуйте, уважаемые читатели блога сайт! Продолжаем изучение соцсетей как объектов SMO и CMM продвижения. Сейчас на очереди серия статей, в которых я постараюсь раскрыть все подробности установки кнопок социальных сетей. Прошлый материал был посвящен тому, как добавить от и Facebook ( о регистрации и основных настройках, а о Моей странице в Фейсбуке подробнейшие сведения).

Сегодня же поговорим о кнопках от Твиттера, ВКонтакте и остальных крупнейших социалок. Причем, как я уже упоминал, в статье о social buttons Гугл плюс и Фейсбука, ссылка на которую дана чуть выше по тексту, кнопки можно установить двумя способами. Во-первых, получив код при помощи конструктора, который имеется в распоряжении всех популярных сервисов. Во-вторых, создав социальные кнопки самостоятельно. И тот, и другой метод имеет свои плюсы и минусы, поэтому рассмотрим оба.

Получение кода и установка кнопки от ВКонтакте и от сервиса микроблоггинга Твиттер

А теперь непосредственно переходим к получению кнопки для расшаривания от Твитера. Для этого нужно оказаться на и произвести соответствующие настройки:

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

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

Твитнуть

Только не забудьте прописать для тега A, который определяет ссылку в HTML, атрибут rel=“nofollow” с тем, чтобы не допустить утечки веса страницы. И обязательно замените значение атрибута data-via, поставив свое имя пользователя в Твиттере, проще говоря, свой логин, который используете для авторизации в этой социалке.

Для оптимизации скорости загрузки страницы вашего сайта эту первую часть нужно вставить на то место, где бы вы хотели видеть социальную кнопку от Twitter. Если после каждой публикации, то открываете шаблон SINGLE.PHP (для большинства тем WordPress) и находите такую строку:

Вставляете первую часть после этого фрагмента PHP кода, который отвечает за вывод постов. Обращаю ваше внимание на то, что названия шаблонов, где присутствует данная функция, могут быть разными, однако в большинстве из них присутствует составляющая SINGLE. Поскольку обычно кнопки соцсетей располагают для удобства в одном месте в одну строку, то ниже я приведу скриншот шаблона SINGLE.PHP, где у меня находится блок кнопочек. Вторая часть (скрипт):

!function(d,s,id){var js,fjs=d.getElementsByTagName(s),p=/^http:/.test(d.location)?"http":"https";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document, "script", "twitter-wjs");

остается неизменной и вставляется для ускорения загрузки страницы обычно перед закрывающим тегом BODY в шаблон FOOTER.PHP. Опять же, чуть ниже увидите соответствующую картинку.

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

Здесь, по-моему, совсем и всем все понятно. Настройки стандартной кнопки даны по умолчанию. Вы можете, в зависимости от своих пристрастий, поменять форму button, отказаться от скругления углов, а также ввести любой текст, который будет отображаться на кнопке (по умолчанию - «Сохранить»).

Первую часть полученного кода (выделена красным) рекомендуется вставить между открывающим и закрывающим тегами HEAD. Для обычной следует открыть файл HEADER.PHP и (можно перед закрывающим тегом) вставить этот фрагмент:

Снова приведу пример для наглядности (замечу, что скрипт можно поместить и перед закрывающим BODY, как в других случаях, но для разнообразия надо рассмотреть и этот вариант):

Ну, а второй фрагмент опять же помещаете туда, где хотите видеть кнопку. Для динамических страниц блога Вордпресс это шаблон SINGLE. Повторюсь, что возможны исключения, об этом я подробно писал в материале о получении кнопочек от Гугл+ и Фейсбука, ссылка на этот пост в самом начале публикации. Кстати, как и обещал, начинаем разбирать действия, которые помогут понять до конца не только алгоритм вставки необходимых кодов, но и настройку кнопок для их адаптации к дизайну вашего сайта.

Определение свойств CSS для блока кнопок (на примере Google plus, Facebook, Twitter, VKontakte)

Итак, надеюсь, вы поняли, как и куда вставлять полученные коды для кнопок соцсетей. Для закрепления, как и обещал приведу пример, как размещены части кодов четырех кнопок самых популярных социальных сетей у меня на блоге. Для начала скриптовые части кодов кнопок в шаблоне FOOTER (для VKontakte, по рекомендации, если помните, мы поместили скрипт между тегами HEAD, обратите внимание на скриншот выше):

А вот участки, отвечающие собственно за месторасположение социальных кнопочек (SINGLE.PHP):

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

#twitter, #fb, #google{float:left;margin-left:50px;margin-top:15px;} #vk{float:left;margin-right:30px;margin-left:40px;margin-top:15px;}

Попробуйте скопировать предложенный мной вариант и вставить в файл style.css своей темы WordPress (можно в самый конец, чтобы не путаться). Уверен, что многим такие стили окажутся подходящими. Если же в какой-то теме кнопки будут выглядеть некорректно, можно поиграть с числовыми значениями каждого из свойств. Если это покажется вам непосильной задачей, обратитесь к разделу блога , в котором познаете основы каскадных таблиц стилей. Вот как после этого примерно будет выглядеть набор кнопочек:

Официальные кнопки от сайтов Одноклассники и Surfingbird

На примере четырех популярных в рунете и в мире социальных сервисов (Твиттер и ВКонтакте довольно подробно рассмотрены в этой статье, а Гугл+ и Фейсбук в предыдущей) мы разобрали алгоритм вставки кодов кнопочек на сайт Вордпресс. Теперь быстро пробежимся по остальным важнейшим сетям, пользователями которых вполне вероятно могут оказаться ваши читатели.

Думаю, вы уже на автомате сориентируетесь, куда вставить первый отрывок (выделенный зеленым):

а куда скриптовый фрагмент:

!function (d, id, did, st) { var js = d.createElement("script"); js.src = "http://connect.ok.ru/connect.js"; js.onload = js.onreadystatechange = function () { if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") { if (!this.executed) { this.executed = true; setTimeout(function () { OK.CONNECT.insertShareWidget(id,did,st); }, 0); } }}; d.documentElement.appendChild(js); }(document,"ok_shareWidget",document.URL,"{width:145,height:30,st:"rounded",sz:20,ck:1}");

Возможно, кто-то захочет установить Share Button от сервиса Surfingbird. В таком случае настроить получение кода можно на его официальной странице :

Ежели желаете получить кнопку со счетчиком, вверху нажимаете «With counters». В конструкторе выбираете понравившуюся кнопку, просто щелкнув по ней. В результате снова получаем два куска code. Скрипт (выделен красным):

снова размещаем перед закрывающим BODY, а непосредственно кнопку (предварительно прописав nofollow):

Share

В нужное место страницы.

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

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

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

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

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

Название_сайта/wp-content/themes/название_темы/img/

Еще одно преимущество самостоятельного создания картинок для кнопочек состоит в том, что подгрузка каждый раз происходит не со стороннего ресурса, а прямо с сервера вашего хостинга, это тоже уменьшает скорость загрузки. Для наглядности предлагаю скриншот с расположением папки IMG в иерархии директорий сайта:

Только обязательно обратите внимание на то, какое название имеет папка с изображениями (для некоторых тем она называется IMAGES). Впрочем, для social buttons вы можете создать свою папку, только нужно будет прописать для нее правильный путь. Ниже даю коды для каждого из сервисов при создании своих соцкнопок на сайте WordPress.

Как я уже сказал, атрибут REl=“NOFOLLOW” предназначен для того, чтобы закрыть от индексации поисковыми системами ссылку, а атрибут TARGET=“_BLANK” я проставил, чтобы обеспечить открытие Контакта в другой вкладке, это очень удобно для пользователей, поскольку страница сайта остается открытой.

Однако, с помощью атрибута ONCLICK для тега A, в качестве значения которого используется функция WINDOW.OPEN() от JAVASCRIPT можно сделать так, что будет открываться не новая вкладка, а именно новое окно добавления анонса статьи, причем можно прописать для него фиксированные размеры с помощью атрибутов WIDTH (600) и HEIGHT (400):

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

Твиттер :

Фейсбук :

Я.ру :

Livejourrnal :

&subject=" >