Меню Закрыть

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

Наконец добрался сделать последний видеоурок из серии создание страницы сайта в социальных сетях ВКОНТАКТЕ и 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

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

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

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

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания Google.