Доброго времени суток, уважаемые читатели. Очень многие из вас просили рассказать, как сделать кнопки от социальных сетей в один ряд, как например делает плагин социальных кнопок для WordPress, а также, как оформить их в рамочке. Все это не сложно сделать, и сейчас я расскажу, как.
Итак, прежде, чем мы начнем, необходимо определиться:
У меня часто спрашивают, а где можно взять коды различных кнопок. Все коды кнопок всегда можно найти на сайте той социальной сети, чьи кнопки вы хотите установить. Находятся они в специальном разделе, который называется - Разработчикам, ссылка на этот раздел всегда есть в футере сайта любой социальной сети. По крайней мере все кнопки я нахожу именно там.
Я подготовила своеобразную шпаргалку по самым распространенным кнопкам, там же есть и ссылки непосредственно на разделы для разработчиков. Итак, у нас есть 5 кнопок, которые мы хотим установить в блоге в конце сообщений.
Несколько напоминаний, кто впервые будет устанавливать кнопки социальных сетей к себе в блог.
Для кнопки Вконтакте необходимо получить собственный API, а также внести дополнительный код перед закрывающим тегом </head>, подробнее можете прочитать в этой статье.
Для кнопки Класс от Одноклассников также потребуется указать дополнительный код в head и в body, подробнее про это читайте в этой статье.
Все это вкратце вы можете узнать и по ссылке на шпаргалку выше.
Я долго экспериментировала, куда лучше всего поместить кнопки, и пришла к выводу, что самый лучший вариант – это сразу после строчки:
Итак, прежде, чем мы начнем, необходимо определиться:
- Кнопки каких социальных сетей вы хотите сделать.
- Общее количество этих кнопок.
- Все кнопки должны быть одинаковыми, т.е. либо все горизонтальные, либо все квадратные.
- Обратить внимание на то, что у Facebook, Вконтакте и Мой мир в коде кнопок можно указать, будут ли появляться фото тех пользователей, которые сделали Like. Чтобы все кнопки поместились в один ряд, придется отказаться от этой функции.
- Вконтакте
- Мой мир
- Одноклассники
У меня часто спрашивают, а где можно взять коды различных кнопок. Все коды кнопок всегда можно найти на сайте той социальной сети, чьи кнопки вы хотите установить. Находятся они в специальном разделе, который называется - Разработчикам, ссылка на этот раздел всегда есть в футере сайта любой социальной сети. По крайней мере все кнопки я нахожу именно там.
Я подготовила своеобразную шпаргалку по самым распространенным кнопкам, там же есть и ссылки непосредственно на разделы для разработчиков. Итак, у нас есть 5 кнопок, которые мы хотим установить в блоге в конце сообщений.
Несколько напоминаний, кто впервые будет устанавливать кнопки социальных сетей к себе в блог.
Для кнопки Вконтакте необходимо получить собственный API, а также внести дополнительный код перед закрывающим тегом </head>, подробнее можете прочитать в этой статье.
Для кнопки Класс от Одноклассников также потребуется указать дополнительный код в head и в body, подробнее про это читайте в этой статье.
Все это вкратце вы можете узнать и по ссылке на шпаргалку выше.
Кнопки социальных сетей по горизонтали
Итак, вся подготовительная работа выполнена, приступаем к размещению кнопок. Нам нужно создать для них общий контейнер, а также каждую кнопку поместить в свой контейнер, и каждому контейнеру прописать id.Я долго экспериментировала, куда лучше всего поместить кнопки, и пришла к выводу, что самый лучший вариант – это сразу после строчки:
<data:post.body/>
В общем, как и во многих других рекомендациях, это самое лучшее место. Итак, после этой строчки размещаем такой код:<b:if cond='data:blog.pageType == "item"'>
<div id='social-button'>
<!--twitter-->
<div id='btwi'><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<!--facebook-->
<div id='bface'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='lucida grande' href='' layout='button_count' send='false' show_faces='false' width='90'/></div>
<!--Вконтакте-->
<div id='bvk'><div id='vk_like'/>
<script type='text/javascript'>
VK.Widgets.Like("vk_like", {type: "mini"});
</script> </div>
<!--Мой мир-->
<div id='bmail'><a class='mrc__plugin_like_button' data-mrc-config='{'type' : 'button', 'width' : '122'}' href='http://connect.mail.ru/share' target='_blank'>Нравится</a>
<script charset='UTF-8' src='http://cdn.connect.mail.ru/js/loader.js' type='text/javascript'/></div>
<!--Одноклассники-->
<div id='bodcl'><a class='odkl-klass-stat' expr:href='data:post.url' onclick='ODKL.Share(this);return false;'><span>0</span></a></div>
</div>
</b:if>
<div id='social-button'>
<!--twitter-->
<div id='btwi'><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<!--facebook-->
<div id='bface'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='lucida grande' href='' layout='button_count' send='false' show_faces='false' width='90'/></div>
<!--Вконтакте-->
<div id='bvk'><div id='vk_like'/>
<script type='text/javascript'>
VK.Widgets.Like("vk_like", {type: "mini"});
</script> </div>
<!--Мой мир-->
<div id='bmail'><a class='mrc__plugin_like_button' data-mrc-config='{'type' : 'button', 'width' : '122'}' href='http://connect.mail.ru/share' target='_blank'>Нравится</a>
<script charset='UTF-8' src='http://cdn.connect.mail.ru/js/loader.js' type='text/javascript'/></div>
<!--Одноклассники-->
<div id='bodcl'><a class='odkl-klass-stat' expr:href='data:post.url' onclick='ODKL.Share(this);return false;'><span>0</span></a></div>
</div>
</b:if>
Итак, что мы сделали. Мы создали общий контейнер social-button, в который поместили все кнопки. Каждая кнопка находится в собственном контейнере.
Находим в шаблоне код ]]></b:skin> и перед ним добавляем:
Стоит сказать, что этот способ предполагает размещение кнопок только на внутренних страницах, на главной кнопок не будет видно. Изначально я пыталась продумать вариант, чтобы кнопки были на главной, многие об этом спрашивают. Это можно сделать, если отказаться от кнопки Вконтакте. Ее код так устроен, что на странице может быть только одна кнопка. А как правило, в блогах на главной присутствует несколько статей, из-за чего и несколько кнопок.
Этот код можно обойти, например, как я это сделала в этом примере, но минус данного способа в том, что для этого пришлось каждой кнопке прописывать свой уникальный идентификатор. Если в одном сообщении это можно было сделать, зная точное количество кнопок прописать каждой свой идентификатор, то в шаблоне это предусмотреть просто невозможно из-за того, что вы постоянно публикуете новые сообщения и для каждого их них нужна будет новая кнопка с уникальным идентификатором.
Просто применяем ему примерно такой стиль:
Конечно, вы можете изменить очередность кнопок, поменять мои идентификаторы на любые другие, но в таком случае не забудьте эти же идентификаторы поменять и в стилях, где мы прописывали свойство float и ширину.
Как видите, абсолютно ничего сложного. Жаль только, что нем мирового стандарта на кнопки социальных сетей, чтобы все они были одного размера. Но если счетчик в кнопке вам не обязателен, то можно установить кнопки, как описано в этой статье.
На этом все, желаю удачи.
- Кнопка Twitter в контейнере с ID btwi
- Кнопка Facebook в контейнере с ID bface
- Кнопка Вконтакте в контейнере с ID bvk
- Кнопка Мой мир в контейнере с ID bmail
- Кнопка Одноклассники в контейнере с ID bodcl
Находим в шаблоне код ]]></b:skin> и перед ним добавляем:
#btwi {
float: left;
width: 100px;
}
#bface {
float: left;
width: 80px;
}
#bvk {
float:left;
width: 85px;
}
#bmail {
float:left;
width: 110px;
}
#bodcl {
float:left;
width: 90px;
}
Как вы видите, помимо свойства float, я указала ширину кнопок. Если не указать, то между кнопок получаются большие промежутки. Лично мне это не понравилось, и я постаралась придать им аккуратный вид. Если что, вы можете настроить ширину каждой кнопки отдельно.float: left;
width: 100px;
}
#bface {
float: left;
width: 80px;
}
#bvk {
float:left;
width: 85px;
}
#bmail {
float:left;
width: 110px;
}
#bodcl {
float:left;
width: 90px;
}
Стоит сказать, что этот способ предполагает размещение кнопок только на внутренних страницах, на главной кнопок не будет видно. Изначально я пыталась продумать вариант, чтобы кнопки были на главной, многие об этом спрашивают. Это можно сделать, если отказаться от кнопки Вконтакте. Ее код так устроен, что на странице может быть только одна кнопка. А как правило, в блогах на главной присутствует несколько статей, из-за чего и несколько кнопок.
Этот код можно обойти, например, как я это сделала в этом примере, но минус данного способа в том, что для этого пришлось каждой кнопке прописывать свой уникальный идентификатор. Если в одном сообщении это можно было сделать, зная точное количество кнопок прописать каждой свой идентификатор, то в шаблоне это предусмотреть просто невозможно из-за того, что вы постоянно публикуете новые сообщения и для каждого их них нужна будет новая кнопка с уникальным идентификатором.
Как сделать кнопки в рамке
Теперь стоит поговорить о том, как оформить блок кнопок в рамку. Для этого у нас будет задействован главный контейнер social-button.Просто применяем ему примерно такой стиль:
#social-button {
height: 20px; /*высота блока*/
padding: 16px; /*внутренние поля*/
margin:10px; /*внешние поля*/
border: 1px solid #2288BB; /*рамка – толщина, стиль, цвет*/
}
Вы можете регулировать все значения на ваше усмотрение.height: 20px; /*высота блока*/
padding: 16px; /*внутренние поля*/
margin:10px; /*внешние поля*/
border: 1px solid #2288BB; /*рамка – толщина, стиль, цвет*/
}
Конечно, вы можете изменить очередность кнопок, поменять мои идентификаторы на любые другие, но в таком случае не забудьте эти же идентификаторы поменять и в стилях, где мы прописывали свойство float и ширину.
Как видите, абсолютно ничего сложного. Жаль только, что нем мирового стандарта на кнопки социальных сетей, чтобы все они были одного размера. Но если счетчик в кнопке вам не обязателен, то можно установить кнопки, как описано в этой статье.
На этом все, желаю удачи.
