[yandex2]
Итак, прежде, чем мы начнем, необходимо определиться:
Я буду расставлять следующие кнопки:
Результат вы можете увидеть в тестовом блоге, внизу страницы все шесть кнопок расположены в один ряд.
У меня часто спрашивают, а где можно взять коды различных кнопок. Все коды кнопок всегда можно найти на сайте той социальной сети, чьи кнопки вы хотите установить. Находятся они в специальном разделе, который называется — Разработчикам, ссылка на этот раздел всегда есть в футере сайта любой социальной сети. По крайней мере все кнопки я нахожу именно там.
Я подготовила своеобразную шпаргалку по самым распространенным кнопкам, там же есть и ссылки непосредственно на разделы для разработчиков. Итак, у нас есть 6 кнопок, которые мы хотим установить в блоге в конце сообщений.
Несколько напоминаний, кто впервые будет устанавливать кнопки социальных сетей к себе в блог.
Для кнопки Google+ (для всех, кроме владельцев блогов на Blogger) и Вконтакте помимо самого кода кнопки нужно внести дополнительный код перед закрывающим тегом </head>.
Для кнопки Google+
Для кнопки Вконтакте
Все это вкратце вы можете узнать и по ссылке на шпаргалку выше.
[yandex]Итак, вся подготовительная работа выполнена, приступаем к размещению кнопок. Нам нужно создать для них общий контейнер, а также каждую кнопку поместить в свой контейнер, и каждому контейнеру прописать id.
Я долго экспериментировала, куда лучше всего поместить кнопки, и пришла к выводу, что самый лучший вариант – это сразу после строчки:
В общем, как и во многих других рекомендациях, это самое лучшее место. Итак, после этой строчки размещаем такой код:
Но пока все кнопки стоят в столбик. Это происходит из-за того, что контейнер <div> – блочный элемент и по природе своей всегда выстраивается под предыдущим. А вот чтобы выстроить кнопки в ряд, мы пропишем каждому контейнеру свойство float.
Находим в шаблоне код ]]></b:skin> и перед ним добавляем:
Как вы видите, помимо свойства float, я указала единую для всех кнопок ширину. Но, возможно, вам потребуется для каждой кнопки в отдельности прописать свою ширину. Тогда сделайте примерно так для каждой отдельной кнопки, указав ее идентификатор:
Как писала выше, изначально в статье описывалось 5 кнопок, и на странице примера все пять кнопок вставали идеально. Но, когда добавила шестую кнопку от Google+, все кнопки в блок не поместились. Что можно предпринять? Во-первых, вы можете отказаться от какой либо кнопки, просто удалив ее код, во-вторых, вы можете сделать как я — разделить кнопки в два ряда. Если вы хотите сделать так же, то заключите первые три кнопки в блок:
А 4,5 и 6 кнопку в другой блок
А в стили добавьте код:
Обратите внимание, во-втором варианте для всех кнопок задается ширина 30%.
Стоит отметить, что этот способ предполагает размещение кнопок только на внутренних страницах, на главной кнопок не будет видно. Изначально я пыталась продумать вариант, чтобы кнопки были на главной, многие об этом спрашивают. Это можно сделать, если отказаться от кнопки Вконтакте. Ее код так устроен, что на странице может быть только одна кнопка. А как правило, в блогах на главной присутствует несколько статей, из-за чего и несколько кнопок.
Этот код можно обойти, например, как я это сделала в этом примере, но минус данного способа в том, что для этого пришлось каждой кнопке прописывать свой уникальный идентификатор. Если в одном сообщении это можно было сделать, зная точное количество кнопок прописать каждой свой идентификатор, то в шаблоне это предусмотреть просто невозможно из-за того, что вы постоянно публикуете новые сообщения и для каждого их них нужна будет новая кнопка с уникальным идентификатором.
Теперь стоит поговорить о том, как оформить блок кнопок в рамку. Для этого у нас будет задействован главный контейнер social-button.
Просто применяем ему примерно такой стиль:
Вы можете регулировать все значения на ваше усмотрение.
[ads1]Конечно, вы можете изменить очередность кнопок, поменять мои идентификаторы на любые другие, но в таком случае не забудьте эти же идентификаторы поменять и в стилях, где мы прописывали свойство float и ширину.
Как видите, абсолютно ничего сложного. Жаль только, что нем мирового стандарта на кнопки социальных сетей, чтобы все они были одного размера. Но если счетчик в кнопке вам не обязателен, то можно установить кнопки, как описано в этой статье.
На этом все, желаю удачи.
Доброго дня, читатели блога SEO-Дилетанта. Я всегда получаю много вопросов от вебмастеров, владельцев сайтов и блогеров об ошибках и сообщениях,…
*Рекламный обзор Доброго дня, читатели Блога SEO-Дилетанта. Кнопки «Поделиться» и «Подписаться на обновления» необходимы любому сайту для…
Доброго дня, читатели блога SEO-Дилетанта. На днях* в августе 2016 года я полностью перевела свой блог на защищенный протокол…
Доброго дня, читатели блога SEO-Дилетанта. Обычно подобные посты пишут в конце года, и я готовила его в декабре, но не успела…
Доброго дня, читатели Блога SEO-Дилетанта. В сети множество статей о создании и настройке блога на WordPress. Каждый автор видит…
Доброго дня, читатели блога SEO-Дилетанта. О том, как выбрать хостинг, написано немало статей. Только в Яндексе на данный…
This website uses cookies.
View Comments
Спасибо за хорошее решение.
У меня на днях появился вопрос, сейчас установлены соц кнопки с помощью сервиса Яндекса. В статистике кнопки заметила, что статьи не всегда добавляют в соц сети с правильным адресом, то есть
в конце адреса может быть
#more
или
?utm_source=BP_recent
(это когда на статью перешли с виджета Последние сообщения). Хотелось бы, как то закрепить постоянный адрес
, что бы именно он добавлялся с помощью кнопок. Помогите пожалуйста, если можете! Как всегда благодарна заранее за любой ответ.
Что касается #more, то это не страшно, это не ссылка, это якорь на странице, т.е. он не создает дублирования. Относительно других адресов, подобные проблемы решаются с помощью 301 редиректа, если блог на Blogger, то мы таким редиректом пользоваться не можем. В инструментах для вебмастера от Google можно настроить (Конфигурация сайта - настройки - обработка параметров), чтобы эта поисковая система игнорировала такие ссылки, а вот в Яндексе такого решения пока нет и способов защитить блог от дублирования пока не известно.
Спасибо за статью. У меня вопрос как выделенное пространство удалить? P.S. Смотрите картинку
Это пространство не удаляется, нужно просто иначе перераспределить все пространство блока. Думаю, в вашем случае самым оптимальным будет, во-первых, тег
а где именно в коде надо прописать 355 px? С тэгами center не помогло
Тег "центер" поможет после того, как вы пропишите ширину блоку.
Где вы прописывали стиль для контейнера
social-button (рамка, высота), там и ширина указывается - width:355px; (включайте логику, в статье все есть, делайте по аналогии:))
все работает СПАСИБО!!!!
Возникла проблема,счетчик "twee" не изменяется . Стоит на нуле,хотя мой пост в twitter сохранили 2 раза
Павел, обратите внимание на этот абзац в статье:
У меня часто спрашивают, а где можно взять коды различных кнопок. Все
коды кнопок всегда можно найти на сайте той социальной сети, чьи кнопки
вы хотите установить. Находятся они в специальном разделе, который
называется -
Разработчикам
, ссылка на этот раздел всегда есть в футере сайта любой социальной сети. По крайней мере все кнопки я нахожу именно там.
Я не создаю кнопки, я только привела пример, как уже готовые кнопки от разработчиков можно расположить в своем блоге.
Что касается конкретно кнопки твитера, у него никогда информация не появляется в режиме реального времени, может появиться спустя несколько часов (это просто из личных наблюдений)
Спасибо, Катюш, за пост! Вроде бы получилось. Правда кнопка Вконтакте особнячком, почему то, встала. По-разному пытался регулировать, но не хочет она приближаться к остальным и все:)) Да и пусть.
У меня вопрос немножко не по теме. Как создаются странички - подразделы, например, как у тебя: SEO - Продвижение- Оптимизация - Интструменты с URL search/label ?