Яндекс. Деньги

Яндекс. Деньги

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

Содержание.

  1. Самый простой: изменить настройки сообщения блога.
  2. Блок «Поделиться» от Яндекса.
  3. Кнопки от социальных сетей для блога на Blogspot.
  4. Код кнопки +1 от Google.
  5. Плавающая панель.
  6. Код кнопок закладок.

Самый простой: изменить настройки сообщения блога.

Blogger уже позаботился о социализации своей платформы и предложил необходимый минимум. На вкладке "Дизайн"-"Элементы страницы"-"Сообщения блога" устанавливаем галочку "Показывать кнопки для публикации". Но вид их будет невзрачным:


Чтобы картинки заиграли красками, в "Дизайн"-"Изменить HTML" перед ]]> добавим:
.sb-email {background-position: 0 -40px !important;} .sb-blog {background-position: -20px -40px !important;} .sb-twitter {background-position: -40px -40px !important;} .sb-facebook {background-position: -60px -40px !important;} .sb-buzz {background-position: -80px -40px !important;} a.share-button{ -moz-box-shadow: 0 0 1px #FFF inset; -webkit-box-shadow: 0 0 1px #FFF inset; box-shadow: 0 0 1px #FFF inset; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } a.share-button:hover { -moz-box-shadow: 0 0 4px #FFF inset; -webkit-box-shadow: 0 0 4px #FFF inset; box-shadow: 0 0 4px #FFF inset; } Итоговый результат.

Блок «Поделиться» от Яндекса.

Яндекс создал кнопку "Поделиться". Очень органично вписывается в блог: пример. Для её установки в "Дизайн"-"Изменить HTML", указав галочку "Расширить шаблоны виджета", после

<div class='post-footer-line post-footer-line-1'> добавляем необходимый код. Для корректной работы скрипта на Главной странице в него (у вас может быть другой) вносим выделенные жирным символы:
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir" expr:data-yashareLink='data:post.url' expr:data-yashareTitle='data:post.title'></div>

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

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

<div class='comments' id='comments'> Скрипты никак не хотели ложиться в одну линию и я их внесла в таблицу (конечный результат):
<table align='center' cellpadding='5'><tr><td>код</td><td>код</td><td>код</td><td>код</td><td>код</td></tr></table> Код соц. кнопок для блога на Blogger. Код соц. кнопок для блога на Blogger.

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

Добавить на Blogger кнопку "Сохранить" ВКонтакте.

Сначала взглянем на страницу разработчиков.
Там указаны пара вариантов:

  1. если нужно включить свои иконки:
    <a expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url'>Поделиться ВКонтакте</a> вместо слов "Поделиться ВКонтакте" добавляем изображение:
    <img src="адрес" border="0" alt="текст" width="значение" height="значение" />
  2. при применении стандартной кнопки: вначале нужно после <head> дописать:
    <script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?9" charset="windows-1251"></script> затем в нашу таблицу или другом месте шаблона указать:
    <div id='vk_al_share_button'/> <script type='text/javascript'>document.getElementById(&#39;vk_al_share_button&#39;).innerHTML = VK.Share.button(&#39;<data:post.url/>&#39;, {type: &#39;button&#39;}); </script> Обратите внимание на параметр type. В зазависимости от вида кнопки он может принимать значения: round, round_nocount, button, button_nocount, link, link_noicon.

Как сделать кнопку добавления в Twitter.

Вариантов много, но я остановилась пока на этих:

  • без применения скрипта:
<a expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;via=аккаунт_блога&amp;related=ваш_личный_аккаунт&quot;'><img src="http://a0.twimg.com/a/1296755102/images/goodies/tweetn.png" border="0" alt="tweetn" width="55" height="20" /></a> Здесь изображение вы можете подобрать любое.

Кнопка Одноклассников "Класс".

Страница с кодом. Алгоритм действий:

  1. после <head> включаем:
    <link href="http://stg.odnoklassniki.ru/share/odkl_share.css" rel="stylesheet"/> <script src="http://stg.odnoklassniki.ru/share/odkl_share.js" type="text/javascript" />
  2. в тег body добавляем выделенное жирным
    <body onload="ODKL.init();"> в результате чего мой код стал выглядеть как:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload="ODKL.init();">
  3. в том месте, где нужно установить кнопку пишем
    <a class='odkl-klass-stat' expr:href='data:post.url' onclick='ODKL.Share(this);return false;'><span>0</span></a>

Но мне интересно оформление без скрипта. Ссылки у нас имеют вид:

http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=http://shpargalkablog.ru/2011/02/sotsialnye-knopki-dlya-blogger.html но шаблон их не принимает. Заменим символ & на &. А дальше применим стандартную конструкцию:
<a expr:href='&quot;http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=1&amp;st._surl=&quot; + data:post.url'>Поделиться в Одноклассниках</a> Всё получилось! Ай, да молодца!

Кнопка "В Мой Мир".

Наиболее прост в реализации. Почему нельзя последовать его примеру? Отчего в других скриптах какие-то свои заморочки? Как всегда, начнём с официальной страницы. Далее два варианта:

  1. со счётчиком:
    <a class="mrc__share" href="http://connect.mail.ru/share">В Мой Мир</a> <script src="http://cdn.connect.mail.ru/js/share/2/share.js" type="text/javascript" charset="UTF-8"></script>
  2. без:
    <a expr:href='&quot;http://connect.mail.ru/share?share_url=&quot; + data:post.url'>Мой мир</a>

Кнопки от Facebook.

И ещё одна рассмотренная мною социальная сеть.
  1. "Сохранить":
    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title'> Facebook </a>
  2. "Мне нравиться": на данной странице устанавливаем нужные настройки в "Step 1 - Get Like Button Code":
    • поле "URL to Like" оставляем пустым,
    • "Layout Style" определяет вид кнопки,
    • флажок "Show faces" указываем, если нужно показывать аватары.
  3. жмём "Get Code",
  4. в полученном коде IFRAME меняем на выделенное:
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>

Перепостить в ЖЖ.

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

<form action='http://www.livejournal.com/update.bml' method='post' name='updateForm'><div style='display:none;visible:false'><br/><input class='text' expr:value='data:post.title' maxlength='100' name='subject' size='43' tabindex='15' type='text'/><br/><textarea cols='1' name='event' rows='1'>Оригинал найдете на сайте Шпаргалка блоггера: <a expr:href='data:post.url' expr:title='data:top.blogThisMsg'><data:post.url/></a><br/><data:post.body/></textarea></div><br/><input type='submit' value='ЖЖ'/><br/></form>

Можно также отправлять анонс, но без картинок и других мультимедийных документов:

<a expr:href='&quot;http://www.livejournal.com/update.bml?subject=&quot; + data:post.title + &quot;&amp;event=Оригинал можно найти на сайте Шпаргалка блоггера &quot; + data:post.url + &quot;: &quot; + data:post.body'>ЖЖ</a>

Запостить на LiveInternet.

А чёй-то не нашла страницы разработчика. Но тем не менее вот код:
<a expr:href='&quot;http://www.liveinternet.ru/journal_post.php?action=n_add&amp;cnurl=&quot; + data:post.url + &quot;&amp;cntitle=&quot; + data:post.title'><img alt='LiveInternet' border='0' height='18' src='http://img1.liveinternet.ru/images/attach/c/1//56/541/56541790_1268755849_86x18.gif' width='86'/></a> Если на странице будет использован тег description или keywords, то их содержание будет включено в текст в качестве цитаты.

Установить код кнопки +1 от Google.

Код кнопки +1 уже интегрирован в Blogger. За неё отвечают строки:

<b:if cond='data:top.showDummy'> <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div> </b:if>

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

Выбор параметров кнопки +1

Далее в шаблоне перед </body> пишем предоставленный скрипт:

<script type="text/javascript"> window.___gcfg = {lang: 'ru'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> В том месте, где должна отображаться кнопка +1 вносим
<g:plusone expr:href='data:post.url'></g:plusone>

Без скрипта.

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style="background: url(http://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite4-a67f741843ffc4220554c34bd01bb0bb.png) no-repeat 0 -720px; width: 33px; height: 20px; display: inline-block;">&amp;nbsp;</a>

Плавающая панель

В комментариях описан способ реализации плавающей панели. Начиная с 202 и по 209


Пока на этом всё. Готова ответить на вопросы.

Как сделать кнопку яндекс 590
Яндекс. Деньги 616
Как сделать стартовой страницей яндекс Компьютер для
Яндекс. Деньги 889
Настраиваемые кнопки в Яндекс. Почте / Блог компании
Яндекс. Деньги 401
Как установить кнопки социальных сетей Share и Яндекс
Яндекс. Деньги 827
Сделать Яндекс стартовой страницей автоматически
Яндекс. Деньги 324
Как быстро сделать форму оплаты или кнопку Яндекс
Яндекс. Деньги 47
Яндекс. Деньги 87
Яндекс. Деньги 66
Яндекс. Деньги 16
Яндекс. Деньги 53
Яндекс. Деньги 68
Яндекс. Деньги 92
Яндекс. Деньги 25
Яндекс. Деньги 57
Яндекс. Деньги 36

Похожие статьи