Найти на сайте

Выезжающие боксы Facebook +Twitter +Вконтакте

+60
2.97K
  2. Блоги
  3. Выезжающие боксы Facebook +Twitter +Вконтакте
Данная модификация шаблона (по другому наверное и не назвать) добавляет два выезжающих бокса Facebook и Twitter и Вконтакте.

Демо тут: Перейти

Для того, чтобы установить эти боксы нужно:


Если собираетесь ставить сразу 3 бокса то:

1. Скачать 3 картинки и залить их в ваш_сайт.ру/templates/ваш_шаблон/images

Иллюстрация
Иллюстрация
Иллюстрация

2. Открыть в вашем шаблоне файл styles.css и добавить в самый низ:

  1.  
  2. .twitbox {
  3. float:right;
  4. width:288px;
  5. height:345px;
  6. background: url(../images/twitbox.png) no-repeat !important;
  7. display:block;
  8. right:-250px;
  9. padding:0;
  10. position:fixed;
  11. top: 270px;
  12. z-index:1002;
  13. border-radius:10px;
  14. -moz-border-radius:10px;
  15. -webkit-border-radius:10px;
  16. }
  17. div.twitboxwrap {
  18. margin-top:2px;
  19. margin-left:-5px;
  20. background: #fff;
  21. width:238px;
  22. height:325px;
  23. overflow:hidden;
  24. border-radius:10px;
  25. -moz-border-radius:10px;
  26. -webkit-border-radius:10px;
  27. }
  28. div.twitboxwrap iframe {margin:-1px}  
  29.  
  30.  
  31.  
  32.  
  33. .s_likebox {
  34. float:right;
  35. width:288px;
  36. height:345px;
  37. background: url(../images/fbslide.png) no-repeat !important;
  38. display:block;
  39. right:-250px;
  40. padding:0;
  41. position:fixed;
  42. top: 130px;
  43. z-index:1002;
  44. border-radius:10px;
  45. -moz-border-radius:10px;
  46. -webkit-border-radius:10px;
  47. }
  48. div.likeboxwrap {
  49. margin-top:2px;
  50. margin-left:-5px;
  51. background: #fff;
  52. width:238px;
  53. height:325px;
  54. overflow:hidden;
  55. border-radius:10px;
  56. -moz-border-radius:10px;
  57. -webkit-border-radius:10px;
  58. }
  59. div.likeboxwrap iframe {margin:-1px}  
  60.  
  61.  
  62. .vkbox {
  63. float:right;
  64. width:288px;
  65. height:345px;
  66. background: url(../images/vk.png) no-repeat !important;
  67. display:block;
  68. right:-250px;
  69. padding:0;
  70. position:fixed;
  71. top: 10px;
  72. z-index:1002;
  73. border-radius:10px;
  74. -moz-border-radius:10px;
  75. -webkit-border-radius:10px;
  76. }
  77. div.vkboxwrap {
  78. margin-top:2px;
  79. margin-left:-5px;
  80. background: #fff;
  81. width:238px;
  82. height:325px;
  83. overflow:hidden;
  84. border-radius:10px;
  85. -moz-border-radius:10px;
  86. -webkit-border-radius:10px;
  87. }
  88. div.vkboxwrap iframe {margin:-1px} 
  89.  
3. Добавляем Facebook.

В моем случае я использую Likebox но для этого нужна страница в Facebook, сейчас для примера я использую страницу www.facebook.com/platform разработчиков.
Итак, переходим на страницу developers.facebook.com/docs/plugins/ и выбераем LIkeBox, в настройках ставим как нам нравится, но ширину нужно поставить 250. Нажимаем "Get Code" в окне выбераем "Iframe" код.
Теперь оставим на минуту это окно, и перейдем в наш стиль. Откроем template.php и в самый низ, перед тегом </body> добавим:

  1.  
  2.  
  3. <script type="text/javascript">
  4. jQuery(function (){
  5. jQuery(".s_likebox").hover(function(){
  6. jQuery(".s_likebox").stop(true, false).animate({right:"0"},"medium");
  7. },function(){
  8. jQuery(".s_likebox").stop(true, false).animate({right:"-250"},"medium");
  9. },500);
  10. return false;
  11. });
  12. </script>  
  13.  
  14. <div class="s_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'>[b]СЮДА ВСТАВИТЬ СВОЙ ИФРЕЙМ КОД[/b]</div></span></div></div>
  15.  
  16.  
Теперь перейдите на фейсбук, скопируйте код и вставьте вместо слов"СЮДА ВСТАВИТЬ СВОЙ ИФРЕЙМ КОД"
Все, можете перейти на сайт и посмотреть, что получилось.

4. Добавляем twitter

Для этого переходим по ссылке twitter.com/settings/widgets, входим в аккаунт, настраиваем виджет, прописываем свой доммен в список разрешенных. Внимание! Чтобы твитер влез весь, в настройках виджета поставьте высоту 350. Внизу справа появиться код.
Переходим к нашему шаблону, открываем template.php И в самый конец, перед тегом </body> добавляем:

  1.  
  2.  
  3. 	<script type="text/javascript">
  4. jQuery(function (){
  5. jQuery(".twitbox").hover(function(){
  6. jQuery(".twitbox").stop(true, false).animate({right:"0"},"medium");
  7. },function(){
  8. jQuery(".twitbox").stop(true, false).animate({right:"-250"},"medium");
  9. },500);
  10. return false;
  11. });
  12. </script>  
  13. <div   class="twitbox"><div style="color: rgb(255, 255, 255); padding:   8px 5px 0pt 50px;"><span><div class='twitboxwrap'>ЗДЕСЬ ВАШ КОД</div></span></div></div>
  14.  
После чего в твитере копируем код и вставляем.



5. Добавляем Вконтакте[/b]

Переходим на страницу vk.com/developers.php?oid=-1&p=Groups Виджет для сообществ выставляем ширину 250 высота 290. Идем в ваш шаблон открываем template.php и перед тегом </body> вставляем:

  1. <script type="text/javascript">
  2. jQuery(function (){
  3. jQuery(".vkbox").hover(function(){
  4. jQuery(".vkbox").stop(true, false).animate({right:"0"},"medium");
  5. },function(){
  6. jQuery(".vkbox").stop(true, false).animate({right:"-250"},"medium");
  7. },500);
  8. return false;
  9. });
  10. </script>  
  11. <div class="vkbox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='vkboxwrap'>[b]ЗДЕСЬ КОД ВАШЕГО ВИДЖЕТА[/b]</div></span></div></div>
Копируем код вашего виджета и вставляем. И все готово.

Если вставляем один какой-нибудь бокс незабудьте в файле css атрибут top выставить где-то 130 px

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



UPD_3 Все исправленно, удаленно лишнее подключение Квери, все работает, проверил.
Бекап вашего сайта на локальный компьютер
facebooktwitter
0
omarov omarov 11 лет назад #
Можно немного инфы относительно "для чего это? что там выводится?"?)) Заранее спасибо!
+1
artscripts artscripts 11 лет назад #
В Facebook боксе обычно выводят людей которые поставили лайки на вашу страницу (страницу в Facebook)
В твитер бокс ввыводится последнее из аккаунта Твитера. Например если создан аккаунт для городскийх событий в твитере, то там и показывается, все что вы твитнули.
+1
letsgo letsgo 11 лет назад #
Это называется интеграция в социальные сети, но заход не с того бока. Однако сделано симпатично.
+3
artscripts artscripts 11 лет назад #
Можно и так назвать smile Тут как бы на любителя. Задумка была не вставлять банальные блоки плагинов предлогаемые соц сетями, а сделать их немного попривлекательней.
0
Dost Dost 11 лет назад #
Классно сделано!Спасибо+
0
Tagil-Rulit Tagil-Rulit 11 лет назад #
Интерестное решение +, для каких версий движка?
+1
artscripts artscripts 11 лет назад #
К версиям не привязанно, к любой подойдет в принципе.
0
reload reload 11 лет назад #
@iskusatel
)
не кусайтесь сильно) но там вкладка фейсбука перекрывает скрол в твитере!.. и фрейм твитера желательно сделать по высоте блока указанного в ваших стилях, иначе скрол заезжает за блок, ну и всех твитов не увидишь) или сам блок увеличить - хотя если для пантов то и так сойдет - красиво)
0
MiMoHOD MiMoHOD 11 лет назад #
Что до скролла, можно и колесиком пользоваться. Но последний (нижний) в списке твит и правда не видно, надо бы доработать.

@Искус
+ за старания.
+1
artscripts artscripts 11 лет назад #
Чтобы влазили все твиты, в настройках виджета поставьте высоту 350.
+2
artscripts artscripts 11 лет назад #
Да, я видел что наезжает. Постараюсь, что небудь придумать.
0
picaboo picaboo 11 лет назад #
Дважды одна и та же версия jquery подключается, может хватило бы одной на оба виджета? Не тестили, может и вообще не надо подключать и хватит штатной 1.7 что в движке стоит?
+1
artscripts artscripts 11 лет назад #
ТАм же русским языком написанно)) Если стоит какойлибо бокс второй раз квери подклюать ненадо)) 1.7 хватит
0
Ramin Ramin 11 лет назад #
Еще бы для VK такой блок))
0
hydraq hydraq 11 лет назад #
Тоже хотел написать
0
Def Def 11 лет назад #
да, для ВК поактуальнее будет , чем для фейсбука
+1
reload reload 11 лет назад #
разве проблема сменить код фейса на код вк?)
кнопочку перерисовать или в нете найти - полно)
тема, грубо говоря, про "Выезжающие боксы" вставить во внутрь можно и видеоплеер с ютуба)
+1
artscripts artscripts 11 лет назад #
Совершенно верно.
+1
reload reload 11 лет назад #
можно и позицию модульную прописать и модули выводить...
0
eoleg eoleg 11 лет назад #
+
+3
artscripts artscripts 11 лет назад #
Если получиться, сегодня и для ВК сделаю.
0
Mr_Freeman Mr_Freeman 11 лет назад #
автору зачет, классно сделано
0
Серега Серега 11 лет назад #
+ очень симпотно получилось!
+1
artscripts artscripts 11 лет назад #
Добавил Бокс Вконтакте рисовал на скорую руку, я думаю, что кто сильно захочет. перерисует под себя.
0
lezginka.ru lezginka.ru 11 лет назад #
Искус ,аналогично вывести "я.погоду" или чат можно ?
+1
artscripts artscripts 11 лет назад #
Да впринципе можно вывести все что угодно. Чат только неудобно будет, когда убераешь мышку он скрывается.
0
mr.Z mr.Z 11 лет назад #
Искус: я замечал что при попытке подключить jquery/1.5.2/jquery.min.js перестают работать кнопки настройки модуля с фронтеда.
Здесь такого не наблюдается?
0
artscripts artscripts 11 лет назад #
Вроде работает у меня. Если кто еще у себя проверит буду рад.
0
mr.Z mr.Z 11 лет назад #
Забыл уточнить на версии 1.10
0
artscripts artscripts 11 лет назад #
Дак вы проверьте, просто в шаблон вставьте <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>; и сразу все покажет, работает или нет :)
0
toropa toropa 11 лет назад #
"1. Скачать 2 картинки и залить их в ваш_сайт.ру/templates/ваш_шаблон/images" откуда скачать?
0
artscripts artscripts 11 лет назад #
Посмотрите в пост, эти картинки прям в пост вставлены. С него и скачайте. Уже 3 картинки, поправлю сейчас.
0
artscripts artscripts 11 лет назад #
UPD: Данная модификация работает с любой версией jquery от версии 1.5.2+ Тоесть если у вас где нибудь в шаблоне уже загружен допустим jquery/1.6.2 не нужно отсюда грузить библиотеку. Модификация подхватит ту что вами загружается. Это чтобы избежать кривотоков.
+1
iParovoz iParovoz 11 лет назад #
+
0
Strong Strong 11 лет назад #
Красиво то красиво!

НО...

может кто решил проблему или кто подскажет! версия 1.10

если вставляю все и с одним <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>;

то не работает допустим отправить сообщения. окно открывает, но при отправке ничего не происходит! тоже самое и с комментариями и с созданием клубов и т.п.

Как решить проблему?
0
artscripts artscripts 11 лет назад #
Да, проблему увидел, на 1.9 вроде таких проблем небыло. Я завтра не смогу, но послезавтра постараюсь решить проблему.
0
Strong Strong 11 лет назад #
ок! будем ждать! спс
0
artscripts artscripts 11 лет назад #
Конфликт идет с этим скриптом в template.php

Код PHP:
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $('#topmenu .menu li').hover(
  4. function() {
  5. $(this).find('ul:first').show();
  6. $(this).find('a:first').addClass("hover");
  7. },
  8. function() {
  9. $(this).find('ul:first').hide();
  10. $(this).find('a:first').removeClass("hover");
  11. }
  12. );
  13. });
  14. </script>
0
Strong Strong 11 лет назад #
и каким образом исправить? или пока еще смотрите?
0
artscripts artscripts 11 лет назад #
Надо смотреть тщательно, послезавтра посмотрю в чем проблема.
0
lesterkey lesterkey 11 лет назад #
+ и в закладки...
0
Дмитрий Дмитрий 11 лет назад #
Круто получилось! И главное полезно.
0
Дмитрий Дмитрий 11 лет назад #
Дабвлю, что с твиттер надо что-то сделать, поскольку не дело, что кнопка Follow скрыта за блоком вконтакте.
Ну и выше вроде уже отметили, про прокрутку, хотя второстпенно. Думаю, эти вопросы можно решить, путём перемещения открытого блока чуть левее, чем все остальные.
0
artscripts artscripts 11 лет назад #
Исправил вроде бы проблему и обновил код в посте. Теперь можно работать на http://yandex.st/jquery/1.9.0/jquery.min.js проверилЮ коменты работают, если еще кто увидет косяки буду благодарен. За всем не уследить.
0
admirus admirus 11 лет назад #
Сделано все как написано но блок внизу появлется
0
artscripts artscripts 11 лет назад #
Если ставите 1 блок в css ставьте top:13opx
0
Николай (asd43) Николай (asd43) 11 лет назад #
косяк был, у меня перестали отправляться комменты и сообщения на стену
0
Николай (asd43) Николай (asd43) 11 лет назад #
с новым кодом табы в профиле перестали работать, все удалил ивсе нормально
0
Николай (asd43) Николай (asd43) 11 лет назад #
вкладки, вообщем ну его нафиг, а так красиво было
0
Николай (asd43) Николай (asd43) 11 лет назад #
очень хочется применить к сайту
0
artscripts artscripts 11 лет назад #
Я думаю, я пока не могу понять что не так, любое подключение квери ломает вкладки профиля... Думаю как обойти, спасибо что заметили.
+1
Pasha Pasha 11 лет назад #
А че там думать, просто не подключайте. Весь этот код будет прекрасно работать и на версии 1.5, которая уже подключена
0
artscripts artscripts 11 лет назад #
Да я уже увидел, сейчас переделаю.
0
artscripts artscripts 11 лет назад #
Спасибо Паша за наводку, все исправлено, и проверенно, убрано лишнее подключение, теперь все работает. Для тех кто ставил уже переставьте коды скриптов или удалите в блоках подключение скриптов квери.
0
Дмитрий Дмитрий 11 лет назад #
Оффтоп.
А справа вверху отрывной уголок, это как реализовано?
0
Николай (asd43) Николай (asd43) 11 лет назад #
Установил все работает, спасибо
0
FlaZa FlaZa 11 лет назад #
У вас в демо наводим на нужный ярлык и всплывает нужное меню, у меня почему-то даже если наводим на меню, что чуть выше то открывается нижнее, и так пока не закончиться высота нижнего, и потом только более высокое...
Тоисть нижний твиттер, навожу на него, всплывает окошко, оно доходит до средины вконтакте, я навожу на файсбук и ниже средины вконтакте, открывается твиттер, но если я навожу выше средины вконтакте открывается фейсбук, а что-бы открылся вконтакте необходимо вообще почти в самом верху навести, где надписей нет...
В чем может быть проблема?
+1
artscripts artscripts 11 лет назад #
Попробуйте коды поставить в таком порядке сначала твитер, потом фейсбук, потом вконтакте. Если у вас другой порядок, нужно менять параметры top в css

Еще от автора

Бекап вашего сайта на локальный компьютер

Бекап вашего сайта на локальный компьютер

Наверно нет особой необходимости напоминать каждый раз, что бекап своего проекта должен делаться ежедневно!
17

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.