Кнопки социальных сетей на блогах Blogger (blogspot)

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

Речь идет об установке кнопок типа «Нравится» или «Поделиться» от различных социальных сетей.

Мне нравится

На своем старом блоге я писал пост «Социальные сети – прихоть или необходимость?» где приводил аргументы, почему для продвижения бизнеса сейчас уже просто нельзя игнорировать такой огромный сегмент потенциальных клиентов, как социальные сети. А также напомню пост уже на этом блоге «Интернет-бизнес сегодня»

И если раньше блоггеры уделяли много внимания тому, чтобы прогнать блог по социальным закладкам, каталогам и трастовым сайтам, то сейчас нужно все больше и больше внимания уделять взаимодействию с потенциальными клиентами, читателями и бизнес-партнерами через социальные сети. Ну в самом деле, если у вас есть Сайт Для Людей (СДЛ), то вам же нужно чтобы в первую очередь его читали люди (а не поисковые роботы. Это тоже важно, но… на втором месте)  А где больше людей — на сайтах соц.закладок или каталогов? Или в соц.сетях? Ответ очевиден. Вот почему надо синдицировать ваше интернет-представительство (блог, сайт) с социальными сетями.

Какие соц.сети имеют наибольшее влияние?

  • Facebook
  • Twitter
  • Вконтакте
  • Мой Мир
  • Одноклассники

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

Каждый из этих сайтов предлагает установить свои кнопки на блог. Но вот в чем закавыка… Если блог находится на домене 2-го уровня на платформе WordPress, то тут нет никаких сложностей — поставил один из множества подходящих плагинов, и вопрос решен.

А вот если у вас блог находится на платформе Blogger (Он же Blogspot от Google), то тут не все так просто.

Задача усложняется тем, что надо не просто найти, скопировать и установить нужные коды этих кнопок, а еще и сделать так, чтобы эти кнопки выглядели стильно и красиво (были расположены в один ряд горизонтально, имели одинаковый размер по высоте, не наползали друг на друга и т.д). Да еще и надо найти нужное место, куда их вставить — вот в чем вопросы!.

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

И я нашел, как это сделать!

Интернет не без добрых (и умных!) людей. Большое спасибо персонально Екатерине Тарасовой и Надежде Юдиной, чьими подсказками я пользовался.

Теперь у меня на другом блоге (которому я на днях дал второе дыхание) эти кнопки выглядят вот так

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

Итак, что мы делаем?

Для начала открываем панель управления блогом на blogspot, слева из меню выбираем раздел «Шаблон» и затем —  «Изменить XTML»  Откроется окно с сообщением и там нажимайте на кнопку «Приступить». И затем надо нажать на галочку «Расширить шаблоны виджета» (Это надо сделать обязательно, иначе не сможете правильно отредактировать шаблон)

В куче этих разных символов и закорючек нам понадобятся три места. В эти три разные места мы будем вставлять разные части разных кодов. Будьте внимательны и сосредоточенны предельно! Если что-то сделать некорректно и поторопиться сохранить изменения, то можно сделать неработоспособным весь блог. Поэтому, ПЕРЕД тем как сохранить изменения, нажмите на кнопку «Просмотр». Если все открывается нормально, то изменения можно сохранять. Если же открывается страница, на которой написано какое-то предупреждение, то либо откорректируйте вставленный вами код (если понимаете, как), либо отменяйте сделанные вами изменения!)

Сейчас я приведу вам список возможных сервисов, с которых можно получить коды кнопок для вставки.

Вы уж сами выбирайте, какие вам более по душе и по нраву. Понятно, что все и не нужны, выберите самые нужные для вас:

1. google_plus_1  Кнопка +1 от Гугла

2. fb_like  Кнопка «Мне нравится» от Фейсбука

3.  vk_like Кнопка «Мне нравится» от Вконтакте

4.  twitter Кнопка «Твитнуть» от Твиттера

5.  mail_ru Кнопки «Нравится» и «Класс» от Мой Мир и Одноклассники. (С недавних пор эти сайты имеют одного хозяина, поэтому и страница, где получают эти коды кнопок — одна на два сервиса)

6. Кнопка для публикации ссылок в Я.ру

7. Кнопка «Поделиться» от Мой Круг Яндекса

8. Кнопка «Share» от LinkedIn

Я остановился на первых пяти сервисах (но шесть кнопок получается).

Принцип такой.

Надо в любом текстовом редакторе (типа Блокнот или NotePad или WordPad) создать специальный контейнер для XTML-кодов кнопок. Потом вставить этот код в блог. И еще вставить специальный код, чтобы кнопки располагались горизонтально.

<!— Place buttons here. —>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’social-button’>
<!—Мой мир—>
<div id=’bmail’>Код кнопок Мой Мир и Одноклассники</div>
<!—Гугл плюс—>
<div id=’bgoog’>Код кнопки +1 от Гугла</div>
<!—Twitter—>
<div id=’btwi’>Код кнопки Твиттера</div>
<!—Facebook—>
<div id=’bface’>Код кнопки Фейсбук</div>
<!—Вконтакте—>
<div id=’bvk’>Код кнопки Вконтакте</div>
</div>
</b:if>

Затем переходим на сайты для получения кодов кнопок и вставляем полученные коды в выделенное красным место.

У меня итоговый код контейнера выглядит так:

<!— Place buttons here. —>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’social-button’>
<!—Мой мир—>
<div id=’bmail’><a class=’mrc__plugin_uber_like_button’ data-mrc-config='{&apos;cm&apos; : &apos;1&apos;, &apos;ck&apos; : &apos;3&apos;, &apos;sz&apos; : &apos;20&apos;, &apos;st&apos; : &apos;1&apos;}’ 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=’bgoog’><div class=’g-plusone’ data-size=’medium’/>
<script type=’text/javascript’>
window.___gcfg = {lang: &#39;ru&#39;};

(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script></div>
<!—twitter—>
<div id=’btwi’><a class=’twitter-share-button’ data-lang=’ru’ data-via=’Tavria‘ href=’https://twitter.com/share’>Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script></div>
<!—facebook—>
<div id=’bface’><div class=’fb-like’ data-layout=’button_count’ data-send=’false’ data-show-faces=’false’ data-width=’450’/></div>
<!—Вконтакте—>
<div id=’bvk’><div id=’vk_like’/>
<script type=’text/javascript’>
VK.Widgets.Like(&quot;vk_like&quot;, {type: &quot;button&quot;, height: 20});
</script></div>
</div>
</b:if>

Выделенный мной логин Tavria в коде кнопки Твиттера замените на Ваш!

После этого переходим в админку блога, включаем поиск на странице клавишами Ctrl+F и в появившемся окошке поиска вставляем:

<data:post.body/>

Сразу после этой строчки нам и надо вставить ту конструкцию, которую мы сотворили (из программы Блокнот)

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

]]></b:skin>

и перед ним добавляем следующее:

#bmail {
float:left;
width: 235px;
}
#bgoog {
float:left;
width: 70px;
}
#btwi {
float: left;
width: 95px;
}
#bface {
float: left;
width: 130px;
}
#bvk {
float:left;
width: 90px;
}

 

Надо сказать, что у меня код ]]></b:skin> обнаружился в двух местах и мне пришлось методом научного тыка определять, в какое из двух мест вставлять. После первого места кнопки не работали, а когда вставил после второго, то все заработало, как надо.

Значения ширины, например, width: 90px; подбирал экспериментальным путем для каждой кнопки. Если этого не делать, то кнопки могут либо налезать друг на друга, либо будет большое расстояние между ними, либо вообще могут перестать отображаться (как например, у меня было с кнопкой от Одноклассников). Если же у вас отображается все корректно и так, то все ОК.

Да, и еще важный момент.

Когда будете получать код кнопки от Фейсбука, то обратите внимание, что он состоит из 2-х частей:

Код кнопки "Нравится" от Фейсбук

Так вот, вторую часть кода мы вставили в созданный нами контейнер. Но для того чтобы эта кнопка корректно работала, нам надо первую часть кода вставить сразу послу открывающего тега <body> (Тоже можно воспользоваться поиском через Ctrl+F и найти место, где это вставить.)

Похожая ситуация и со вставкой кода кнопки от Вконтакте.

Код кнопки "Нравится" от Вконтакте

Только там во-первых, первую часть кода надо вставлять после тега <head>, а, во-вторых, предварительно надо авторизоваться на сайте, и самое главное — создать специальное приложение, к которому будет осуществляться привязка вашего блога. Затем вы получите ID вашего созданного приложения и к нему уже будет привязана и кнопка «Нравится».

Чтобы создать такое приложение, пройдите по ссылке.

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

Ну вот вроде и все! Должно получиться!

 

Желаю успехов и остаюсь на связи,

Руслан Соловьев

Если понравился блог, можете подписаться на RSS, чтобы всегда быть в курсе новостей блога

Комментарии:

17 комментариев к Кнопки социальных сетей на блогах Blogger (blogspot)

  • Наталья Лесниковская  говорит:

    Руслан, как здорово, что ты делишься такими полезными вещами! Уверена, многие найдут это полезным и нужным!

    [Ответить]

    Руслан Соловьев Reply:

    Спасибо, Наташа!
    Для этого и пишу — чтоб многим было полезно и интересно.
    Тебе спасибо за коммент и «лайки» 🙂

    [Ответить]

  • Олеся Рахматулина  говорит:

    Наташа ты права, эта инф. полезная и нужная . Спасибо, Руслан!

    [Ответить]

    Руслан Соловьев Reply:

    Олеся, рад что заглянула ко мне на блог! И спасибо за коммент!

    [Ответить]

  • Людмила  говорит:

    Руслан, вы меня уговорили, надо заводить блог на этой платформе!

    [Ответить]

    Руслан Соловьев Reply:

    Людмила, я вроде и не уговаривал… 🙂
    Но если решили и там сделать блог, то выбор вполне оправдан — из бесплатных платформ для блогов, Blogspot — лучший вариант, профессиональная платформа для блогов. Да и индексируется хорошо. Есть и свои плюсы, и свои минусы, если сравнивать с WordPress.

    [Ответить]

  • Mike  говорит:

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

    [Ответить]

  • Наталия Гущина  говорит:

    Привет, Руслан! Тема очень актуальная, сама по началу искала информацию как поставить без плагинов и знаю, что информация если и есть, то новичку не понять, а у тебя мне показалось все понятно или доступно…или же мне так кажется на моем этапе развития 🙂

    [Ответить]

    Руслан Соловьев Reply:

    Наташ, привет! И спасибо за постоянство в чтении моего блога!
    На самом деле есть разница в установке кнопок на блог на Вордпресс и на Блогспот. У тебя — на Вордпресс. Я описал установку на Блогспот. Но сути это не меняет — кнопки «Лайков» на самом деле играют свою положительную роль.
    Кстати, у твоего твиттер-аккаунта за последнее время стало неплохо прибавляться количество фолловеров! 🙂

    [Ответить]

  • Dima  говорит:

    У меня не получилось 🙁 выдает ошибку при сохранении шаблона, даже скопировал ваш вариант все равно не сохраняет.

    [Ответить]

    Руслан Соловьев Reply:

    Дима, что пишет? Какую ошибку выдает?

    [Ответить]

    Dima Reply:

    Уже решил 🙂 все в порядке код рабочий, просто в коде ’ я заменил на ‘ из-за этого была ошибка. Но все же у меня не получилось поставить нужные мне кнопки, работает только готовые кнопки от яндекса, когда ставлю кнопки типа google+1, fb like, то они рекомендуют почему-то главную страницу, хотя нажимаю со статьи, при создании кнопок url не писал. Яндекс у меня стоит после причем его тоже пришлось изменять чтобы он рекомендовал выбранную статью с главной. Попробовал их вставить после поля так работает, но на главной их не видно, и причем когда есть комментарии под статьей кнопки пропадают, хочется добавить хотя бы google+1 чтобы он работал с главной страницы.

    [Ответить]

  • Маргарита Фукс  говорит:

    Спасибо, Руслан!
    100 лет назад…ставила все кнопки себе на блог и уже забыла, как все это делала… ))
    В последнее время, обратила внимание, что кнопки перестали работать-не отображают число лайков.
    Вот решила все переустановить, а как забыла.. )))
    Порылась в инете, а тут классная статья! Все доступно и понятно.
    Спасибо!

    Пошла переустанавливать, вдруг поможет… хотя, подозреваю, что в чем-то другом проблемка. 🙂
    Успехов, Русла!

    [Ответить]

  • Маргарита Фукс  говорит:

    Да.. лайкнула полезную статью, Руслан! 🙂

    [Ответить]

  • Константин  говорит:

    Ничто не стоит на месте. Сейчас можно было бы обновить кнопочки для Мой Мир@Mail.ru и Одноклассники, они в одном виджете, что и отмечалось автором статьи, но на блоге не реализовано. Да и кнопка для Я.ру есть новая с циферкой. В общем, было бы желание, а вариантов много 🙂

    [Ответить]

    Руслан Соловьев Reply:

    Константин, платформы для блогов на WordPress и на Blogspot — разные вещи. Я писал о кнопках для блогов на Blogspot, а Вы смотрите на мой блог на WordPress 🙂

    [Ответить]

  • Егор Плотницкий  говорит:

    Спасибо за ценный совет, установил — работает.

    [Ответить]

Оставить комментарий или два

Вы можете использовать HTML тэги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>