Scroll to top

Jak dodać Messengera na stronę www – poradnik


Ministerstwo Internetu - 28 grudnia 2017 - 0 comments

Cześć,

Dziś, pokażemy Wam, jak dodać natywnego Messnegera bezpośrednio z Facebooka.

Od czego zacząć?

Przedewszystkim na naszej stronie musi być zainstalowany certyfikat SSL. Bez niego Messneger nie będzie działać.

Jeśli Wasza strona nie posiada opcji wystawiania darmowych certyfikatów SSL, zapoznajcie się z ofertą dhosting!

Oprócz tego, potrzebować będziemy Facebook ID naszego fanpage’a, można go pozyskać stąd. Będzie on niezbędny w końcowej części tego poradnika.

Na początek, niezbędne będzie wygenerowanie App ID, tak jak na obrazku poniżej:

 

 

Jak to zrobić?

Wchodzimy na stronę https://developers.facebook.com/apps , w kolejnym kroku klikamy „Add a New App”. Podajemy nazwę aplikacji, adres email i klikamy „Create App”:

W kolejnym kroku, wracamy do listy aplikacji. Ponownie wchodzimy na stronę https://developers.facebook.com/apps/ i wybieramy naszą aplikację.

W kolejmym kroku wybieramy „App Settings” i wypełniamy wszelkie niezbędne pola. Kiedy wypełniliśmy wszystkie pola, klikamy ‚Save Changes’.

Display Name – nazwa aplikacji, powinna  przekopiować  się z poprzedniego kroku

Namespace – unikalna nazwa/identyfikator naszej aplikacji, pisana z małych liter

Contact Email – email do kontaktu, powinien przekopiować się z poprzedniego kroku

Privacy Policy URL i Terms of Service URL – tutaj będziecie musieli podać link do  polityki prywatności i zasad użytkowania aplikacji . Formularz bez tych danych nie pozwoli Wam przejść do kolejnego kroku.

App Icon – ikona aplikacji – w rozmiarze w długości i szerokości 1024px formacie .PNG

Poniżej przykładowe wypełnienie pól:

Kiedy uda się nam już poprawnie wypełnić wszystkie pola, w kolejnym kroku należy upublicznić naszą Aplikację.

W tym celu przechodzimy do „App Review” i klikamy w przycisk, tak jak na poniższym obrazku:

 

Pojawi się nam wówczas okno w którym wybierzemy kategorię naszej aplikacji. Niech będzie to „Business and Pages”

Kolejnym ważnym krokiem jest dodanie naszej strony do tzw „Whitelist”.

W tym celu, w Ustawieniach naszej strony na facebooku wchodzimy w „Platforma Messengera” i dodajemy w sekcji „Whitelisted Domains”

 

W kolejnym kroku dodajemy naszą stronę do whitelist:

W kolejnym etapie dodamy kod bezpośrednio na stronę.

W przypadku WordPress, najlepiej dodać kod do nagłówka motywu. W tym celu z menu wybieramy ‚Wygląd’ => ‚Edytor’

W kolejnym kroku, wybieramy plik ‚header.php’

Kod poniżej dodamy bezpośrednio przed zamknięciem sekcji head,  czyli przed </head>

Uwaga, w miejsce appId=491168991282877 wpisujemy nasze App ID :

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

W kolejnym kroku, dokleimy kolejny kod, tym razem w sekcji <body>

Uwaga: page_id oraz ref musicie zastąpić własnymi wartościami.

Jeśli chcecie, aby Messenger domyślnie był zminimalizowany (wyświetlał jedynie ikonę messengera), zmieńcie wartość z ‚false’ na ‚true’.

<div class="fb-customerchat"> <div class="fb-customerchat"
page_id="729104570526818"
ref="https://www.ministerstwointernetu.com/"
minimized="false">
</div></div>

I to by było na tyle. Jeśli napotkacie jakieś problemy z wgraniem messengera na stronę dajcie znać przez wiadomość na messengerze 😉

[ra_button style=”btn-app” shape=”round” size=”btn-lg” i_type=”fontawesome” i_align=”right” title=”Polub nas na FB” link=”url:https%3A%2F%2Fwww.facebook.com%2FMinisterstwoInternetu%2F||target:%20_blank|” i_icon_fontawesome=”fa fa-facebook” hbg=”#ffffff” text_color=”#3b5998″ htext_color=”#3b5998″]