Кнопки социальных сетей - Поделиться в Twitter, Facebook, ВКонтакте ~ SEO простым языком

Кнопки социальных сетей — Поделиться в Twitter, Facebook, ВКонтакте

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

У многих в блогах есть кнопка-счетчик Twitter (или Tweetmeme), которая отображает количество ретвитов, многие уже поставили себе похожую кнопку Like от Facebook.

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

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

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

Прежде всего, давайте определимся, какие именно кнопки вы хотите разместить в этом месте. Здесь в статье я приведу код только тех кнопок, которые у меня. Это кнопка добавления в Twitter, кнопка Facebook, и пока решила разместить Google Buzz. Хоть этот сервис не особо популярен в русскоязычном интернете, я решила пока его оставить. Я выбрала такие кнопки, которые имеют в себе подсчет пользователей, поделившихся ссылкой на блог. Все эти кнопки имеют более мене одинаковый размер и квадратно-прямоугольный вид.

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

Местоположение моего блока кнопок полностью решается с помощью CSS. Для этого нам необходимо в шаблон нашего блога, перед строкой
]]></b:skin>
вставить этот код

#sharebox {
background-color:#FFFFFF;
border:1px solid #C1CDCD;
left:103px;
top:170px;
margin-top:10px;
position:fixed;
width:64px;
}
#sharebox .float {
margin:7px;
}

А для вставки кода кнопок, необходимо найти этот код в шаблоне, предварительно установив галочку на «расширить шаблоны виджетов»:
<div class=’post-header’>
и сразу после него вставить этот код:

<b:if cond=’data:blog.pageType == "item"’>
<div id=’sharebox’>
<div class=’float’><script type=’text/javascript’>
tweetmeme_url = '<data:post.url/>';
</script>
<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’> </script></div>
<div class=’float’><script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/><fb:like font=’verdana’ layout=’box_count’ width=’64’/></div>
<div class=’float’><a class=’google-buzz-button’ data-button-style=’normal-count’ href=’http://www.google.com/buzz/post’ title=’Post on Google Buzz’/>
<script src=’http://www.google.com/buzz/api/button.js’ type=’text/javascript’/></div>
</div>
</b:if>

В принципе, на этом можно и закончить. Кнопки полностью готовы к использованию.

Еще по теме Правила юзабилити сайта или как создать идеальный сайт

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

Для начала, вот код, который является неким каркасом, в который мы можем поместить код любых кнопок

<b:if cond=’data:blog.pageType == "item"’>
<div id=’sharebox’>
<div class=’float’>В этом месте должен располагаться код кнопки 1</div>
<div class=’float’>В этом месте должен располагаться код кнопки 2</div>
</div>
</b:if>

Если необходимо поместить больше кнопок, то копируется код

<div class=’float’>В этом месте должен располагаться код кнопки</div>

ровно столько раз, сколько вы хотите всего иметь кнопок.

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

Теперь вернемся к CSS коду, к внешнему виду бокса, в котором находятся кнопки.

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

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

#sharebox {
background-color:#FFFFFF;
border:1px solid #C1CDCD;
left:100px;
top:170px;
margin-top:10px;
position:fixed;
width:64px;
}

Эта строка

background-color:#FFFFFF;

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

border:1px solid #C1CDCD;

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

Следующая строка

left:100px;

[ads1]

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

top:170px;

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

width:64px;

Это значение задает ширину всего бокса. Если вы решите использовать более мелкие кнопки, без подсчета пользователей, тогда это значение можно уменьшить.
Если у вас возникнут какие-то вопросы, то рекомендую обратиться к моим статьям:
Как удалить внешние ссылки из шаблонов Blogspot Blogger, в этой статье рассказывается о расширении для браузера, с помощью которого удобно экспериментировать с шаблоном, не меняя сам шаблон.
Инструменты вебмастера (блоггера) — даны ссылки на ресурсы, где можно подробнее почитать про CSS.
На этом все, дорогие мои читатели. До скорых встреч.

Екатерина Михайлова

Next Раскрутка сайта в поисковых системах Яндекс vs Google »

Previous « Анализ поисковой выдачи

View Comments

Kladez-zolota says:

at

Извини, но куда вставлять не поняла, там ведь шаблонов куча.
SEO-Дилетант'ка says:

at

У нас с вами разные платформы у блогов:)
Вам стоит поискать кнопки социальных сетей для WordPress, или подождать, я как-нибудь опубликую статью и об этом, но когда, пока не могу сказать.
Den says:

at

Спасибо за информацию, установил, работает)
elfaimer says:

at

Кнопки смотрятся красиво, но идея их размещения над текстом поста мне кажется не самой удачной, отвлекает и мешает полному обзору страницы. Приходится все время прокручивать вверх-вниз. Лучшим вариантом, я думаю, было бы прилепить этот блок к краю экрана. За информацию спасибо.
SEO-Дилетант'ка says:

at

Спасибо вам. Я рада, что все установилось без проблем:)
SEO-Дилетант'ка says:

at

Дело в том, что у этого способа есть один минус, который вылетел из моей головы:) Надо было проверить, но я так хотела такие кнопки, что напроч об этом забыла.
Кнопки начинают заходить на текст в том случае, если разрешение монитора меньше, чем 1152*864 (из тех вариантов, где я могу проверить).
Сейчас я максимально прижала кнопки к левому краю, но на текст все равно немного заходит, если разрешение 1024 или меньше. Если будет много недовольных читателей, уберу кнопки.
Эх... а они мне так нравятся.
Попробую их доработать.
Oleg says:

at

http://browsershots.org - сервис для создания скриншотов с разных браузеров с разным разрешением. Можно посмотреть как выглядит блог со стороны. (ток подождать надо мин 5- 10 пока приготовятся)
SEO-Дилетант'ка says:

at

Спасибо Oleg, я пользуюсь.
Kuzuxa says:

at

Катя если честно только без обид моё мнение,как пользователя и читателя на многих блогах эти кнопки мне часто мешают читать статью,потому что бывает они закрывает буквы в начале и вообще просто отвлекают от чтения,тем что ёрзают вниз вверх при прокрутке. Это лично моё мнение.У себя на блогах скорее всего не поставлю именно такие кнопки.Может они привлекают больше и больше людей по ним кликают, но моё мнение такое.
SEO-Дилетант'ка says:

at

Kuzuxa, я поняла. Спасибо за твое мнение. Видно у тебя тоже разрешение монитора не большое. Я учту твое мнение.