Кнопки социальных сетей — Поделиться в 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 == &quot;item&quot;'>
<div id='sharebox'>
<div class='float'><script type='text/javascript'>
    tweetmeme_url = &#39;<data:post.url/>&#39;;
    </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 == &quot;item&quot;'>
<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;

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

top:170px;

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

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

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

  1. SEO-Дилетант'ка

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

  2. elfaimer

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

  3. SEO-Дилетант'ка

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

  4. Oleg

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

  5. Kuzuxa

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

  6. Nomad

    Как у вас сделаны кнопки, мне очень нравится. Со вкусрм всё отлично. А что мешает использовать код в WordPress? По логике в single.php должно вставляться.

  7. SEO-Дилетант'ка

    D приниципе ничего не мешает, нужно только знать куда вставить и немного сам код кнопок подредактировать,т.е. первая строка и последняя в коде — это XML, его нужно удалить, остальное спокойно вставляется.

  8. SEO-Дилетант'ка

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

  9. Tim_durst

    Спасибо, все доходчиво и понятно написано, я все сделал так как описано, но у меня абсолютно никаких изменений нет. Возможно у меня тоже платформа не такая? http://fucker-online.blogspot.com/
    Помогите пожалуйста.

  10. Сотник Юрий

    Спасибо за пост. Пытался добавить в этот же блок кнопку «вконтакте» — не получилось :(
    Может, есть мысли как это можно сделать?

  11. SEO-Дилетант'ка

    Юрий, а разве у Вконтакта есть квадратная кнопка? Вы квадратную пытаетесь вставить? Я смотрела, не было такой. Если же она только появилась, то я внесу изменения в статью.

  12. SEO-Дилетант'ка

    У меня уже стоит кнопка:). Сделать просто, но в комментарии объяснять долго. Я подумаю, как лучше сделать, отдельной статьей или эту обновить. Скорее всего завтра опубликую. Здесь вам отпишу.

  13. Geniy

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

  14. vataga_a

    Спасибо за пост, на месте с первого раза. Катя, хотел проконсультироваться. Я заметил, что в разных браузерах мой сайт отображается по-разному. Причем это касается только Explorer, в нем описание блога зачем то сбоку, а не внизу под названием, кроме того, шрифты русского и английского в название поста разные. Я так понимаю Explorer не поддерживает какие-то форматы, именно поэтому такие разночтения. Например в Chrome, Opera и старой доброй Mozilla FireFox показывает все нормально. Может новые версии Explorer 8 или 9 уже исправились? У меня седьмая и с ней как раз проблемы. А вот 8 и 9 на висту никак не могу установить, все пишет: не хватает обновлений, хотя система обновлена полностью. Нужно ли забить на эту ситуацию, или можно что-то изменить в коде, чтобы сайт отображался корректно во всех браузерах?

  15. SEO-Дилетант'ка

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

  16. SEO-Дилетант'ка

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

  17. vataga_a

    Нет, различия не серьезные, касаются только внешнего вида. Просто заметил, что часть моих посетителей пользуются IE, хотел как то подогнать по один формат. За ответы и посты спасибо!

  18. SEO-Дилетант'ка

    Знаете, попробуйте, для начала воспользоваться функцией «Средства разработчика» в ИЕ. В меню — Сервис или F12. Там можно поэкспериментировать с css. Так же, обратите внимание на такую ситуацию: иногда контейнерам не прописываются фиксированная ширина и высота, подразумевая, что объем контейнера зависит от содержания, и, например, одни браузеры спокойно самостоятельно регулируют правильно этот объем, а ИЕ не хочет правильно отображать, в таком случае, стоит указать фиксированные объемы. Если средства разработчика не помогут, и вы не знаете, в чем может быть проблема, то поищите по запросу «хаки IE», чаще всего их выкладывают списками с описанием проблемы и решением. почитаете, может что-то подгоните под свою проблему.

  19. Real_Madd

    Сделал всё как здесь написано. Вроде получилось! Но дело в том, что мне не нужен Google Buzz. Пробовал удалить его, но не получается. Такое ощущение, что блогер запрещает удалять Buzz(ведь и то, и то принадлежит Google). Но был бы рад, если вы мне помогли бы удалить кнопку с Buzz. Ведь у вас получилось! )))

  20. Real_Madd

    Странно! Теперь получилось. Интересно, что я тогда неправильно делал? (Это риторический вопрос, т.е. ответ не требуется).

    Спасибо!

  21. Mkrtich Khachatryan

    у меня такой вопрос дорогая Екатерина,,,,кнопки у меня появляются только когда я на главной странице что то новое напишу,и после этого опять нету их,,,,можно решить этот проблем?

  22. MkrtichKhachatryan

    ну вот с disqus  тоже самое,,появлятся только когда что то новое добовляю на главную

  23. SEO-Дилетант'ка

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

  24. MkrtichKhachatryan

    обратите внамания вот на это  в моем блоге….за ранее спасибо   Disqus could not be loaded because it is not being loaded from a trusted domain.

  25. SEO-Дилетант'ка

    Как то вы все неправильно в блоге начали делать. Во-первых, видно, что дискус у вас установлен неправильно. У меня в блоге есть статья про установку, перечитайте ее и попробуйте установить заново. В той же статье и вопросы можете задать (просто данная статья не о дискусе). Ссылка на статью есть вначале комментариев.
    Перед началом установки дискуса не забудьте удалить предыдущий.
    Во-вторых, у вас в блоге нет страниц, на которых публикуются сообщения именно блога. Все свои статьи вы публикуете на Статических страницах. Они предназначены для создания страниц «О блоге», «Об авторе», «Контакты», но не для постоянных публикаций.
    И, пожалуйста, я не хочу обсуждать все вопросы вашего блога в статей про социальные кнопки. Здесь можно задать вопросы только касательно опубликованной статьи.
    У меня в блоге в меню есть ссылка на форум, где вы можете задавать свои вопросы по Blogger, пожалуйста, зарегистрируйтесь там и создайте тему со своими вопросами, постараюсь помочь.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *