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



Как установить в блог плавающую панель социальной сети Facebook

Всем доброго времени суток! В предыдущем сообщении Вы получили возможность установить плавающую панель Twitter. Ну а как же мы обойдемся без Facebook. При наведении курсора мыши панель выдвигается, и появляется Ваша личная страничка на Facebook. 

Итак, нам надо скопировать и вставить два кода: идем в шаблон-изменить шаблон, находим закрывающий тэг </head> и выше вставляем вот этот код:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

У кого в шаблоне уже вставлен такой код (посмотрите внимательно перед закрывающим тэгом </head>), тогда копируете только нижний и вставляете в черновике blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("http://2.bp.blogspot.com/-v8cXapBKGks/Uxd1DL8XHiI/AAAAAAAABU0/b33YzbUBYnw/s1600/et-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbdblogov&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:300px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>


Выделенное розовым-это адрес странички в Facebook; Синим-размеры плагина Facebook. Виджет очень капризный, старайтесь не менять размеры и расположение.

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


Автор статьи ✎ Olga Protasova Выпуск ✹ 10/16/2013 Ярлыки ►


Открыть комментарии →

10 коммент. :

  1. Ответы
    1. Павел, должна выдвигаться. Проверьте внимательно ещё раз, правильно ли скопировали код. На блогах Blogspot ручаюсь, протестировано на всех своих блогах. На других платформах не знаю.У Вас блог на Blogspot? Какой шаблон?

      Удалить
    2. Павел, пробуйте еще раз установить виджет. Немного исправила код. Проверила, у меня нормально работает. Все выдвигается, впрочем как и с тем кодом тоже.

      Удалить
  2. Ольга,вставил ваш новый код и к сожалению не помогло (( вот адрес демоблога - http://demoversionng.blogspot.ru/. Шаблон готовый брал

    ОтветитьУдалить
  3. Кстати может от браузера зависит ? У меня Яндекс,Амиго и Уран ( Гугл )

    ОтветитьУдалить
    Ответы
    1. Просмотрела в браузерах Опера и Яндекс-не выдвигается, в Google все нормально. И что удивило, что даже в ИЕ-8 панель работает. Вывод-не все браузеры поддерживают этот скрипт. У меня в блоге есть статья "Всплывающая панель Facebook" для blogger, эта работает во всех браузерах, во всяком случае у меня. К сожалению такое часто встречается, то шаблон не принимает, то как видим браузер. Я в этот блог тоже не могу вставить многие скрипты, шаблон не принимает, хотя и сохраняет, но все равно не отображается.

      Удалить
    2. Здравствуйте Павел. По адресу блога, что Вы указали, посмотреть не могу. Google пишет, что указанного блога не существует. Скрипт виджета Facebook работает не во всех шаблонах.

      Удалить
  4. Ольга большое спасибо,сейчас работает почему то ! )) www.ngradioshowrussia.org
    Вы что-то изменили ?

    ОтветитьУдалить
    Ответы
    1. Да Павел, я изменила код. Я Вам написала в комментах Google. Теперь и у меня работает во всех браузерах. Проверяла в Google, ИЕ, Опере, Мазиле, Yandex.

      Удалить
  5. Спасибо ! Помогите теперь с гугл+ ! Хотел виджет установить ниже фейсбучной,но не получается...

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


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *