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

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

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

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

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

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

• Открываем специальную страницу Google под названием “Добавьте кнопку +1 на свой сайт”;

• Выбираем размер кнопки, исходя из дизайна нашего сайта в целом и того места, куда планируем её поместить. Как именно выглядят разные варианты, мы можем видеть в специальном тестовом поле справа;

• Выбираем язык кнопки – русский (можно и другой – на любителя, или вообще оставить как есть, родной английский, – это непринципиально);

• Копируем и вставляем в шаблон своего блога пару коротких фрагментов HTML-кода. Первый из них удобнее всего разместить перед закрывающим тегом </body>, а второй рекомендуется поместить туда, где следует появиться нашей новой кнопке.

Последний пункт разберём подробнее. Матёрые асы блоговедения на площадке 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) изготавливает и устанавливает памятники из гранита.

* * *

Понравилось? Нажмите на кнопки для своих социальных сетей!

Заинтересовало? Прокомментируйте, что думаете по этому поводу!

Будьте первыми в курсе новинок блога, подпишитесь на обновления по E-Mail.