Выпадающая панель фан-страницы Facebook в блоге.

фан-страница фейсбук в блоге
Доброго времени, суток всем кто читает мои шпаргалки. Не будем сегодня поднимать тему о том, как с помощью социальной сети Facebook можно продвигать ваш блог или сайт. Такой информации в сети очень много. Хотела написать отдельный пост о том, как создать свою страницу в этой социальной сети.
И всё же решила порекомендовать вам сайт М. Шакина, где он в этом сообщении очень подробно описывает весь процесс создания такой фан-страницы.

Немного добавлю, чтобы было понятно. Профиль в сети и такая страница-это совершенно разные вещи. С помощью её мы имеем возможность продвигать свой сайт, продукт, товар. Собирать базу поклонников, подписчиков. Создать себе целевую аудиторию. И многое другое.

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

Установка не составит особого труда. Чтобы посмотреть, как это будет выглядеть
нажмите здесь  Справа на панели наведите  на значок Facebook. Буду очень признательна, если тут же порекомендуете мою страницу, нажав на значок нравится, или присоединитесь к ней. Создала я её не так давно. Так что присоединившихся ещё мало. Если вас заинтересовала установка такой панели давайте приступим.

В первую очередь вы должны убедиться установлена ли у вас библиотека jQuery. Кто не знает, как это сделать, советую прочитать это сообщение. Ну, а если давно ведёте блог и уже установлены слайдеры, менюшечки и всякие выскачки, значит код джейкверри уже есть. Для тех у кого такого кода нет, копируйте его и вставляете в шаблоне перед закрывающимся тегом </head>. Вот он-

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

Далее заходим во вкладку дизайн, добавить гаджет, HTML/JavaScript и вставляем туда следующий код

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://sites.google.com/site/moaspargalocka/home/ikonki/icon_facebook.png ") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="######&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe></div></div>


В коде вместо решёток красного цвета вставьте адрес своей фан-страницы. Зайдите на неё и в строке браузера скопируйте этот адрес. Должно быть что-то такого вида.

http://www.facebook.com/plugins/likebox.php?href= https://www.facebook.com/pages/%D0%A8%D0%BF%D0%B0%D1%80%D0%B3%D0%B0%D0%BB%D0%BA%D0%B8-%D0%B1%D0%BB%D0%BE%D0%B3%D0%B5%D1%80%D1%88%D0%B8/378331019002882

 Вот и всё. А там, где участок кода выделен синим цветом, эта картинка. Можете оставить такую же, а можете подобрать свою. Вот такой вариант красиво смотрится на боковой панели.
Адрес этой картинки-

http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png

Видите, всё достаточно просто. Очень советую создать вам свою фан-страницу и присоединить её к своему блогу. А о том как встроить в блог запись из социальной сети В Контакте можно узнать здесь. Я же на этом прощаюсь с вами. 


Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

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

  1. Ну Вика спасибо! Ты прямо читаешь мысли! Я давно приметил подобную фишку но никак времени не находил поискать решение а тут все готовенькое.
    И еще вопрос! А можно также другие соц сети встроить или это только под ФБ?

    ОтветитьУдалить
  2. Ну значит мы с тобой на одной волне. А насчёт других. думаю можно. Сама задалась таким вопросом. Тут с дизайном замутила. Разгребу немного. Да ты и сам думаю сможешь попробовать.

    ОтветитьУдалить
  3. Вика, привет! Попробовала сегодня поставить себе этот гаджет... надпись поставила вертикальную, панель выпадает, но белая... где я могла ошибиться, может неправельно скопировала адрес фан-странички?

    ОтветитьУдалить
    Ответы
    1. Кристина, скорее всего. Зайди на страницу, в окне браузера копируй код и вставляй. Именно между кавычек. и & Сейчас попробовала на другом блоге -работает код.

      Удалить
    2. попробовала ещё раз всё с 0... не получается, видно сегодня не мой день. Отложу пока. Пойду что-нибудь другое поставлю. :)))

      Удалить
  4. Кристина, возможно у тебя не подключена библиотека jQuery. в этом сообщении я напомнила о ней выше. А более подробно здесь http://www.shpargalochki.ru/2014/07/biblioteka-jquery-v-bloge.html

    ОтветитьУдалить
  5. Да я вроде всё подключила и библиотеку тоже. На днях попробую ещё раз, на свежую голову. :))

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

Пользовательский поиск