Давайте для начала немного определимся, что мы называем социальной сетью.
Сайты, которые наполняются зарегистрированными пользователями, участниками этого сайта и называются социальными сетями. Мы привыкли называть социальной сетью Мой Мир, Вконтакте, Одноклассники и другие. Все это сайты, которые наполняются участниками. Пользователи заводят в них свои странички, дневники, пишут на стенах друг друга (если это есть), делятся ссылками на интересные ресурсы. У каждой социальной сети есть свои кнопки, которые можно устанавливать в своем блоге или на сайте.
Я уже писала у себя в блоге, почему важно иметь подобные кнопки.
Мы стараемся сделать наш блог максимально дружественным читателю. Стараемся предоставить ему простое и быстрое решение поделиться интересными материалами в той социальной сети, в которой он больше всего общается, причем так, чтобы он не ушел с нашего блога. Конечно, мы преследуем и свою цель. С помощью таких кнопок по сети распространяются ссылки на наш блог, а это значит, что по этим ссылкам к нам приходят читатели, увеличивается посещаемость, увеличивается количество постоянных читателей. Не к этому ли мы стремимся?
То, что не так давно было предложено разработчиками блоггер мне нравится.
Просто, со вкусом, лаконично, но согласитесь, что этого очень мало. Данные кнопки сделаны под англоязычный интернет, у нас же, наряду с этими социальными сетями, пользуются даже большим успехом наши, русскоязычные сети. К сожалению, в рунете нет хороших полноценных решений для интеграции кнопок социальных сетей в блоги на Blogger Blogspot. Для WordPress, например, чего только не придумали, а вот нашу любимую платформу обходят стороной. А так хочется, чтобы наши блоги достойно стояли в одном ряду с блогами на WordPress. Да и умельцев почему-то очень мало, кто мог бы взять и сделать это. А зря, это имело бы очень большой успех. Потому что даже то, что я сегодня вам предложу, не является идеальным решением.
Решение я нашла в одном блоге и в конце этой статьи дам ссылку, а так объясню, почему я решила написать свою статью. Дело в том, что я доработала тот код под свой вкус, внесла некоторые изменения, о которых и упомяну в конце. А вы уж сами решите, пользоваться моим решением, или тем, которое предложено в том блоге. Но перейду к делу.
Вот как могут выглядеть кнопки на вашем блоге.
Почему “могут”? Потому что вы можете сами менять внешний вид кнопок, сделать под свой вкус, под свой дизайн блога. Они могут быть другого цвета, формы, в другом порядке. Я постараюсь максимально подробно все описать, чтобы вы могли сами менять их на свое усмотрение.
Идем в Инструменты блога, на вкладку Дизайн – Элементы страницы – Сообщения блога – Изменить. И ставим галочку Показывать копки для публикации. Но нам не нужно, чтобы эти кнопки видели читатели, ведь мы будем использовать собственные кнопки. Поэтому идем на вкладку Изменить HTML. Ставим галочку Расширить шаблоны виджета и находим код:
Лучше эти строки закомментировать, чем использовать в стилях шаблона display:none. Если вдруг вы не нашли эти строки в своем шаблоне, то не мучайтесь, а посмотрите, отображаются ли эти кнопки в самом блоге. Скорее всего нет. А значит, у вас все готово. Дело в том, что когда разработчики внедрили свои кнопки, не во всех шаблонах они отображались, а чтобы начали отображаться, нужно было добавить в шаблон именно тот код, который мы перед этим закомментировали. Если все же кнопки в блоге есть, а вы не можете их найти в шаблоне, то будьте внимательны и поищите ещё раз.
С этим справились. Я решила не выкладывать весь код кнопок, а сделала вот такой файл. Открываем его. Это обычный блокнот. Смотрим. Так выглядит код полностью с моими комментариями. Давайте разберем подробнее, как строится код каждой кнопки. Это очень просто. Вам только нужно понимать, какой код имеет ссылка и изображение на языке HTML
Если вы впервые сталкиваетесь с кодом, то рекомендую ознакомиться с этой статьей.
В файле я специально сделала комментарии, которые показывают, начало кода каждой кнопки, для того, чтобы вы могли переставить кнопки местами, просто вырезав и вставив код в другое место.
Особое внимание обращаю на код кнопки добавления в закладки. У меня это последняя кнопка. Покажу его здесь
Для этого идем на их сайт, выбираем самую простую кнопку, соглашаемся зарегистрироваться, чтобы получать статистику и жмем на большую оранжевую кнопку.
Прежде, чем вы получите код кнопки, вам нужно будет внести какие-то данные, подтвердить регистрацию через электронную почту, и в итоге вы получите, примерно такой код:
Прежде, чем мы установим код наших кнопок в блоге, необходимо сразу определить стиль отображения кнопок, чтобы сразу после вставки они органично смотрелись на страницах блога. Тут меня ожидало небольшое разочарование. Дело в том, что в некоторых шаблонах из дизайнера шаблонов по умолчанию у картинок прописана рамка в один пиксель. Вот как некрасиво это получается, видите маленькие белые уголки у каждой кнопки:
Мне пришлось ковырять шаблон, чтобы полностью избавить от подобных рамок. Если у вас шаблон из той же серии, что и у меня, и вы готовы избавиться от портящей впечатление рамки, то находим этот код:
После этого уже можно и внести стиль для кнопок. Находим код:
]]></b:skin>
и перед ним вставляем этот:
Ну и теперь самое главное, куда вставлять весь код кнопок в шаблон. На мой взгляд, самое идеальное место – это, естественно, в конце каждой статьи. Открываем вкладку Дизайн-Изменить HTML и находим этот код:
На этом размещение кнопок социальных сетей можно считать завершенным. Надеюсь, я вас не запутала. Будут вопросы, спрашивайте в комментариях. Код проверен на трех блогах, на 2-х разных шаблонах. Все должно работать.
Теперь вернемся к источнику, где я нашла этот код. Вот ссылка на страницу. К моему большому сожалению, сейчас блог потихоньку умирает, т.к. не обновлялся с июля месяца.
Немного расскажу, какие есть отличия между кодами.
Как я выше заметила, я решила для Twitter и Blogger использовать код разработчиков. В случае с твиттером из-за того, что в том варианте не сокращаются ссылки, но зато в сообщение есть RT, так что решайте сами. В случае с Blogger – в предложенном коде отправляется одна только ссылка, в «моем» же варианте после ссылки идет небольшой кусочек начала статьи, что и выглядит приятней и избавляет блоггера (который решил опубликовать у себя ссылку) от лишних телодвижений.
[ads1]Так же, практически ко всем кнопкам я добавила код, благодаря которому ссылки открываются в небольшом окошке. Что и смотрится аккуратней, и, опять же, наш читатель не уходит на другой сайт, а остается в нашем блоге. Не удалось сделать только для Twitter, почему то никак не хочет получаться, и не сделала для ЖЖ, т.к. не имело смысла. Были и другие мелочи, о которых не имеет смысла писать. Так что выбор за вами.
Если вам понравились мои кнопочки, то вот архив с картинками. Вы можете, как пользоваться моими, так и загрузить эти же кнопки в свой веб-альбом, а в код поместить адрес своих картинок. Или вообще придумать свои личные кнопки.
P.S. Дополнение через час после публикации статьи.
Прошу прощения у всех читателей, которые могли уже успеть прочитать статью. Вот так бывает, поторопишься и совсем из головы вылетит. В шаблон необходимо вставить ещё один код. Он полностью взят с того блога, на который я дала ссылку, и необходим для удобства пользователей Яндекс Блогов Я.ру. Вот этот код:
Доброго дня, читатели блога SEO-Дилетанта. Я всегда получаю много вопросов от вебмастеров, владельцев сайтов и блогеров об ошибках и сообщениях,…
*Рекламный обзор Доброго дня, читатели Блога SEO-Дилетанта. Кнопки «Поделиться» и «Подписаться на обновления» необходимы любому сайту для…
Доброго дня, читатели блога SEO-Дилетанта. На днях* в августе 2016 года я полностью перевела свой блог на защищенный протокол…
Доброго дня, читатели блога SEO-Дилетанта. Обычно подобные посты пишут в конце года, и я готовила его в декабре, но не успела…
Доброго дня, читатели Блога SEO-Дилетанта. В сети множество статей о создании и настройке блога на WordPress. Каждый автор видит…
Доброго дня, читатели блога SEO-Дилетанта. О том, как выбрать хостинг, написано немало статей. Только в Яндексе на данный…
This website uses cookies.
View Comments
Катя привет.Ты прямо как мысли мои читаешь.Решила я себе тоже кнопки социальные поставить и пишу поставить соц кнопки в блогер и что мне выдал наш любимый Гуглик???Товю статью.Когда посмотрела какого числа пост удивилась.Прям как в яблочко честно.Пока поставила обычные т.к. времени нема делать как у тебя,но когда разгребусь сделаю красивенькие кнопочки ,по твоему руководство очень отлично всё написала.Спасибо как всегда.
Kuzuxa, не знаю, как насчет моих телепатических способностей, а вот в способностях гугла ты сегодня убедилась. Это был быстрый поиск гугла, который находит самые свежие материалы по запросам, которые вводит пользователь в строку запроса. Такое же есть и у Яндекс. А в быстром поиске участвуют те сайты, которые часто обновляются, и в день публикации можно получить несколько переходов даже по очень конкурентным запросам. Как я писала в недавней статье, что как только я стала часто публиковать статьи, у меня сразу стал увеличиваться поисковый трафик.
Катерина, Ваш блог пора переименовывать в блог "СЕО ГУРУ" или "СЕО Сенсея".
Кнопки красивые получились, но путь установки слишком тернист для меня, подожду попроще решения этого вопроса, тем более что соц сети меня не очень интересуют.
Спасибо, Oleg. Конечно, подождите, но хочу сказать, что кнопки устанавливаются очень просто, а я как всегда постаралась все подробно разжевать, поэтому кажется сложно.
меня вполне устраивает то, что есть у меня в блоге, вот только рвсположила в конце страница. не знаю, как вставить, чтобы было в конце каждого поста.
Kladez-zolota, а вам мой вариант и не подойдет, т.к. он для Blogger, а у вас WordPress. Но для вас есть решение в виде специального плагина, посмотрите на сайте однойкнопки, там это есть.
Спасибо.
А я использую Код - одна кнопка, я так думаю особой разницы нет? кроме визуальной. Единственное что мне не нравится, то что он располагается под комментариями, что очень плохо, как не настраивал, все равно в самом низу поста(
http://iamhappinessnow.blogspot.com/2010/10/blog-post.html
Дмитрий, разница, хоть и несущественная, но есть.
В одной кнопке нет Blogger
Однакнопка открывает новые полноценные вкладки (или окна, у кого какие настройки браузера), в моем же коде открываются небольшие окошки под размер рабочего поля.
Ещё разница в том, что в однойкнопке, что есть, то есть, а в моем коде кнопок можно убрать не нужное, а в будущем, может добавится что-то новое, другими словами, предложенный мной вариант более гибок в настройках.
И да, внешний вид. Однукнопку вы никак не измените, эти же кнопки можно изменить как душе угодно.
В принципе, конечно, это мелочи, и дело вкуса каждого.
по поводу того, что у вас кнопки не в том месте - плохо стараетесь, не в то место ставите. Прочитайте, в какое месте рекомендую я установить свой код, и попробуйте вставить туда свой.
И ещё, как вариант, найдите строчку с этим кодом
post-footer-line post-footer-line-3
и сразу после его окончания, должен завершиться скобкой >вставьте свою кнопку.
спасибо большое, все таки буду ставить Ваши кнопки, они гораздо лучше))
Спасибо, мне приятно:)