Wysuwany moduł Facebook w sklepie Click Shop (likebox)

Wsparcie Biura Obsługi Klienta nie obejmuje poniżej zawartej instrukcji.

W przypadku wątpliwości na temat zawartych wskazówek zapraszamy na forum.home.pl.
    1. Logujemy się na środowisko developerskie FB: https://developers.facebook.com/docs/
    2. Przechodzimy do Page Plugin, który odpowiada za wyświetlanie miniatury fanpage wraz z wpisami,
    3. Skrypt domyślnie ustawiony jest na szerokość (width): 400 i wysokość (height): 500.
    4. Wprowadź Facebook Page URL czyli adres naszego fanpage firmowego,
    5. Wprowadź dodatkowe ustawienia:
      • Tabs – rodzaj wyświetlanych elementów. Domyślnie jest tablica, możesz wprowadzić także np. eventy i wiadomości
      • Width –szerokość
      • Height –wysokość
      • Use Small Header – nagłówek jest mniejszy, ukrywa się m.in przycisk Lubię to,
      • Hide Cover Photo – zdjęcie z nagłówka zostaje ukryte
      • Show Friend’s Faces – po zaznaczeniu dla zalogowanych osób podglądających ten element na sklepie pokażą się twarze znajomych lubiących Twój Fanpage.
    6. Po zakończeniu konfiguracji, kliknij Get code, a następnie przejdź do zakładki: Pływająca ramka i zapisujemy widoczny kod.
    7. Przejdź do panelu administracyjnego Twojego sklepu internetowego, do sekcji Konfiguracja –> Wygląd –> Aktywny styl graficzny i utwórz kopię skórki.
    8. Ustaw kopię skórki jako aktywną.
    9. Przejdź do sekcji Pliki graficzne a następnie dodaj nowy plik, np. fb.png dostępny w tym artykule:
    10. Przejdź do sekcji Własny skrypt JS, a następnie wprowadź 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 ='https://connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.11&appId=324871271305223&autoLogAppEvents=1';fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
    11. Przejdź do sekcji Własny styl CSS, a następnie dodaj kod:
      #panel {
      position: fixed;
      top: 50px;right: calc(0 -410px);z-index: 99999;transition: right 0.5s ease-out 0s;}#panel:hover {right: 0;}#panel #content {width: 400px;padding: 10px;}#panel #title {width: 150px;background: url('../styles/../images/user/fb.png') no-repeat;padding: 12px 5px 100px 5px;text-align: center;position: relative;top: 140px;left: -30px;z-index: 1;}
    12. Przejdź do sekcji Moduły, a następnie utwórz nowy moduł, podając dowolną nazwę, np. Facebook-widget, obramowanie: nie, HTML ID: fb-page.
    13. Zamknij edytor wizualny klikając przycisk WYŁĄCZ EDYTOR i wprowadź kod:
      <div id="panel">
      <div id="title"> </div><div id="content> //tu wklajamy kod pobrany ze strony Facebook developer</div>
    14. Zapisz zmiany. Moduł umieść w dowolnym miejscu na stronie WWW. Moduł domyślnie odpowiada za wyświetlanie wysuwanego boxu z prawej strony.

Więcej rozwiązań

  • Czy artykuł był pomocny?
  • TAK   Nie
Tematy powiązane
Więcej informacji na forum dyskusyjnym:   Kliknij tutaj, aby przejść na forum.home.pl