Entries (RSS)

пятница, 9 сентября 2011 г.

Кнопка Google +1 на Blogger

Кнопка Google +1 Одно из важнейших событий лета 2011 года в Интернете – это запуск социальной сети Google+ от одноимённой информационно-поисковой корпорации. Популярной новая сеть стала ещё до своего официального появления. Это неудивительно, если учитывать авторитет разработчика. Но ещё больший успех достался кнопке “+1”, которая дала возможность интернет-пользователям рекомендовать понравившийся контент.

Дело в том, что материалы, за которые посетители сайта проголосовали кнопкой “+1”, не только анонсируются в гугловской соцсети (при наличии там аккаунта, разумеется), но и  отмечаются соответственно в результатах поисковой выдачи гугловского поисковика. В итоге, поведенческий фактор при ранжировании результатов поиска выходит на более высокий уровень влияния и ещё больше “очеловечивается”.

 1 на Blogger Тем веб-мастерам, чьи блоги ведутся на площадке Blogger (то есть, нам с вами), крупно повезло. Эта площадка также находится под уютным крылом Google и новая социальная кнопка “+1” сама автоматом появилась в ряду стандартных соцкнопок. Блоггерам для этого ничего делать не пришлось. Для тех авторов, кто просто ведёт свой интернет-дневник и не желает технических заморочек – это большое преимущество.

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

О том, как установить на свой блог кнопку Twitter от самого сервиса микроблогов, которая более заметная, удобная и функциональная, чем стандартная, мы уже говорили в статье “Фирменная кнопка Twitter для блога”. А сегодня мы добавим к ней фирменную кнопку “+1” от Google. Нам для этого понадобится сделать несколько простых, но аккуратных шагов.

  • Выбираем размер кнопки, исходя из дизайна нашего сайта в целом и того места, куда планируем её поместить. Как именно выглядят разные варианты, мы можем видеть в специальном тестовом поле справа;
  • Выбираем язык кнопки – русский (можно и другой – на любителя, или вообще оставить как есть, родной английский, – это непринципиально);
  • Копируем и вставляем в шаблон своего блога пару коротких фрагментов HTML-кода. Первый из них удобнее всего разместить перед закрывающим тегом </body>, а второй рекомендуется поместить туда, где следует появиться нашей новой кнопке.
 1 на Blogger handmade-560

Последний пункт разберём подробнее. Матёрые асы блоговедения на площадке Blogger могут эти разъяснения безболезненно пропустить. Зато новички, будущие звёзды блогосферы, смогут почувствовать себя поувереннее.

Аккуратно подбираемся к шаблону нашего блога по пути: Панель инструментов / Дизайн / Изменить HTML. Первым делом сохраняем запасную копию нашего текущего шаблона для того, чтобы оставить возможность восстановить всё как было в том случае, если что-то пойдёт не так. Для этого в первом же разделе Зарезервировать/восстановить шаблон щёлкаем по ссылке Загрузить весь шаблон и в открывшемся стандартном диалоге сохранения файла выбираем место и имя сохраняемого шаблона у себя на компьютере. Имя можно оставить по умолчанию – оно уникально для каждого блога на Blogger. Если, конечно, у нас не сохранены уже в этой папке несколько шаблонов в ходе предыдущих экспериментов :-)

Теперь ставим галочку в чек-боксе Расширить шаблоны виджета. Нажимаем комбинацию клавиш Ctrl+F. В верхней части браузера открывается поисковая панель с окошком для ввода строки поиска. Вводим в это окошко нужные символы:
</body>
Нажимаем Найти. Этот тег появляется в окне редактирования HTML-кода шаблона и подсвечивается. Ставим курсор выше найденного тега и нажимаем пару раз клавишу Ввод (Enter), чтобы расчистить строки для кода кнопки.

На гугловской странице настроек выделяем и копируем первый фрагмент кода. Ставим курсор на середину свободных строк и вставляем туда наш скопированный код. Теперь осталось выбрать место для второго фрагмента кода, где именно будет показываться кнопка. Если выбран вид кнопки со счётчиком, то самое заметное место для неё – в самом начале статьи, под заголовком.

С помощью всё той же комбинации клавиш Ctrl+F находим в HTML-коде шаблона строку:
<div class=’post-header-line-1′/>
В некоторых шаблонах нужная строка может выглядеть по другому:
<div class=’post-header’>
Cразу после такой строки копируем с Google и вставляем второй фрагмент кода нашей кнопки. Щёлкаем по оранжевой кнопке Сохранить шаблон. Смотрим свой блог: кнопка “+1” появилась в самом начале статьи, сразу под заголовком, цель достигнута.

Не всегда такое расположение удобно. Часто сразу под заголовком располагается иллюстрация к статье и кнопка в этом случае будет сдвигать её вниз. Это зрительно не очень хорошо смотрится. Поэтому можно сдвинуть саму кнопку к правой стороне основной колонки, где она будет на одном уровне с картинкой. Для этого второй вставленный фрагмент кода кнопки надо окружить с обеих сторон такой конструкцией:
<div style=’float: right; padding: 4px;’>КОД КНОПКИ</div>
Здесь надо будет поэкспериментировать со значением параметра padding, подобрать его так, чтобы обтекание кнопки текстом выглядело хорошо. Главное – не забывать Сохранять изменения в шаблоне перед просмотром результата.

Немного более сложный случай, если это свято место уже не пусто. Например, если у нас там уже прижилась раньше кнопка Twitter. Тогда код новой кнопки надо вставить внутрь другой конструкции:
<div style='margin: 7px 0 2px 2px; width: 50px; float: right;'>КОД КНОПКИ</div>
Здесь, вероятно, придётся поиграться со значением параметра width, которое определяет отступ для той кнопки, которая поселилась на этом месте раньше. А также подобрать значения параметра margin для лучшего выравнивания кнопки относительно всех четырёх сторон света.

Уверен, что такая подробная инструкция поможет веб-мастеру даже с небольшим опытом блоговедения настроить на своём блоге новую кнопку для социальных рекомендаций “+1”. Это предоставит ещё больше удобства для посетителей, подстегнёт поисковое и социальное продвижение своего ресурса и поможет стать ещё на шаг ближе к мечте многих блоггеров под названием “работа на дому”. А наш блог “XXI век на Blogger” обязательно поможет в этом благородном деле своими новыми и актуальными материалами. Не забывайте следить за обновлениями, уважаемые читатели! А если у Вас ещё нет регистрации в Google+, то можете смело обращаться за инвайтом-приглашением к автору.

* * *

Порой память о человеке остаётся единственным, чем мы можем выразить свою признательность к нему. Через века до нас доходит монументальная память современников ушедших людей. В наши дни студия “Мемориал” (http://stoun.ru) изготавливает и устанавливает памятники из гранита.

11 комментариев:

  1. Спасибо, Евгений за подробную пошаговую инструкцию!Правда, после первого прочтения возникла мысль:"Зачем заморачиваться, есть же маленькая кнопка...", но после второго, думаю, что надо это сделать! Тогда их будет две? Большая и маленькая? А если у меня нет аккаунта в соц. сети, куда идут от меня +1, которые я нажимаю, комментируя посты марафонцев?

    ОтветитьУдалить
  2. Светлана, если будут две кнопки, то хуже от этого точно не будет. Просто будут дублировать друг друга.
    Ес ли у Вас нет аккаунта в Google+, то достаточно просто авторизоваться в любом гугловском сервисе (почта Gmail, платформа Blogger) и Ваш персонализированный отзыв запомнится и учтётся. Если нет ни аккаунта ни авторизации, то при нажатии на кнопку сначала всплывёт окошко с предложением сделать то или другое.

    ОтветитьУдалить
  3. Как всегда ценная информация для Чайников, то есть для меня
    С Уважением Агапова Ольга

    ОтветитьУдалить
  4. Ольга, каждый чайник - это без пяти минут Кофейник. А то и Самовар!

    ОтветитьУдалить
  5. Я все сделала, кнопка вставилась на блог, но почему-то оказалась неактивной, нажать на нее нельзя:(
    Пришлось вернуться к старым настройкам.
    Вот елки!

    ОтветитьУдалить
  6. Ольга, я по собственной инструкции поставил кнопку на свой тестовый блог, - всё работает.
    Попробуйте ещё раз, аккуратно, не торопясь. Сначала вариант попроще. Потом, когда убедитесь в работоспособности, настроите её так, как Вам нужно.

    ОтветитьУдалить
  7. Спасибо за информацию, у меня все получилось! очень довольна вашим уроком!

    ОтветитьУдалить
  8. Замечательно! А если ещё и ссылочку оставите, то порадуемся вместе с Вами новой кнопке на Вашем блоге )

    ОтветитьУдалить
  9. Спасибо Евгений за обмен и уже на вас поставил ссылку на теме рсс.

    ОтветитьУдалить
  10. Сейчас не много изменил правила обмена но принцип тот же. Так что можете еще обменяться с любым из своих блогов или пригласить еще кого нибудь.

    ОтветитьУдалить

А какое Ваше мнение по этому поводу?

Related Posts Plugin for WordPress, Blogger...