Выпадающая панель фан-страницы 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

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

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

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

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