1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

PORADNIK Dobry wysuwany Facebook (responsywny - ukrywa się przy mniejszej szerokości ekranu)

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika TheL, 15 Styczeń 2016.

  1. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    Wysuwany slider pokazany w pomocy home ma kilka bolączek i problemów, nie współgra z kilkoma innymi rzeczami i nieoptymalnie działa przy zmniejszaniu strony. Pokazany poniżej znika przy wielkości okna poniżej 800px aby nie zajmować miejsca i nie zasłaniać elementów strony. Jest zbudowany bez użycia JS (prócz tradycyjnego facebookowego) dzięki czemu jest o wiele prostszy.
    Aby go dodać należy:

    We własnym CSS dodajemy na końcu:
    Kod:
    @media (max-width: 800px){
    #facebook {
    width: 210px;
    visibility:hidden;
    height: 290px;
    position: fixed;
    top: 250px;
    background-color: #fff;
    border: 5px solid #3B5997;
    right: -230px;
    z-index: 50
    padding:5px;
    -webkit-transition: right 0.5s ease-out;
    -moz-transition: right 0.5s ease-out;
    -o-transition: right 0.5s ease-out;
    transition: right 0.5s ease-out;
    }}
    @media (min-width: 800px){
    #facebook {
    width: 210px;
    height: 290px;
    position: fixed;
    top: 250px;
    background-color: #fff;
    border: 5px solid #3B5997;
    right: -230px;
    z-index: 5;
    padding:5px;
    -webkit-transition: right 0.5s ease-out;
    -moz-transition: right 0.5s ease-out;
    -o-transition: right 0.5s ease-out;
    transition: right 0.5s ease-out;
    }
    #facebook:after{
    content: url('../images/user/fb.png');
    position: absolute;
    left: -45px;
    top: -5px;
    cursor: pointer;
    }
    #facebook:hover {
      right: 0;}
    }
    
    We własnym JS dodajemy:
    Kod:
    (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/pl_PL/sdk.js#xfbml=1&version=v2.3";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    

    na końcu (za całym kodem który tam jest) w pliku body_head.tpl dodajemy:

    Kod:
      <div id="fb-root"></div>
      <div id="facebook">
    <div class="fb-page" data-href="https://www.facebook.com/homepl" data-width="220" data-height="250" data-hide-cover="true" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/homepl"><a href="https://www.facebook.com/homepl">Home.pl</a></blockquote></div></div>
    </div>
    
    oczywiście zamieniając adres strony na FB

    Do plików graficznych wstawiamy obrazek:
    fb.png

    Gotowe facebook mamy na stronie :)
     
    yankes, sexylingerie.pl oraz Mariusz lubią to.
  2. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 051
    Docenione treści:
    300
  3. domowykosmetyk

    domowykosmetyk Kandydat

    Wiadomości:
    104
    Docenione treści:
    3
    No to ja już nic nie wiem.
    Zrobiłam tak jak w opisie i nam stronę facebook na moim sklepie a nie wysuwany moduł.
    Dwa razy sprawdziłam wszystko czy dobrze skopiowałam.
     
  4. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    wyslij mi na priv zawartosc wszystkich 3 podanych plików znajdę Ci błąd, bo kod jest na pewno dobry.
     
  5. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 051
    Docenione treści:
    300
    Potwierdzam, przed chwilą skonsultowałem temat u samego źródła (czyt. @TheL) i potwierdzam, że kod jest prawidłowy. Najprawdopodobniej coś "się gryzie" w zawartości "Własnego kodu JS". Poniżej dodaje zrzut ekranu z testów, które przeprowadziłem razem z użytkownikem @TheL

    facebook-dobry.png
     
  6. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
  7. domowykosmetyk

    domowykosmetyk Kandydat

    Wiadomości:
    104
    Docenione treści:
    3
  8. ilon9

    ilon9 Uczestnik

    Wiadomości:
    26
    Docenione treści:
    0
    AAA ja coś namieszałam i mam problem
    Błąd w szablonie widoku
    body_head.tpl: 216
    syntax error: unclosed tag \{if} (opened line 209). (Smarty_Compiler.class.php, line 328)
     
  9. pavali

    pavali Pomocnik

    Wiadomości:
    116
    Docenione treści:
    7
  10. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    Zwróć uwagę na nie zastępowanie wymaganego kodu, Ty @pavali zastąpiłeś innego IFa :D
     
  11. pavali

    pavali Pomocnik

    Wiadomości:
    116
    Docenione treści:
    7
    @TheL zerknij jeszcze do mojego sklepu jak możesz i poradz jak moge przenieść logo fb na prawą stronę i zmniejszyc je ( taki zabieg kosmetyczny ) :D

    smaily.pl
     
  12. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    tej wersji FB nawet nie próbuję modyfikować bardzo mi się ona nie podoba :D jak chcesz w wolnej chwili mogę Ci wstawić poprawnie tego mojego facebooka :D
     
  13. ilon9

    ilon9 Uczestnik

    Wiadomości:
    26
    Docenione treści:
    0
    Nie wiem czemu, ale po wklejeniu w/w kodów nie pojawia mi się wstążka z fb na głównej stronie, tylko ikonki "Lubię to!" przy każdym z produktów.
     
  14. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    Przy produkcie masz włączone w panelu i nie zależą one od skryptu.
     
  15. pavali

    pavali Pomocnik

    Wiadomości:
    116
    Docenione treści:
    7
    okej :)
     
  16. ohtully

    ohtully Nowy użytkownik

    Wiadomości:
    1
    Docenione treści:
    0
    A czy ja też mogę prosić o pomoc?
    Zamiast wysuwanego facebooka pojawia mi się po prostu okienko, co źle wygląda i automatycznie rozwala ukłąd całej strony.
    Szukałam kilka razy i nie mogę znaleźć błędu ;/
     
  17. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    Podaj adres sklepu.
    Czy wykonałaś dokładnie wszystkie czynności opisane powyżej?
     
  18. domowykosmetyk

    domowykosmetyk Kandydat

    Wiadomości:
    104
    Docenione treści:
    3
    Oj problemy rosną jak grzyby po deszczu :confused:

    Chciałbym mieć informacj na stronie głównej że jestem też na instagramie, yutube. Jak facebook. Jak to zrobić?
     
  19. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    zrobić drugie i trzecie takie coś jak dla facebooka :) dodać tylko kolejne obrazki i zmienić margin-top :D
     
  20. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    @ohtully
    gotowe, drobny brak znaczka } :D
     

Poleć forum znajomym