Кнопки социальных сетей для Blogspot Blogger

Доброго времени суток, уважаемые читатели. Вот уже несколько месяцев хочу поделиться с вами красивым оформлением кнопок социальных сетей. Ещё летом, перейдя на персональный домен, я задумала поменять дизайн блога, под который искала красивое решение кнопок добавления в социальные сети. Все-таки, однакнопка, которая у меня установлена в конце статьи смотрится неказисто, а то, что под ней, кнопки Addthis и Мой мир вообще никуда не годятся. Дизайн менять передумала, а вот кнопочки давно хотела установить.

 

Давайте для начала немного определимся, что мы называем социальной сетью.

Сайты, которые наполняются зарегистрированными пользователями, участниками этого сайта и называются социальными сетями. Мы привыкли называть социальной сетью Мой Мир, Вконтакте, Одноклассники и другие. Все это сайты, которые наполняются участниками. Пользователи заводят в них свои странички, дневники, пишут на стенах друг друга (если это есть), делятся ссылками на интересные ресурсы. У каждой социальной сети есть свои кнопки, которые можно устанавливать в своем блоге или на сайте.

Я уже писала у себя в блоге, почему важно иметь подобные кнопки.

 Мы стараемся сделать наш блог максимально дружественным читателю. Стараемся предоставить ему простое и быстрое решение поделиться интересными материалами в той социальной сети, в которой он больше всего общается, причем так, чтобы он не ушел с нашего блога. Конечно, мы преследуем и свою цель. С помощью таких кнопок по сети распространяются ссылки на наш блог, а это значит, что по этим ссылкам к нам приходят читатели, увеличивается посещаемость, увеличивается количество постоянных читателей. Не к этому ли мы стремимся?

То, что не так давно было предложено разработчиками блоггер мне нравится.

Просто, со вкусом, лаконично, но согласитесь, что этого очень мало. Данные кнопки сделаны под англоязычный интернет, у нас же, наряду с этими социальными сетями, пользуются даже большим успехом наши, русскоязычные сети. К сожалению, в рунете нет хороших полноценных решений для интеграции кнопок социальных сетей в блоги на Blogger Blogspot. Для WordPress, например, чего только не придумали, а вот нашу любимую платформу обходят стороной. А так хочется, чтобы наши блоги достойно стояли в одном ряду с блогами на WordPress. Да и умельцев почему-то очень мало, кто мог бы взять и сделать это. А зря, это имело бы очень большой успех. Потому что даже то, что я сегодня вам предложу, не является идеальным решением.

Решение я нашла в одном блоге и в конце этой статьи дам ссылку, а так объясню, почему я решила написать свою статью. Дело в том, что я доработала тот код под свой вкус, внесла некоторые изменения, о которых и упомяну в конце. А вы уж сами решите, пользоваться моим решением, или тем, которое предложено в том блоге. Но перейду к делу.

Вот как могут выглядеть кнопки на вашем блоге.

Почему “могут”? Потому что вы можете сами менять внешний вид кнопок, сделать под свой вкус, под свой дизайн блога. Они могут быть другого цвета, формы, в другом порядке. Я постараюсь максимально подробно все описать, чтобы вы могли сами менять их на свое усмотрение.

Начну с того, что для кнопок Twitter и Blogger я взяла код от разработчиков blogger, поэтому, чтобы они работали, необходимо включить у себя в блоге их показ.

 Идем в Инструменты блога, на вкладку Дизайн – Элементы страницы – Сообщения блога – Изменить. И ставим галочку Показывать копки для публикации. Но нам не нужно, чтобы эти кнопки видели читатели, ведь мы будем использовать собственные кнопки. Поэтому идем на вкладку Изменить HTML. Ставим галочку Расширить шаблоны виджета и находим код:

 

Этот код необходимо закомментировать, для этого обрамляем его вот таким образом

 

Любой код в шаблоне можно найти при помощи поиска, вызывается нажатием клавиш Ctrl+F.

Лучше эти строки закомментировать, чем использовать в стилях шаблона display:none. Если вдруг вы не нашли эти строки в своем шаблоне, то не мучайтесь, а посмотрите, отображаются ли эти кнопки в самом блоге. Скорее всего нет. А значит, у вас все готово. Дело в том, что когда разработчики внедрили свои кнопки, не во всех шаблонах они отображались, а чтобы начали отображаться, нужно было добавить в шаблон именно тот код, который мы перед этим закомментировали. Если все же кнопки в блоге есть, а вы не можете их найти в шаблоне, то будьте внимательны и поищите ещё раз.

С этим справились. Я решила не выкладывать весь код кнопок, а сделала вот такой файл. Открываем его. Это обычный блокнот. Смотрим. Так выглядит код полностью с моими комментариями. Давайте разберем подробнее, как строится код каждой кнопки. Это очень просто. Вам только нужно понимать, какой код имеет ссылка и изображение на языке HTML

 Самое главное понять, что каждая кнопка представляет из себя картинку , которая находится внутри ссылки тут код картинки.
Я специально выделила цветами для большей наглядности. То, что синее – это ссылка, то, что внутри синего зеленое – это код картинки.

Если вы впервые сталкиваетесь с кодом, то рекомендую ознакомиться с этой статьей.

В файле я специально сделала комментарии, которые показывают, начало кода каждой кнопки, для того, чтобы вы могли переставить кнопки местами, просто вырезав и вставив код в другое место.

Особое внимание обращаю на код кнопки добавления в закладки. У меня это последняя кнопка. Покажу его здесь

Дело в том, что я решила не отказываться от кнопки Addthis, которая стояла в блоге до этого момента, и нашла решение, как изменить ее внешний вид. Вы можете не использовать эту кнопку, удалив ее из кода в файле. А можете зарегистрироваться на их сайте, подключить статистику и получить код кнопки.

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

 

Прежде, чем вы получите код кнопки, вам нужно будет внести какие-то данные, подтвердить регистрацию через электронную почту, и в итоге вы получите, примерно такой код:

 

Из этого кода удаляем все ненужное, и получаем вот такой вариант:

А вместо слова Share вставляем код картинки. Получается, как в моем коде выше.

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

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

 

И удаляем тот кусок, который я выделила серым курсивом. Если не хотите удалять, можете просто закомментировать, поместив его внутрь этой конструкции /*код, который нужно закомментировать*/. Обратите внимание, закрывающая скобка } должна остаться в неизменном виде.

После этого уже можно и внести стиль для кнопок. Находим код:

и перед ним вставляем этот:

В принципе, этот код не обязателен и кнопки будут отлично функционировать без него. Первый блок придает всем кнопкам полупрозрачный вид, а второй блок, наоборот, делает кнопки яркими при наведении на них курсора мыши. Если вам это не нравится, можете удалить или переделать на свой вкус. Последний код просто сообщает, что у картинок кнопок нет полей. У всех шаблоны разные, и возможно, вам понадобиться указать какие-то поля (указываются в пикселях, например margin:5px;). В этой статье я давала ссылки на учебники, по которым вы можете получить минимальные знания по HTML и CSS.

Ну и теперь самое главное, куда вставлять весь код кнопок в шаблон. На мой взгляд, самое идеальное место – это, естественно, в конце каждой статьи. Открываем вкладку Дизайн-Изменить HTML и находим этот код:

Сразу после него можете вставить весь код, который находится в файле. Естественно, слова "Понравилась статья? Поделитесь ей с друзьями" можете поменять на свои, а так же указать свой стиль для них, чтобы они визуально выделялись рядом со стандартным шрифтом вашей статьи. Какие-то рекомендации давать не имеет смысла, т.к. у всех шаблоны разные, но это может быть примерно так:

 

Параметр font задает размер и тип шрифта. Самые распространенные шрифты можете посмотреть тут. А color задает цвет шрифта, подобрать цвет вы можете здесь 

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

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

Немного расскажу, какие есть отличия между кодами.

Как я выше заметила, я решила для Twitter и Blogger использовать код разработчиков. В случае с твиттером из-за того, что в том варианте не сокращаются ссылки, но зато в сообщение есть RT, так что решайте сами. В случае с Blogger – в предложенном коде отправляется одна только ссылка, в "моем" же варианте после ссылки идет небольшой кусочек начала статьи, что и выглядит приятней и избавляет блоггера (который решил опубликовать у себя ссылку) от лишних телодвижений.

Так же, практически ко всем кнопкам я добавила код, благодаря которому ссылки открываются в небольшом окошке. Что и смотрится аккуратней, и, опять же, наш читатель не уходит на другой сайт, а остается в нашем блоге. Не удалось сделать только для Twitter, почему то никак не хочет получаться, и не сделала для ЖЖ, т.к. не имело смысла. Были и другие мелочи, о которых не имеет смысла писать. Так что выбор за вами.

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

P.S. Дополнение через час после публикации статьи.
Прошу прощения у всех читателей, которые могли уже успеть прочитать статью. Вот так бывает, поторопишься и совсем из головы вылетит. В шаблон необходимо вставить ещё один код. Он полностью взят с того блога, на который я дала ссылку, и необходим для удобства пользователей Яндекс Блогов Я.ру. Вот этот код:

 

Вставить его нужно перед закрывающим тегом < /head>.

На этом все. Удачи.

Источник

.