Создание социальных подписных страниц (часть 3)


Приветствую.

Записал для вас третью (последнюю) часть серии видео-уроков на тему создания “социальной” подписной страницы. В третьей части я покажу вам как добавить скомбинированные комментарии от социальных сетей вконтакте и facebook на подписную страницу.

Первую часть курса вы можете посмотреть здесь – http://gavrilov.enterbook.ru/socialnaya-podpisnaya-stranica-chast-1/

Вторую здесь – http://gavrilov.enterbook.ru/sozdanie-socialnykh-podpisnykh-stranic-chast-2/

Итак, третья часть:



Ссылки из видео:

Ссылка на добавление комментариев от FaceBook – http://developers.facebook.com/docs/plugins/

Ссылка на добавление комментариев от Вконтакте – http://vkontakte.ru/developers.php?oid=-1&p=Comments

Ссылка на пример (из видео) – http://multimediasite.ru

Коды (из видео):

Код стилей:

<style type="text/css"> 
body {background:#fff;color:#000;font-family:sans-serif;line-height:1.6;}
#page {width:70%;margin:10px auto;}
.tabs {width:100%;overflow:hidden;font-size:0.9em;margin:2em 0;zoom:1;padding:1px;position:relative;}
.tabs dt {float:left;line-height:2;height:2em;background:#e8f0f5;border:1px solid #e8f0f5;border-bottom:0;padding:0 1em;position:relative;left:35px;margin-right:1px;cursor:pointer;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;}
.tabs dt:hover {background-color:#bfdff4;}
.tabs dt.selected {border-color:#b0d0e9;background:#fff;z-index:3;cursor:auto;}
.tabs dd {background:#fff;display:none;float:right;width:100%;margin:2em 0 0 -100%;position:relative;z-index:2;}
.tabs dd.selected {display:block;}
.tabs .tab-content {border:1px solid #b0d0e9;padding:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;}
</style>

Подключение скриптов:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('dl.tabs dt').click(function(){
$(this)
.siblings().removeClass('selected').end()
.next('dd').andSelf().addClass('selected');
});
});
</script>

Вкладки для виджетов:

<dl class="tabs">
<dt class="selected">ВКонтакте</dt>
<dd class="selected">
<div class="tab-content">

Код комментариев Вконтакте
						
</div>
</dd>
<dt>FaceBook</dt>
<dd>
<div class="tab-content">

Код комментариев FaceBook

</div>
</dd>
</dl>

Удачного использования и большого количества комментариев!




Комментарии (13) на “Создание социальных подписных страниц (часть 3)”

  • Андрей:

    Спасибо за информацию, но как быть, когда сайт на шаблонах? Например ucoz: там если вставить код от фейсбука в шаблон, то во всех постах будут одинаковые комментарии…

    Заранее спасибо.

    • Никита Гаврилов:

      В коде вставки комментариев от facebook, вместо ссылки на сайт, вставьте код вывода ссылки на страницу. Например в вордпресс этот код выглядит так:

      <?php the_permalink(); ?>

      На счет юкоза не знаю. Ни когда им не пользовался.

  • Михаил:

    Приятный блог)), а самое главное нашел что искал!
    Спасибо за проделанную работу – это уникальная инфа

  • Михаил Чурса:

    Спасибо!

  • Михаил Чурса:

    Еще один момент – в видео я не нашел как отредактировать форму подписки от смарта, так чтобы она была покрасивее, например как на multimediasite??? “Тыкните пальцем” плиз если есть об этом инфа здесь или в другом месте…

  • Михаил Чурса:

    Чет предыдущий комментарий вылез не тот, что нужен – в нем я спрашивал почему я не могу на блоге,здесь, переключиться с вкладки вконтакта на вкладку фейсбука и обратно??

  • Серега:

    Спасибо все получилось, но у меня на сайте рамка во всю ширину сайта, а хочется чтобы только вокруг виджета, как здесь. Не подскажете как это сделать? Как уменьшить длину рамки?

    • Никита Гаврилов:

      Привет. Попробуй изменить ширину в настройках стилей. Сделай не 100%, а, например, 80%.

  • Ольга:

    Здравствуйте!

    Подскажите пожалуйста, а как сделать чтобы комментарии от вконтакте и фейсбука расположены были рядом с друг другом вот так – - ?
    Очень нужно.

    Спасибо заранее за ответ!

Оставить комментарий

Подписка на обновления блога
Социальные сети

Введите ваш email адрес:



Социальные сети Социальные сети Социальные сети Социальные сети


Return to Top ▲Return to Top ▲
Мультимедийные "фишки" для вашего интернет бизнеса
Главная | Контакты | Мои услуги | Видео от А до Я | Видео-курсы | Все посты | Об авторе