blogger.freewebmaster.info/web/Cross-Column2

16 апреля 2013

Установка социальных кнопок на Blogspot

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

Кнопка ВКонтакте Получить код кнопки социальной сети "ВКонтакте" можно, воспользовавшись конструктором кнопки. Для интереса разместил код прямо под сообщением, в режиме редактора "HTML". Выглядит, в целом, неплохо, но в этом случая, придется при публикации поста, каждый раз внедрять и код кнопки, что не очень удобно. Если воспользоваться виджетами "HTML/JavaScript", то можно разместить кнопку вверху или на боковой панели блога, которая на странице отдельного сообщения, будет ссылаться именно на него. В этом случае не надо добавлять кнопки к каждому посту.

Установка блока социальных кнопок Блок «Поделиться» от Яндекса, дает возможность посетителям разместить ссылку на сообщение блога во многих популярных социальных сетях и блогах.
Такой блок, мне кажется, довольно не плохо смотрится и на боковой панели блога. Позже, я нашел удобный и простой способ, с помощью которого кнопки будут отображаться в конце каждого сообщения, и не требующий даже редактирования шаблона.  Для этого зайдите в меню настроек блога, на вкладку "Сообщения и комментарии" и в поле "Шаблон сообщения" вставьте нужный код. Обратите внимание, что кнопки не появятся в уже опубликованных постах, поэтому внедрить код туда можно вручную в режиме HTML.

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

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

<div class='post-share-buttons goog-inline-block'>
    <b:if cond='data:post.sharePostUrl'>
        <b:include data='post' name='shareButtons'/>
    </b:if>
</div>


В коде шаблона, javascript-код сохраняется, но кнопки не отображаются.

P.S. По состоянию на май месяц 2015 года, код шаблона Blogger обновился, код стандартных встроенных социальных кнопок размещён между тегами <b:includable> и </b:includable> с соответствующим ID:

<b:includable id='shareButtons' var='post'>
   <b:if cond='...'> код кнопки</b:if>
</b:includable>


Таким образом, чтобы удалить одну конкретную кнопку, можно удалить её код между тегами <b:if cond='...'> код кнопки</b:if>.

На изображении ниже, вставленный код блока социальных кнопок «Поделиться» от Яндекса выделен черным квадратом.
Установка социальных кнопок на Blogger
В мобильных шаблонах вообще стоит только одна кнопка Google, дополнить можно в <b:includable id='mobile-post' var='post'>, перед <div class='post-footer-line post-footer-line-2'>


1 комментарий: