Создаем кнопки социальных сетей на blogspot

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

Казалось, что это невозможно сделать на нашей платформе, но я ошибался.
Недавно я все же нашел статью на замечательном блоге, в котором и почерпнул необходимую мне информацию для выполнения задуманного мной плана.
На blogspot администраторы недавно такие кнопки установили( за что им большое спасибо), но выглядят они невзрачно, имееют маленькие, на мой взляд размеры и ориентированы (по понятным причинам) на англоязычную аудиторию.
Поскольку я и мои читатели в своем большинстве к такой категории не относятся, возникла необходимость добавления кнопок в русскоязычные социальные закладки.
Процесс рисования и создания кнопок на свой вкус и цвет, а также их подбор, я опущу. Об этом вы можете более детально прочесть в вышеупомянутом блоге. Я лишь коснусь двух вопросов:

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

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

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

<div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div>

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

<!--<div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div>-->

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

<div class="post-body entry-content">

<data:post.body>

<div style="clear: both;">

</div>

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

<div class="post-body entry-content">

<data:post.body>

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

<!--AddThis-->

            <a class='addthis_button' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><img alt='в закладки' src='http://lh6.ggpht.com/_G92voTj-yF0/TLLOAIhLM6I/AAAAAAAAAss/MHg_jrwXQ18/addthis.png' /></a>

<script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script>

<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=amateurbloger' type='text/javascript'/>

        </div>

    </div>

</b:if>

И последнее, для того, что бы кнопка Яндекса работала на незалогиненых на этом сервисе посетителей, необходимо вставить код:

script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

  $("a.shareme[href^='http://my.ya.ru']").attr("href", function() {

      return "http://passport.yandex.ru/passport?mode=auth&amp;retpath=" + escape(this.href);

  });

});

</script>

Вставить его нужно перед закрывающим тегом </head>.
Искренне желаю удачи!
P.S. Недавно где-то мельком прочел, что в итернете существует сервис, где можно найти код кнопки для "Одноклассников". Найду - расскажу.

заказать раскрутку сайта