Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Социальные сети набирают силу и популярность, поэтому никак нельзя пренебрегать возможностью задействовать этот аспект в раскрутке своего проекта (SMO и SMM продвижение). Рассмотрим, как установить социальные кнопки для сайта, созданного на движке WP. С их помощью у вас и ваших читателей будет возможность поделиться интересным материалом с друзьями, опубликовав его анонс в одной или нескольких соцсетях одним кликом.
Необходимо иметь ввиду то, что есть два основных варианта установки кнопки «Поделиться» на сайт. Первый позволяет воспользоваться специальными конструкторами, находящимися в арсенале всех популярных сетей и позволяющими на выходе получить готовый код, который необходимо вставить в соответствующие шаблоны вашей темы.
Этот вариант предусматривает содержание исполнительных скриптов, которые обеспечивают интерактивность и позволяют получить статистику кликов, являющуюся очень важной информативной составляющей. Зато скрипты могут серьезно замедлить скорость сайта.
Внимание! Meta признана экстремистской организацией, поэтому ее деятельность запрещена на территории России. Запрет распространяется на Facebook и Instagram.
Второй способ — это конструирование своих кнопок социальных сетей для сайта. Последний метод является более гибким, поскольку позволяет создать абсолютно любой дизайн, что является недоступным в случае использования первого варианта. К тому же в этом случае не требуется скриптов, которые отрицательно влияют на скорость загрузки страниц вебресурса.
Но и повозится с установкой придется подольше, особенно, по сравнению с популярными конструкторами (такими как UpToLike, Share42, GoodShare, Pluso), которые предлагают сразу целый блок социальных кнопок сразу. В общем, и первый, и второй способ обладают своими плюсами и минусами. Поэтому в этой и последующих публикациях рассмотрим оба.
Код кнопки +1 от социального сервиса Google plus и его вставка на сайт Вордпресс
Начнем, пожалуй, с установки кнопки +1 от социальной сети Google plus, которая сейчас достигла невероятного успеха в деле привлечения пользователей, в том числе благодаря грамотному менеджменту. Получить социальную кнопку от Гугла можно на странице конструктора:
Выбираете размер (small — маленькая, medium — средняя, standart — стандартная, tall — высокая), выбираете из меню тип примечания, которое будет отображаться рядом с button (встроенное, всплывающее) либо отсутствие оного. Отмечу, что при выборе встроенного текста нужно отметить его расположение (по умолчанию будет стоять 300).
В расширенных настройках конструктора Google+ для увеличения продуктивности работы скрипта и оптимизации скорости загрузки страниц рекомендуется выбрать асинхронный код, который уже определен по дефолту. После выбора настроек справа вы получите фрагмент кода, который нужно будет вставить на свой сайт, вместе с предварительным показом.
Полученный код разделен на две части, первую из которых (обведенную зеленой рамкой) необходимо вставить в то место, где вы бы желали видеть button. Для сайта на WordPress социальные кнопочки наиболее продуктивны, по крайней мере, по моему мнению, когда они расположены внизу на странице статей. Посетитель сайта прочтет материал и тут же сможет дать ему социальную оценку, отметив и поделившись с друзьями.
За вывод статей в Вордпресс обычно отвечает шаблон SINGLE.PHP (проштудируйте мануал Темы WordPress и их устройство, получите ясность по многим вопросам). Там нужно найти строчку:
<?php the_content(); ?>
Она и определяет отображение записей. Однако, файл, в котором содержится этот кусок, может иметь другое название. Например, в стандартных вордпрессовских темах:
- Twentyten — это LOOP-SINGLE;
- Twentyeleven — CONTENT-SINGLE
- Twentythirteen — CONTENT
- Twentytwelve и Twentyforteen — CONTENT-PAGE
Итак, внедряем верхнюю часть кода:
<!-- Поместите этот тег туда, где должна отображаться кнопка +1. --> <div class="g-plusone"></div>
Сразу под выше указанной строкой. В этом случае button будет выводится внизу каждой написанной вами в блог статьи. А вторую часть (скрипт) полученного фрагмента рекомендуется поместить после последнего тега виджета, коим является первая часть кода (ведь кнопок может быть несколько на одной странице сайта). Я, например, расположил участок скрипта непосредственно перед закрывающим тегом BODY в файле FOOTER.PHP:
Привожу нижнюю часть полученного участка code script, который вы можете сразу скопировать, если приведенный вариант кнопки +1 вас полностью устраивает:
<!-- Поместите этот тег за последним тегом виджета кнопка +1. -->
<script type="text/javascript">
window.___gcfg = {lang: 'ru'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script> Вот все варианты кнопочек Google+, предлагаемые конструктором. Естественно, для каждой из них будет сгенерирован свой код:
Таковы стандартные действия по установке +1 от Google+. Если вы хотите более глубоко вникнуть в суть данного вопроса, то там же, на странице конструктора дана более подробная информация, в том числе о настройках конфигурации, то есть о получении целевого URL, параметрах тега SCRIPT, атрибутах тега +1, заполнении +сниппета и т.д.
Кнопки «Нравится» и «Поделиться» от Facebook, какова разница между ними
Теперь переходим к получению кода от крупнейшей в мире социальной сети Facebook (читайте также о Моей странице в Фейсбуке). Тем более, тут есть множество нюансов, о которых я постараюсь подробно рассказать. Прежде всего, хочу отметить разность, существующую между социальными кнопками «Нравится» (Like Button) и «Поделиться» (Share Button).
Первая из них позволяет лишь отметить понравившуюся статью сайта лайком, а вот вторая дает возможность еще и добавить анонс материала в новостную ленту социальной сети Facebook, поделившись со своими друзьями. Итак, переходим на страницу генерации Social Buttons в раздел «Like Button»:
На ниже следующем скриншоте показаны настройки конструктора от Facebook, с помощью которых можно определить вид будущей социальной кнопки «Нравится»:
Интерфейс сервиса пока на английском, поэтому необходимы некоторые пояснения:
В графу «URL to Like» вписывается адрес вебстраницы сайта, для которой пользователи будут проставлять лайки. Но здесь есть тонкость. Если вы будете устанавливать кнопку Like для записей (постов) сайта, то можно просто удалить адрес страницы:
https://developers.facebook.com/docs/plugins/
который дан в качестве образца. Объяснения дам чуточку ниже. Если же вы планируете добавлять социальные кнопки также на страницы с анонсами статей (например, главная и вебстраницы категорий), то обязательно оставьте этот URL, в дальнейшем его нужно будет заменить на нужную функцию. В общем, для примера я оставлю предлагаемый Фейсбуком адрес своей вэбстраницы, так будет нагляднее и понятнее при рассмотрении различных вариантов.
«Layout» — здесь из выпадающего меню выбираете подходящую форму будущей социальной кнопки (standart — стандартная, box_count — со счетчиком, который будет расположен вверху, button_count — со счетчиком, расположенным справа, button — кнопка без счетчика).
«Width» — ширина в пикселях, в пределах которой будет располагаться информация, если выберете стандартный вариант. Например, если поставите значение «30», то button примет такой вид:
При увеличении атрибута Width в десять раз изменится таким образом:
Action Type — в выпадающем меню выбираете надпись, которая будет красоваться (recommend — рекомендую, like — нравится). Функциональность кнопочки Facebook при этом не изменится. Просто для различных ресурсов подходит либо одна, либо другая, мелочей здесь быть не может.
Show Friends’ Faces — дословно переводится как «показывать лица друзей». То есть, если отметить эту опцию, то рядом при просмотре лайков будут отображаться фото или аватарки тех пользователей, кто отметил данную запись.
Include Share Button — если поставить галочку напротив этой опции, то вдобавок к кнопочке Нравится рядом будет расположена кнопка Поделиться:
После того, как произведете все настройки, нажмите «Get Code» для получения результата:
Как видите, code предлагается в различных форматах. Для стандартного блога Вордпресс подойдет использование в «HTML5» и «IFRAME». Начнем с первого. Сначала скопируйте для удобства верхнюю часть (script), которая обведена красным на скриншоте вверху:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> Затем вставьте этот фрагмент в шаблон FOOTER перед закрывающим тегом BODY по примеру того, как это было описано чуть выше при установке Гугл +1. В нижней части в качестве значения атрибута data-href (на картинке подчеркнут зеленым) вместо URL фейсбуковcкого сайта, который определяет конкретную страницу для отметок пользователями, нужно прописать такую функцию:
<?php the_permalink(); ?>
Этот PHP код определяет запись, для которой предназначено функционирование данной Like Button от Facebook на сайте. Итак, после редактирования нижний фрагмент готов для использования (скопируйте его):
<div class="fb-like" <?php the_permalink(); ?> data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
Теперь этот кусок нужно внедрить в то место, где бы вы хотели видеть Facebook Button. При стандартном размещении опять же открываем шаблон, выводящий записи (SINGLE, CONTENT-SINGLE и т.д. в зависимости от темы) и вставляем его под строкой:
<?php the_content(); ?>
если желаете получить кнопку в нижней половине вебстраницы (после поста). Ежели хотите расположить button в верхней части, то прописываете code над этой строчкой. Более точное расположение вам придется поискать самим методом пробы, потому как темы у всех разные. Однако, возможно, вам захочется разместить кнопочку от Facebook еще и на вебстраницах, где выводятся краткие анонсы постов (например, главная или вэбстраницы категорий).
Для разнообразия и более четкого понимания продемонстрирую это на примере фрейма. Для этого открываете вкладку «IFRAME», где находится соответствующий участок (использование такого метода позволит разместить кнопочки без лишних телодвижений):
Копируете code и заменяете в нем значение атрибута href (подчеркнуто красным) на функцию:
<?php the_permalink(); ?>
Получаете следующую фреймовую структуру (можно скопировать):
<iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>;width&layout=button_count&action=like&show_faces=true&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
Этот кусок кода необходимо внедрить на то самое место, где будет располагаться Like Button. Для примера поместим Like на стандартную главную страницу блога WordPress. Открываем шаблон INDEX.PHP и вставляем код чуть выше строки, обозначающей функцию вывода анонсов статей:
<?php the_content('Читать далее'); ?> Точное местоположение, как я отметил чуть выше, вы должны по наитию определить сами, так как темы у всех различные и общую рекомендацию дать сложно. Для моего блога это будет выглядеть так:
Теперь для каждой записи на главной странице в самом начале будет расположена Лайк Баттон:
Причем, обратите внимание, что для каждого поста будет свое количество отмеченных лайков (конечно, могут быть и совпадения, если число проголосовавших будет одинаковым для двух или более статей). Кроме этого, с помощью IFRAME Like Buttons легко вписались в дизайн. Для проверки корректной работы щелкните по какой-нибудь социальной кнопке, соответствующей определенному анонсу, количество лайков должно увеличиться на 1.
В принципе, точно также на главной и страницах категорий для размещения Like Button можно использовать и метод «HTML5», вставив скрипт непосредственно перед перед закрывающим тегом BODY в шаблоне FOOTER, а другую часть кода поместив на нужное место (например, туда же, куда вставляли его в случае с IFRAME). Конечно, это еще далеко не все. Для корректного и красивого отображения buttons от Facebook необходимо еще прописать соответствующие свойства CSS.
Обычно на странице находится не одна, а несколько кнопочек популярных соцсетей, поэтому такая группа помещается в контейнер DIV, для которого определяется свой класс с заданными ему свойствами. Но об этом поговорим, когда речь зайдет о социальных кнопках от Twitter, ВКонтакте и других популярных сетей. Я расскажу, как правильно все это проделать, чтобы их аляповатый вид не отпугивал посетителей вашего сайта.
Далее рассмотрим получение кнопки «Поделиться» (Share Button) от генератора Facebook. Здесь все немного проще, поскольку для блога WordPress код доступен только в формате HTML5. Переходим во вкладку «Share Button» и настраиваем конструктор:
Точно также выбираете из выпадающего списка тип кнопки и нажимаете «Get Code». Получаете результат:
Я уже сказал выше что для ресурса на Вордпресс фреймовая структура в этом случае будет недоступна, поэтому используем вкладку «HTML5». Дальнейшие действия полностью идентичны тем, которые я описывал для Like. Скрипт (верхнюю часть) помещаете в футер перед закрывающим тегом BODY, а нижнюю часть, предварительно заменив значение data-href на нужную функцию, вставляете туда, где пожелаете лицезреть Share Button. Вот готовый код для вставки:
<div class="fb-share-button" data-href=<?php the_permalink(); ?> data-type="button_count"></div>
Еще раз я бы обратил ваше внимание на то, что функционалы «Нравится» и «Поделиться» различны. Первая позволяет пользователям лишь лайком отметить ваш материал, а вторая дает возможность опубликовать его на своей стене в Фейсбуке, поделившись со своими друзьями.
Возможно также комплексное использование обеих buttons, о чем я упоминал выше. Вполне вероятно, некоторые детали в этом мануале прописаны слишком подробно, но мне хотелось, чтобы начинающие вебмастера поглубже поняли алгоритм действия такого важного инструмента для продвижения как кнопочки социальных сетей.
