Валидная кнопка Google +1

Сегодня передо мной стала задача добавить на сайт кнопку +1 от Google. Казалось бы все довольно просто — надо всего лишь добавить этот код в то место, в котором вы хотите увидеть кнопку:

[codesyntax lang=»html4strict» title=»HTML»]

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

[/codesyntax]

Но тег <g:plusone> не является html-тегом и следовательно такая запись не пройдет валидацию (если конечно она еще кого-то волнует).

Порывшись в документации, нашел следующее решение:

[codesyntax lang=»html4strict» title=»HTML»]

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
	{lang: 'ru','parsetags' : 'explicit'}
</script>
<script type="text/javascript">
	gapi.plusone.render("plusone-div",{"size": "small", "count": "true"});
</script>
<div id="plusone-div"></div>

[/codesyntax]

В функции gapi.plusone.render можно менять параметры контролируя внешний вид кнопки.

P.S. Имейте ввиду — скрипт, который подгружается вместе с кнопкой весит почти 40kB. Надеюсь, что в Google скоро это исправят

Запись опубликована в рубрике HTML/CSS, JavaScript/JQuery с метками , , . Добавьте в закладки постоянную ссылку.

4 комментария: Валидная кнопка Google +1

  1. Еще эта кнопка не появляется, если делать сайт на локалке. Рендериться будет только на паблик домене.

  2. Спасибо за ман.
    Вопрос — как сделать соц. кнопки от яндекса и гугл+1 на одной строке в уровень? У меня +1 кнопка когда с параметром small — уходит выше всех кнопок от яндекс и приходится делать новой строчкой, что не есть круто. bcoff.ru — там хочу сделать как на этом блоге у вас.

    • Ну я долго не парился и просто сделал блоку от Яндекса float:left, а g+ опустил на 11px:
      #plusone-div {
      margin-top: 11px !important;
      }

      • Вот не могут делать всё по стандарту какому нибудь) Сколько кнопок — столько и проблем, как, впрочем, и с браузерами)))
        Ладно, разберусь — спасибо.

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

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