Тема: Социальная всплывающая кнопка
Респект АлаичЪ, спасибо за твои дела и советы, благодаря чему у многих сайты в плане оптимизации стали походить на человеческие ))
Не знаю кому обратиться, первое что пришло на ум твой сайт и твоя отзывчивость и отзывчивость твоих посетителей помогать вебмастерам.
Недавно увидел на всем известном сайте Adme необычное применение социальной кнопки для ФБ.
Там два варианта.
1) Когда посетитель сайта не совершает никаких действий, всплывает социальное окошко
2) Когда страницу скроллишь вниз, при определенной дистанции от шапки сайта, всплывает сбоку социальное окно
Удобно она тем что привлекает внимание и помогает существенно увеличить лайки лучше чем стандартный Like Box от ФБ, но не назойлива, если пользователь не хочет видеть эту кнопку может нажать ссылку снизу (Спасибо, не показывайте мне эту штуку больше!) и окошко больше не будет выходить, аналогично если лайкнуть тоже исчезнет навсегда.
Попытался сам разобраться, поставил даже на сайт тестовый, все работает, но сложность в том, я не разбираюсь в Java Script и подключать 2 больших файла с лишним кодом глупо, а как убрать лишний код без понятий.
Нужно оставить только нужный код в js и css и сделать так чтобы и другие могли поставить к себе на сайт, получится отличная полезная фишка для твоего сайта в качестве материала для посетителей.
вот код который я взял с самого сайта:
<link href="http://iface.adme.ru/assets/styles-common-ab1bafada8e0f0af2d8f3903daa0606c0073bb90.css" rel="stylesheet" type="text/css" />
<main class="page">
<section class="content content-flex" id="js-article-content">
<!-- /Dialog Subscribe --><!-- Dialog Facebook Overlay -->
<div class="dialog" style="" id="js-dialog-social-overlay">
<div class="js-form-block">
<div class="js-block js-block-fb" style="display: none;">
<h3 class="d-title js-title js-title-default" style="line-height:40px; padding-bottom:20px; font-size:28px;display:none;">Ребят, мы вкладываем душу в AdMe.ru.<br />Cпасибо за то, что открываете эту красоту.<br />Спасибо за вдохновение и мурашки.</h3>
<h3 class="d-title js-title js-title-after-like" style="line-height:40px; padding-bottom:20px; font-size:28px;display:none;">Мы рады, что вам понравилось.<br />Присоединяйтесь к нам в Фейсбуке!</h3>
<p align="center" style="padding-bottom:15px; color:#444">Нажмите «Нравится», чтобы читать нас в Фейсбуке.</p>
<div class="d-social-widjets" align="center" style="padding-bottom:0px; height:205px;">
<fb:like-box class="js-social-group" data-ga-skip-trigger="1" data-event-listener-id="js-dialog-social-overlay" data-event-like="Subscribe" data-event-dislike="Unsubscribe" href="http://www.facebook.com/www.adme.ru" width="445" height="180" show_faces="true" stream="false" header="false" show_border="false" data-ga-category="FacebookGroupOverlay" data-ga-action="Subscribe"></fb:like-box>
</div>
</div>
<div class="js-block js-block-vk" style="display: none;">
<h3 class="d-title js-title js-title-default" style="line-height:40px; padding-bottom:20px; font-size:28px;display:none;">Ребят, мы вкладываем душу в AdMe.ru.<br />Cпасибо за то, что открываете эту красоту.<br />Спасибо за вдохновение и мурашки.</h3>
<h3 class="d-title js-title js-title-after-like" style="line-height:40px; padding-bottom:20px; font-size:28px;display:none;">Мы рады, что вам понравилось.<br />Присоединяйтесь к нам Вконтакте!</h3>
<p align="center" style="padding-bottom:15px; color:#444">Нажмите «Подписаться», чтобы читать нас Вконтакте.</p>
<div class="d-social-widjets" align="center" style="padding-bottom:0px; height:250px;">
<div style="border:1px solid #bebebe; width: 445px; height:217px; padding:2px 1px 1px 1px; overflow:hidden">
<div id="js-vk-group-overlay" class="js-vk-group js-social-group" data-ga-skip-trigger="1" data-event-listener-id="js-dialog-social-overlay" data-width="445" data-height="217" data-ga-category="VkGroupOverlay" data-ga-action="Subscribe"></div>
</div>
</div>
</div>
<div class="d-auth-link">
<a href="#" class="js-social-overlay-dont-show-me" style="font-size:12px; text-decoration:none; border-bottom:1px dashed #000">Спасибо, я уже с вами, всё круто!</a>
</div>
</div>
<div class="js-message-block" style="display:none;">
<h3 class="d-title">Спасибо. Вы великолепны!</h3>
</div>
</div>
<!-- /Dialog Facebook Overlay -->
<!-- /Facebook like -->
<div class="fixed-like-box js-fixed-like-box" data-ga-category="FacebookPopup" data-ga-action="Shown">
<div class="d-close" id="js-fixed-like-box-close" title="Close" data-ga-category="FacebookPopup" data-ga-action="Close"></div>
<a alt="" href="https://www.facebook.com/www.adme.ru" title="" target="_blank" style="display:block; font-size:14px; line-height:18px; text-align:left; width:250px; padding:10px 0px 10px 20px; text-decoration:none;">Ребят, мы вкладываем душу<br/>в AdMe.ru. Cпасибо за то,<br/>что открываете эту красоту.<br />Спасибо за вдохновение и мурашки.</a>
<p style="color:#444; padding:10px 0px 10px 20px; text-align:left;">Нажмите «Нравится», чтобы читать нас в Фейсбуке.</p>
<div class="fb-like-box" data-event-like="Subscribe" data-event-dislike="Unsubscribe" data-href="https://www.facebook.com/www.adme.ru" data-width="300" data-height="258" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false" data-ga-category="FacebookPopup" data-ga-action="Subscribe"></div>
<a href="#" alt="" title="" id="js-fixed-like-box-hide" class="hide-box" style="display:block; text-align:left;padding-left:20px; padding-bottom:10px; color:#bebebe;" data-ga-category="FacebookPopup" data-ga-action="Close">Спасибо, не показывайте мне эту штуку больше!</a>
</div>
<script type="text/javascript" src="http://iface.adme.ru/assets/js-common-ab1bafada8e0f0af2d8f3903daa0606c0073bb90.js"></script>
<script type="text/javascript" src="http://iface.adme.ru/assets/js-common-footer-ab1bafada8e0f0af2d8f3903daa0606c0073bb90.js"></script>
<!-- /Facebook like -->