Расскажу, как сделать такой же плавающий блок социальных кнопок, как у меня слева. Без применения плагинов.
Подключаем скрипты
Facebook — вставляем этот код:
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
После тега <body> вашей текущей темы.
Google Plus – код:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ru'} </script>
Также поставить после тега <body>.
Вконтакте
Переходим на страницу http://vk.com/dev и нажимаем «Авторизация и виджеты для сайта»
Далее выбираем «Мне нравится»
Добавляем свой сайт, выбираем «Миниатюрная кнопка, счётчик сверху»
Копируем только часть получившегося кода:
И вставляем его перед тегом </head>.
Интеграция самих кнопок
Теперь, вставляем сам код кнопок в тот файл, где вы хотите, чтобы они выводились – у меня они выводятся только на одиночных записях, поэтому я вставил их в файл шаблона single.php.
<div class="share1"><!--noindex--> <div class="share-item"><a href="http://twitter.com/share" class="twitter-share-button" data-text="" data-count="vertical" data-via="ВАШ_ЛОГИН" data-lang="en_US">Tweet</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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> <div class="share-item"> <div id="vk_like" style="margin: 0 auto;"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "vertical", height: 24}); </script></div> <div class="share-item" style="margin: 0 auto;"><div class="fb-like" data-send="false" data-layout="box_count" data-width="45" data-show-faces="false"></div></div> <div class="share-item" style="margin-left: 9px;"><a rel="nofollow" target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'nt' : '1', 'cm' : '1', 'ck' : '1', 'sz' : '20', 'st' : '2', 'tp' : 'ok', 'vt' : '1'}">Нравится</a> <script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script></div> <div class="share-item"><div class="g-plusone" data-size="tall"></div> </div> <!--/noindex--></div>
Обращаю ваше внимание, в коде твиттера (2 строка) нужно заменить ВАШ_ЛОГИН на свой.
После, в файл CSS вашей активной темы вставляем:
.share1 { background: #fff; border:1px solid #CFDEEF; border-radius:3px; box-shadow: 0 0 10px #909090; padding: 6px 6px 0px 6px; position: fixed; top: 100px; margin-left: -90px; margin-bottom:10px; z-index:100; width:63px; } .share1 .share-item { clear:both; overflow:hidden; margin: 3px 0px 3px 0px; z-index:1000; text-align:center; padding: 0px 0px 5px 0px; } .share1 .share-item:hover{ overflow:visible !important; } .share1:hover { background: #fff; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD; }
Если вы все сделали правильно, то плавающие кнопки уже будут работать. В качестве альтернативы можно использовать сервис share42.
Выгодно делать блок с плавающим контекстом)) Тем же яндекс директом
Спасибо. Скажи пожалуйста а не напишешь как сделать вот такой блок плавающей рекламы, как на сайте http://socialwoman.ru/love/dzhinsovaya-svadba/ там справа когда скролишь вниз после блока вконтакте появляется реклама по сайдбару и ползет до низа пока скролишь. Наверняка % заработка увеличивается т.к пользователь видит ее постоянно, а не пропускает в первом экране.
Думаю, плагин Q2W3 Fixed Widget или аналоги отлично справятся с этой задачей. (если мы говорим о wp)
Ели палки зачем столько времени тратить на такие пустяки, когда есть плюсо? http://share.pluso.ru/?new_a
Ссылок в кода там нет, если вы озабочены показателями тиц. Кнопки весьма удобные. Так почему бы их не использовать, спрашивается?
Разница в том, что Pluso — это поделиться записью, а то, что предлагаю я — это просто лайк/мне нравится/+1