Jak dodać gadżet Facebook na bloga blogspot (stronę, fanpage, lubię to)

Dzisiaj połączymy naszego bloga prowadzonego na blogspot z facebook'iem. Czyli odpowiemy sobie na pytanie: Jak dodać do blogspotu wtyczkę społecznościową facebook. Dowiemy się jak dodać fanpage, czyli stronę z facebooka na bloga, jak wprowadzić Polub tę stronę (lubię to) na pasek boczny. Dodanie gadżetu, wtyczki społecznościowej umożliwi czytelnikom polubienie twojej strony z facebook'a wprost na blogu - bez konieczności przechodzenia na stronę facebook. A tobie umożliwi szybką obserwację ilości osób lubiących twój blog.

Jak połączyć blogspot z facebook' iem

Jak dodać stronę (fanpage ) facebooka na bloga na blogspocie?

Po pierwsze zakładam, że posiadasz już stronę na facebook'u. Pisząc "stronę" mam właśnie na myśli właśnie "stronę" a nie twój profil osobisty zawierający Imię i Nazwisko.

Uwaga. Jeszcze do niedawna używana wtyczka LIKE BOX facebook'a jest już nieaktualna. Dlatego większość opisów w internecie dotycząca dodawania gadżetu facebook jest również nieaktualna, po prostu błędna.
Zatem jak dodać teraz stronę z facebooka na blogspot ... Bardzo łatwo i szybko dzięki opisowi poniżej dodamy wtyczkę PAGE PLUGIN.

KROK 1: Skopiuj adres swojej strony na facebooku

Wejdź na swoją stronę i skopiuj jej adres. Adres powinien wyglądać mniej więcej tak:

https://www.facebook.com/twoja_strona

KROK 2: Skonfiguruj wygląd wtyczki facebook Page Plugin

1. Wejdź na stronę https://developers.facebook.com/docs/plugins/page-plugin
   Zobaczysz opcje konfiguracyjne i podgląd wyglądu wtyczki. Na początku jest to wygląd skonfigurowany dla fanpage samego Facebooka zawierający również posty publikowane na fb
2. Facebook Page URL (adres strony na Facebook'u) - zmień na własny
   domyślnie wpisany jest tu adres strony Facebooka, usuń zawartość pola i wklej adres własnej strony (skopiowany wcześniej). Wciśnij Enter lub przejdź np do pola Width, by odświeżyć wygląd wtyczki. Wtyczka powinna teraz zmienić się i pokazywać twoją stronę. Jeśli źle wkleiłeś adres, lub np użyłeś adresu profilu osobistego a nie strony, zobaczysz błąd:
   Błąd: to nie jest prawidłowy adres URL strony na Facebooku.
   
   Po wklejeniu własnego adresu:
   
   
3. Tabs (Zakładki)
   Domyślnie wtyczka pokazuje również posty opublikowane na osi czasu Fanpage'a. Jeśli nie chcesz ich wyświetlać usuń zawartość pola, czyli słowo timeline (oś czasu).
   
   
   
4. Height (wysokość) -  pozostaw puste, by automatycznie dostosowała się do bloga
   Width (szerokość)- pozostaw puste, by automatycznie dostosowała się do bloga
    
5. Adapt to plugin container width -pozostaw zaznaczone, by wtyczka dopasowała się do twojego bloga
   Show Friend's Faces - pozostaw zaznaczone, jeśli chcesz widzieć zdjęcia osób
   Use Small Header - zaznacz, jeśli chcesz  zmniejszyć nagłówek (będzie niższy) oraz nie chcesz wyświetlać drugiego przycisku np "Udostępnij" (lub inny który ustawisz/skonfigurujesz na swojej stronie)
   Hide Cover Photo - zaznacz, jeśli nie chcesz pokazywać swojego tła ze strony

Skonfiguruj wtyczkę według swoich upodobań. Cały czas widzisz jak będzie ona wyglądała na twoim blogu. Początkowo wystarczy jak oznaczyć opcję Adapt to plugin container width, nie wpisuj wartości Height ani Width. Jeśli już sprawdzisz na blogu ten gadżet i okaże się, że nie dopasował się wielkością do twojego bloga, np do paska bocznego to możesz skonfigurować go jeszcze raz wpisując te wartości. Najpierw jednak spróbuj bez ich uzupełniania.

----------------------------------
Aktualizacja (13 stycznia):
Dostępna wcześniej opcja Show Page Posts została zamieniona na pole Tabs


Tak było do tej pory:

----------------------------------

KROK 3: Pobierz kod wtyczki

Teraz pora na pobranie kodu gadżetu. Kliknij przycisk Get Code. Mamy dwa pola do skopiowania.

KROK 3: Skopiuj i wklej pierwszy kod

Pora teraz na kopiowanie. Mamy dwa kody do skopiowania. Nie zamykajmy tego okna, aż do ukończenia całości instrukcji.

• Klikamy w pierwszy kod, zostanie on zaznaczony. Teraz kopiujemy wciskając jednocześnie klawisze CTRL i C lub klikając prawym klawiszem myszy i wybierając Kopiuj
• Teraz trudniejsze zadanie, edycja szablonu. Przed modyfikacjami wykonaj kopię szablonu. Ja nie będę teraz tutaj tego opisywać. Wejdź w posta: Jak wykonać kopię szablonu bloga i krok po kroku wykonaj wszystkie polecenia. Przejdź do następnego kroku tylko jeśli posiadasz już kopię.
  Po co ta kopia? Jeśli wykonasz niepoprawnie dalsze instrukcje, obecny wygląd bloga może ci się całkowicie "rozjechać". A wystarczy nawet jeden niefortunny znaczek ...
• Przechodzimy do swojego bloga na blogspocie. Klikamy SZABLON, następnie EDYTUJ KOD HTML

•  Pora teraz na odszukanie w kodzie szablonu tekstu (łącznie z ostrym nawiasem na poczatku): <body
• Klikamy w pierwszą linię kodu i wciskamy jednocześnie klawisze CTRL i F. Otworzy się okienko zapytań, w które wpisujemy <body  (całość łącznie z nawiasem ostrym)  i wciskamy Enter, by wyszukać ten fragment. Może on wyglądać tak jak poniżej, na początku jest <body, potem jakiś kod, i na końcu nawias zamykający >

• Wyszukany fragment został oznaczony żółtym tłem (tu widok z przeglądarki Chrome). Ustawiamy teraz kursor na koniec linii (po ostrym nawiasie zamykającym ">" wyrażenia <body ... tu jest nadal jakiś kod ...>)  i wciskając Enter robimy pustą linię. Możemy wcisnąć kilka razy Enter, by zrobić sobie więcej miejsca:
• 
  

• Będąc w tej pustej linii wklejamy skopiowany wcześniej kod z facebooka (czyli wciskamy CTRL i V lub klikamy prawym przyciskiem myszy i wybieramy Wklej)

• zapisujemy zmiany klikając przycisk Zapisz szablon. 

Jeśli zobaczyłeś błąd:

Błąd podczas analizowania pliku XML, wiersz ..., kolumna ...: The reference to entity "version" must end with the ';' delimiter

to w linijce zawierającej:

 js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.3";

popraw znaczek & na &amp;

KROK 4: Skopiuj i wklej drugi kod

Teraz prostsze zadanie. 

• Wracamy na facebook i kopiujemy drugi kod
• przechodzimy na blogspot i wchodzimy w UKŁAD, a następnie wybieramy miejsce na naszą wtyczkę facebook (np na pasku bocznym lub w dole bloga) i klikamy DODAJ GADŻET. Przewijamy listę, szukamy i klikamy gadżet HTML/JavaScript
• Uzupełniamy pole Tytuł np My na Facebooku, a następnie w pole poniżej wklejamy skopiowany wcześniej kod:

• zapisujemy zmiany klikając przycisk ZAPISZ

Gratulacje. Właśnie dodałeś swoją stronę facebook na bloga blogspot. Masz teraz gadżet, okienko, czy też inaczej zakładkę, gdzie widzisz kto lubi twojego bloga.

Zobacz również:

•  Jak dodać newsletter na bloggera (blogspot)
•  Jak dodać gadżet Pinterest

Zatem wiesz już Jak się nazywa gadżet na blogspot gdzie możesz reklamować swojego facebooka. Potrafisz dodać gadżet Polub nas na facebook'u na swojego bloga i wiesz jak zrobić "znajdź mnie na facebooku". 

Czego jeszcze nie wiesz? Już niedługo:

• Jeśli założyć stronę na facebooku promującą blog, to jaki rodzaj wybrać?
• Jak dodać na bloga ikonki, skróty na Facebooka?
• Jak na facebook'u przypinać posty z bloga?
• Jak zrobić wysuwany facebook, likebox na bloga blogspot?
• Jak dodać ikony społecznościowe i gdzie je znaleźć?
• Jak dodać przycisk LUBIĘ TO przy każdym poście na blogu?