Меню Закрыть

Скрипт переключения по вкладкам в боковую панель (видеоурок)

Наконец добрался сделать последний видеоурок из серии создание страницы сайта в социальных сетях ВКОНТАКТЕ и FaceBook и установка удобного меню в боковую панель для переключения между виджетами подписки на страницы сайта в социальных сетях.

Сегодня как раз поговорим и посмотрим про последнее — установку скрипта меню переключения между виджетами. Результат его работы вы можете видеть вверху правой колонки моего сайта.

Собственно сам скрипт не представляет ничего особенного, написан за 5 минут на jQuery и мог быть реализован иначе, и лучше. Изначально я хотел реализовать его с помощью плагина к jQuery — jQuery-ui, но по каким-то причинам мне не удалось его подключить к uCoz, но разбираться мне было лень. К тому же дополнительный плагин — дополнительная загрузка в браузер пользователя, а я реализовал всё используя только jQuery.

Итак для начала вам необходимо посмотреть и выполнить инструкции из предыдущих видеоуроков:

1. Создание публичной страницы сайта вконтакте
2. Создание страницы сайта в facebook
3. Регистрация в Twitter
4. Трансляция rss ленты twitter в uCoz

Установка скрипта занимает всего пару минут! Для начала необходимо установить в верхнюю часть (после тэга , можно после тэга ) сайта все коды социальных сетей необходимых для запросов к API социалок:

Code

<!— код вызова вконтакте api —>
<script type=»text/javascript» src=»http://userapi.com/js/api/openapi.js?34″></script>

<!— код вызова facebook api —>
<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/ru_RU/all.js#xfbml=1»;
  fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

Затем туда же установить код переключателя написанного на jQuery:

Code

<!— скрипт переключателя —>

<script type=»text/javascript»>  
   
jQuery(function()  
  {
   
  jQuery(‘#link1’).click(function()  
  {
  $(‘#2’).slideUp(‘fast’);
  $(‘#3’).slideUp(‘fast’);  
  $(‘#4’).slideUp(‘fast’);
  $(‘#1’).slideDown(‘fast’);
  });

  jQuery(‘#link2’).click(function()  
  {
  $(‘#1’).slideUp(‘fast’);
  $(‘#3’).slideUp(‘fast’);  
  $(‘#4’).slideUp(‘fast’);
  $(‘#2’).slideDown(‘fast’);
  });
  jQuery(‘#link3’).click(function()  
  {
  $(‘#2’).slideUp(‘fast’);
  $(‘#4’).slideUp(‘fast’);  
  $(‘#1’).slideUp(‘fast’);
  $(‘#3’).slideDown(‘fast’);
  });
  jQuery(‘#link4’).click(function()  
  {
  $(‘#1’).slideUp(‘fast’);
  $(‘#2’).slideUp(‘fast’);  
  $(‘#3’).slideUp(‘fast’);
  $(‘#4’).slideDown(‘fast’);
  });  
  });
</script>  

После этого в боковую панель добавляем новый блок для подписки на наши страницы в социалках и rss канал:

Code

<!— добавить в боковую панель (выделить отсюда) —>

<a href=»#» id=»link1″>
<img src=»/img/social/rss.png» /></a>  
<a href=»#» id=»link2″>
<img src=»/img/social/vkontakte.png» /></a>
<a href=»#» id=»link3″>
<img src=»/img/social/facebook.png» /></a>  
<a href=»#» id=»link4″>
<img src=»/img/social/twitter_button.24.png» /></a>

<div id=»1″ style=»display:none»>
<center>
<!— блок RSS —>
<a href=»$RSS_LINK$»>Новости в RSS</a>

<a href=»http://lenta.yandex.ru/settings.xml?name=feed&url=$RSS_LINK$» target=»_blank» title=»Добавить в Яндекс.Ленту» rel=»nofollow»> <img src=»http://lenta.yandex.ru/i/addfeed.gif» border=»0″ alt=»Читать в Яндекс.Ленте» /></a>

<a href=»http://www.google.com/reader/view/feed/$RSS_LINK$» title=»Добавить в GoogleReader» target=»_blank» rel=»nofollow»><img src=»http://buttons.googlesyndication.com/fusion/add.gif» width=»104″ height=»17″ style=»border:0″ alt=»Add to Google Reader or Homepage»/></a>

<!— Сюда можете добавить так же ссылки на ваш канал в feedburner и счётчик подписчиков из feedburner —>
</center>
<!— /блок RSS —>
</div>

<div id=»2″>
<!— блок vkontakte.ru Добавьте сюда код группы или страницы полученный на сайте вконтакте —>
<!— VK Widget —>
<div id=»vk_groups»></div>
<script type=»text/javascript»>
VK.Widgets.Group(«vk_groups», {mode: 0, width: «300», height: «290»}, 31082169);
</script>
<!— /блок vkontakte.ru —>
</div>

<div id=»3″ style=»display:none»>
<!— блок facebook —>
<div class=»fb-like-box» data-href=»http://www.facebook.com/pages/freewareshowmehowru/135089093257832″ data-width=»200″ data-show-faces=»true» data-stream=»false» data-header=»false»></div>
<!— /блок facebook —>
</div>

<div id=»4″ style=»display:none»>
<!— блок twitter —>
<!— отредактируйте следующую строку указава адрес вашего микроблога и ник —>
Мой твиттер: <a href=»https://twitter.com/#!/dkplayer» target=»_blank» rel=»nofollow»>@dkplayer</a>

<!— далее можно указать количество подписчиков с помощью twittercounter —>
Подписчиков: <script type=»text/javascript» language=»JavaScript» src=»http://twittercounter.com/embed/dkplayer/ffffff/111111″></script>

Последние записи:

<!— последнее — это ваша лента из твиттера через rss импорт —>
$RSSIT_1$
</div>
<!— добавить в боковую панель (выделить до сюда) —>

Разумеется блоки facebook, вконтакте и twitter перед установкой вы должны отредактировать под себя.

Скрипт переключения по вкладкам в боковую панель (видеоурок)

Для облегчения задачи я записал всю процедуру в видеоурок:

Установка скрипта переключения вкладок с виджетами (5Мб, 1024×768)
так же для удобства все три видеоурока и скрипт с инструкциями я упаковал в один архив скачать который можно здесь.

Для полноценного понимания рекомендую вам так же изучить отличные бесплатные видеоуроки по jQuery

Похожие записи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.