Увеличиваем посещаемость блога с помощью кнопок социальных сервисов

Автор Cherrygarden, дата публикации 27.07.2012 | Обсудить (4)

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

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

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

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

Как добавить кнопки социальных сетей в свой блог на WordPress?

Код делится на 2 части. Первая часть добавляется в header.php до закрывающего тега </head> Чтобы внести изменения пройдите по следующему пути (Wp-admin (Консоль)>>Внешний вид>>Редактор>>header.php)

Примечание. В header.php добавляются коды, в моем случае, только социальных сетей Вконтакте и Google+. Добавление кодов Facebook и Twitter'а не требуется.

<!-- кнопка рекомендации Vk -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?20"></script>
<script type="text/javascript">
	VK.init({apiId: Ваш_ID_прложения_VK, onlyWidgets: true});
</script>
<!-- кнопка Google plus one -->	
<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/plusone.js';
    	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  	})();
</script>

В верхнем коде замените Ваш_ID_прложения_VK(цифры), который можно получить по ссылке http://vk.com/editapp?act=create

Вторая часть добавляется в single.php сразу после <?php the_content(); ?> (Wp-admin (Консоль)>>Внешний вид>>Редактор>>single.php)

<strong>Порекомендовать статью друзьям</strong>
<table width="580px" border="0"><tbody><tr>
	<td><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-related="americanhost" data-lang="ru">Твитнуть</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></td>
	<td><div id="fb-root"></div><script src="http://connect.facebook.net/ru_RU/all.js#appId=Ваш_ID_Fb&xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="145" show_faces="false" font="arial"></fb:like></td>
	<td><g:plusone size="medium" annotation="inline" width="145"></g:plusone></td>
	<td><div id="vk_like"></div><script type="text/javascript">VK.Widgets.Like("vk_like", {type: "mini"});</script></td></tr></tbody>
</table>

Здесь можете заменить текст "Порекомендовать статью друзьям" и значение table width, чтобы блок с кнопками хорошо вписывался в конце вашей страницы, и обязательно замените americanhost на ваш ник в Твиттере и Ваш_ID_Fb, который можете получить по ссылке https://developers.facebook.com/apps

Примечание. Чтобы посетители могли делиться статическими страницами, добавьте верхний код в файл page.php (Wp-admin (Консоль)>>Внешний вид>>Редактор>>page.php)

Как добиться максимального отклика от рекомендаций ваших посетителей?

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

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

Чтобы помочь роботу Facebook или Вконтакте, мы добавим код с тегами open graph в head нашей страницы. Для этого откройте файл function.php вашей темы и в самом конце перед последним тегом ?> (Wp-admin (Консоль)>>Внешний вид>>Редактор>>function.php) добавьте следующий код.

//Добавляем Open Graph в атрибуты языка
function add_opengraph_doctype( $output ) {
		return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
	}
add_filter('language_attributes', 'add_opengraph_doctype');
//Добавляем Open Graph Meta информацию
function insert_fb_in_head() {
	global $post;
	if ( !is_singular()) //if it is not a post or a page
		return;
        echo '<meta property="fb:admins" content="229331937086831"/>';
	echo '<meta property="vk:app_id" content="2037402" />';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Американский хостинг: Плюсы и Минусы"/>';
	if(!has_post_thumbnail( $post->ID )) { //у статей, которые не имеют выбранные изображения, будет добавляться изображение по умолчанию
		$default_image="http://americanhost.ru/wp-content/uploads/americanhost-ru.jpg"; //добавьте изображение по умолчанию на ваш сервер
		echo '<meta property="og:image" content="' . $default_image . '"/>';
	}
	else{
		$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	}
	echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Здесь вам надо изменить цифровые значения в тегах fb:admins и vk:app_id, на значения, которые мы получили в предыдущей главе. Так же измените название вашего сайта внутри тега og:site_name.

Теперь обратите внимание, что в этом коде присутствует изображение по умолчанию, ссылка на которое лежит внутри тега $default_image. Это изображение добавляется, если у вас в статье отсутствует миниатюра записи. Данный код как раз для меня актуален, потому на этом блоге установлена старая тема и миниатюры создаются с помощью скрипта (timthumb.php). Из-за чего, при нажатии на кнопку "Мне нравится", в новость в социальной сети не добавлялось изображение или добавлялось совершенно другая картинка из правой колонки.

После проделанных операций, рекомендации моих статей, которые раньше были без изображений теперь выглядят в социальных сетях вот так:

Рекомендации моих статей в социальных сетях Facebook, Google+ и Вконтакте соответственно.

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

У вас, наверно, возник вопрос, как сделать изображение по умолчанию, которое будет привлекать внимание?

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

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

Откройте шаблон в Photoshop, скройте ненужные слои, измените текстовые слои на желаемый вами текст. Затем сохраните полученное изображение для веб и загрузите на ваш сервер. И самое главное внесите изменения в строчку $default_image в файле function.php.

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

На сладкое сегодня видео, которое за 5 дней набрало уже больше 3 000 000 просмотров.

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

Популярные обзоры хостинга

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

HostGator хостинг Bluehost хостинг Fatcow хостинг Webhostingpad хостинг iPage хостинг

Поделитесь статьей с друзьями или сохраните в закладки

twitter.com facebook.com vkontakte.ru odnoklassniki.ru mail.ru ya.ru blogger.com liveinternet.ru livejournal.ru memori.ru google.com bobrdobr.ru mister-wong.ru yandex.ru