[Tutorial] Jak dodać Messengera na stronę WWW?

Nie tak dawno Facebook zapowiedział, że umożliwi dodawanie messengera na własną stronę internetową. Wpis Mariusza wywołał ogromne zainteresowanie, więc czas przeprowadzić Was przez ten krótki proces instalacji.

Sprawa właściwie jest banalnie prosta. Będzie Wam potrzebna strona internetowa, konto na Facebooku, dostęp do kodu (na końcu wersja dla osób, bez dostępu do kodu) i jakieś 15 minut wolnego czasu (z czego 10 minut będziecie podziwiać jak Messenger działa na Waszej stronie).

Ważne! Jeśli Twoja strona nie ma certyfikatu SSL, to obawiam się, że z Messengera nici. Facebook wymaga połączenia szyfrowanego do instalacji wtyczki.

Zacznę jednak od końca. Jaki efekt chcemy wywołać? Otóż na stronie ma się pojawić piękny dymek z ikoną Messengera, zachęcający do rozpoczęcia czatu, o taki:

Gotowi? No to zaczynajmy, oto kilka kroków, które należy wykonać.

Krok 1

Po pierwsze będziemy potrzebowali założyć aplikację w ramach Facebook Developers. W tym celu klikacie w ten link, a następnie dodajecie nową aplikację (Add a New App)

Krok 2

Podajemy wszystkie niezbędne informacje.

• Display Name – nazwa naszej aplikacji, nie zauważyłem by była widoczna na froncie.
• Contact Email – adres kontaktowy, ale to oczywiste, prawda?

Wciskamy Create App ID i wracamy pod adres: https://developers.facebook.com/apps/

Krok 3

Wybieramy z listy wcześniej utworzoną aplikację. W moim przypadku jej nazwa to: Aplikacja testowa.

Krok 4

Zasadniczo ten krok będzie także banalnie prosty. Wystarczy przejść w zakładkę Settings i uzupełnić wszystkie dane.

Uzupełniamy wszystkie dane:

Display Name – nazwa aplikacji, przekopiuje się z poprzedniego kroku

Namespace – unikalna nazwa/identyfikator

Contact Email – kontakt, przekopiuje się z poprzedniego kroku

Privacy Policy URL i Terms of Service URL – tutaj będziecie musieli wgrać politykę prywatnośći i zasady użytkowania. Formularz bez tych danych nie pozwoli Wam przejść dalej. Proponuje wysłanie plików tekstowych na serwer z tymczasową treścią (do późniejszego uzupełnienia). Najprościej dodać plik poprzez bibliotekę mediów w Waszym WordPress (jeśli korzystacie) i pobrać link.

App Icon – ikona aplikacji – w rozmiarze 1024x1024px, w moim przypadku wykrył białe tło na grafice i poproszony zostałem o dodanie wersji z przezroczystym tłem, w formacie .PNG

Na koniec zostanie wybór kategorii (Category). Zapisujemy całość. Pozostaje uruchomić naszą nowo-utworzoną aplikację.

Krok 5

Teraz należy przejść w menu po lewej stronie na zakładkę App Review i uruchomić aplikację (tak by widoczna była wartość Yes).

Pozostaje nam podpięcie naszej aplikacji pod profil na Facebooku, dla którego chcemy uruchomić Messengera.

Krok 6

Logujemy się na Facebooka i przechodzi do strony, dla której chcemy uruchomić czat. Następnie wybieramy Ustawienia, które zlokalizowane są w prawym górnym rogu i po przeładowaniu strony wybieramy z menu po lewej stronie opcję Platforma Messengera.

Przechodzimy do sekcji Whitelisted Domains i dodajemy adres naszej strony internetowej. Jeśli chciałbym uruchomić Messengera dla DailyWeb, musiałbym podać: https://dailyweb.pl i ewentualnie https://www.dailyweb.pl. Pamiętajcie o przedrostu https://

Po dodaniu zapisujemy.

Brawo, część konfiguracyjna za nami. Pozostaje jeszcze odpowiednie wklejenie kodów do Twojej strony internetowej, by wszystkie skrypty mogły wczytać się poprawnie.

Krok 7

Czas na dodanie kodów do naszej strony WWW. Pierwszy kod należy umieścić w nagłówku, najlepiej przed zakończeniem sekcji </head>

[js]

<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'tutaj_podaj_nr_swojej_aplikacji’,
xfbml : true,
version : 'v2.6′
});
};

(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script’, 'facebook-jssdk’));
</script>

[/js]

Pamiętaj by w 4 wierszu zmienić tutaj_podaj_nr_swojej_aplikacji na numer id Twojej aplikacji, który znajdziesz na liście swoich aplikacji pod adresem Facebook Developers.

Następnie w sekcji <body> wklej kod:

[html]

<div class="fb-customerchat"
page_id="twoj_page_id"
ref="https://adres.twojej.strony.pl"
minimized="false">
</div>

[/html]

twoj_page_id – zamień na numer id Twojego fanpage, narzędzie które Ci ułatwi życie, znajdziesz tutaj. Wystarczy, że podasz adres fejsbukowy swojej strony i otrzymasz jej id.

w 3 wierszu pamiętaj o ustawieniu adresu swojej strony internetowej, w tym samym formacie jakim podałeś w kroku 6.

Parametr minimzed może przyjąć wartość true. Wówczas zamiast pełnego okna Messengera, po załadowaniu strony pojawi się tylko ikonka.

Nie pozostaje nic innego jak odświeżyć stronę i wszystko gotowe. To było proste, prawda? Jeśli czujesz ogrom satysfakcji, możesz w podzięce kliknąć w przycisk Lubię to/Udostępnij po prawej stronie :-)

Co jeśli nie wiesz jak dostać się do kodu?

Jeśli nie wiesz jak dobrać się do plików, by je zaktualizować o powyższe kody, wówczas pozostaje poproszenie kogoś, kto taką umiejętność ma… lub skorzystać z gotowych wtyczek do WordPress.