четверг, 18 ноября 2010 г.

Создаем кнопки социальных сетей на 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. Недавно где-то мельком прочел, что в итернете существует сервис, где можно найти код кнопки для "Одноклассников". Найду - расскажу.




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

9 комментариев:

  1. А у вас ссылка на "замечательный блог" не рабочая. Поправьте, пожалуйста:). И большое спасибо за распространение столь важной информации для многих блоггеров, ведущих свой блог на Blogger

    ОтветитьУдалить
  2. Большое спасибо за эту статью! Очень познавательно! Сейчас буду разбираться и ставить! Хотелось бы еще статью про теги (рубрики, странички, ну чтобы все упорядоченно было на блоге) почитать! А так очень интересно!

    ОтветитьУдалить
  3. Олег Олегович, в каждом блоге на нашем blogspot есть служба "Поиск по блогу"( у меня расположен в самом низу), введите вопрос, поищите. Например: Создание раздела "Рубрики"... Все получится :)
    Аналогично и другие вопросы. Не все на все найдется и не так много, как в популярных поисковиках, но все же...
    Вот еще идея создания рубрик http://amateurblogger.ru/2010/11/kak-sdelat-rubriki-blogspot-blogger.html

    ОтветитьУдалить
  4. Спасибо за информацию, просто я вообще зеленый в этих делах - много чего не получается ещё))

    ОтветитьУдалить
  5. огромное спасибо! Я с этими кнопками отмучился сутки неотходя от компа. и вот они становятся и у меня! +

    ОтветитьУдалить
  6. Я понимаю, как это трудно для начинающего, особенно если в первый раз заходишь на станицу "Изменить HTML". Рад и поздравляю.

    ОтветитьУдалить
  7. жаль но эти красивые кнопки выпадают(сами рисунки не отображаются).
    у меня вчера вконтакте выпала а у вас сегодоня в мой мир.
    Поэтому я решил поставить кнопки от Яндекса - поделиться!

    ОтветитьУдалить
  8. Странные вещи происходят у тебя, однако. Сейчас проверил - все работает. И в "мой мир" - тоже...
    Ты ничего не натворил лишнего в корневой папке?

    ОтветитьУдалить

Понравился блог - подпишись на обновления!

Введите Ваш emai-адрес:

Популярные сообщения

Related Posts Plugin for WordPress, Blogger...