Wtyczka Facebook Page umożliwia łatwe dodanie widgetu na Twojej stronie internetowej, który wyświetla fanpage Twojej firmy. Dzięki temu Twoi odwiedzający mogą szybko polubić i śledzić Twoją stronę na Facebooku. Oto krok po kroku, jak dodać wtyczkę Facebook Page do swojej strony internetowej:
Krok 1: Utwórz stronę na Facebooku
Jeśli jeszcze nie masz strony firmowej na Facebooku, musisz ją najpierw utworzyć. Wejdź na Facebooka, zaloguj się, a następnie kliknij opcję „Utwórz” w górnym menu i wybierz „Strona”.
Krok 2: Przejdź do strony Developer Facebook
Wejdź na stronę Facebook for Developers i zaloguj się za pomocą swojego konta Facebook. Następnie przejdź do sekcji „Docs” i wybierz „Social Plugins” -> „Page Plugin”.
Krok 3: Skonfiguruj wtyczkę Facebook Page
Na stronie konfiguracyjnej wtyczki Facebook Page wprowadź URL swojej strony na Facebooku oraz dostosuj wygląd widgetu, np. szerokość, wysokość, język, czy wyświetlanie zdjęć profilowych. Po wprowadzeniu wszystkich ustawień, kliknij przycisk „Get Code”.
Krok 4: Skopiuj kod wtyczki
Po kliknięciu „Get Code” otrzymasz dwa fragmenty kodu:
- Kod SDK JavaScript – Ten kod należy wkleić na stronę przed zamknięciem tagu
</body>. - Kod wtyczki – Ten kod należy wkleić w miejscu, w którym chcesz, aby wtyczka była wyświetlana na Twojej stronie.
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v22.0"></script>
<div class="fb-page" data-href="https://www.facebook.com/profile.php?id=61573215598523" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/profile.php?id=61573215598523" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/profile.php?id=61573215598523">Baza Przepisów</a></blockquote></div>Krok 5: Zapisz zmiany i odśwież stronę
Po wklejeniu kodu zapisz zmiany na swojej stronie internetowej i odśwież ją. Teraz wtyczka Facebook Page powinna być widoczna i funkcjonować poprawnie.
Dodanie wtyczki Facebook Page do Twojej strony internetowej to świetny sposób na zwiększenie widoczności Twojej strony firmowej na Facebooku oraz na angażowanie odwiedzających Twoją stronę internetową. Życzę powodzenia!
Krok 6: Stwórz wysuwany ekran z boku ekranu
Jeszcze ładniej można zrobić aby page box wysuwał się z np. prawej strony ekranu jak na zdjęciu:
Aby stworzyć taki moduł należy „opakować” kod ze strony facebooka oraz dodac CSS oraz kod JS odpowiedzialny za animacje wysuwania.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook Like Box</title>
<style>
#fb-float {
position: fixed;
right: -300px;
top: 50%;
transform: translateY(-50%);
width: 300px;
transition: right 0.3s ease-in-out;
}
#fb-float.open {
right: 0;
}
#fb-tab {
position: absolute;
left: -40px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 120px;
background-color: #3b5998;
color: white;
display: flex;
align-items: center;
justify-content: center;
writing-mode: vertical-rl;
cursor: pointer;
}
</style>
</head>
<body>
<div id="fb-float">
<div id="fb-tab" onclick="toggleFbFloat()">Like Us</div>
<div class="fb-page"
data-href="https://www.facebook.com/YOUR_PAGE"
data-tabs="timeline"
data-width="300"
data-height="400"
data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="true">
<blockquote cite="https://www.facebook.com/YOUR_PAGE" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/YOUR_PAGE">Your Page Name</a>
</blockquote>
</div>
</div>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0" nonce="random">
</script>
<!-- JavaScript to handle the floating tab -->
<script>
function toggleFbFloat() {
var fbFloat = document.getElementById('fb-float');
fbFloat.classList.toggle('open');
}
</script>
</body>
</html>