Dostawałam ostatnio głosy, że potrzebujecie instrukcji dotyczących dodatków łączących bloga z Facebook‘iem. Pomyślałam, że to dobry moment, aby o nich napisać, ponieważ w połowie tego roku dotychczasowa wersja LikeBox’a przestanie działać, więc już teraz warto go zmienić. Dlatego ten wpis dedykowany jest również dla osób, które już mają u siebie dodatek pozwalający polubić funpage prosto z bloga. Oprócz tego pokażę jak dodać wyskakujące okienko, zachęcające do polubienia fanpage’a (wiele osób drażnią takie dodatki, ale są też takie, które chcą je mieć) oraz przycisku Lubię to! i Udostępnij pod każdym wpisem. Dla każdego dodatku przygotowałam instrukcję dla Bloggera i WordPressa. Wpis jest dość obszerny i techniczny – mam nadzieję, że Was to nie zniechęci. Starałam się wszystko czytelnie opisać, jednak jeśli coś jest niezrozumiałe nie krępujcie się pisać w komentarzach.
3 dodatki na bloga Facebook
LikeBox – Facebook
Aktualnie LikeBox, pozwalający bezpośrenio z bloga polubić stronę na Facebook’u wygląda tak:
Tak jak w poprzedniej wersji, tak i teraz możemy zdefiniować pewne parametry wyglądu dodatku. Oprócz szerokości możemy pokazać bądź ukryć:
- zdjęcie, które mamy ustawione jako okładkę
- twarze znajomych osób, które lubią już naszą stronę
- ostatnie statusy
W najbardziej minimalistycznej wersji będzie to wyglądało tak:
W mojej ulubionej tak:
A w najbogatszej tak:
To nie są oczywiście wszystkie możliwe konfiguracje. Żeby zdefiniować wygląd naszego widgetu wystarczy wejść na stronę: developers.facebook.com. Musimy być zalogowane na prywatne konto, a nie na konto strony. Uzupełniamy pola i wybieramy opcje.
Po ustawieniu wszystkich parametrów klikamy na Get Code. To co z tymi kodami robimy zależy od tego gdzie mamy bloga.
BLOGGER
Logujemy się do bloggera i wybieramy zakładkę UKŁAD. Dodajemy nowy gadżet w miejscu w którym chcemy mieć swój LikeBox (np. w bocznej kolumnie lub stopce). Wybieramy gadżet, który nazywa się HTML/JavaScript. W jego treści wklejamy kody z obu okienek, jeden pod drugim. Zapisujemy gadżet. Możemy go jeszcze przeciągnąć w inne miejsce, a następnie zapisujemy całe rozmieszczenie.
W instrukcji widocznej na Facebook’u napisane jest, aby jeden z kodów umieścić w kodzie strony, ale podczas testów u mnie ta metoda nie działała.
WORDPRESS
Logujemy się do Worspress’a i wybieramy zakładkę WYGLĄD>PERSONALIZACJA, a następnie WIDGETY. Wybieramy, gdzie ma być widoczny nasz LikeBox (kolumna boczna, stopka) i klikamy w Dodaj widget. Szukamy tego, który nazywa się Tekst. W jego treść wklejamy kody z obu okienek, jeden pod drugim. Zapisujemy zmiany i gotowe.
Na WordPressie można oczywiście poszukać również odpowiedniej wtyczki (aktualnie korzystam z takiej, która nazywa się Jetpack – ma ona wiele różnych funkcji i dodatków)
POP-UP Facebook
Pop-up to wyskakujące okienko. Teraz pokażę jak dodać takie, które zachęca do polubienia funpage’a.
BLOGGER
Wchodzimy na stronę Webfrik.pl i generujemy kod naszego gadżetu. Logujemy się do bloggera i wybieramy zakładkę UKŁAD. Dodajemy nowy gadżet, który nazywa się HTML/JavaScript. W jego treści wklejamy pobrany kod. Zapisujemy zamiany i gotowe.
WORDPRESS
Jeśli chcemy podobny dodatek mieć na WordPressie najprościej zainstalować odpowiednią wtyczkę. Polecić mogę Facebook FanBox Popup. Po zalogowaniu do WordPress’a wejdź we WTYCZKI>DODAJ NOWĄ. W okienko wyszukiwania wklej Facebook FanBox Popup i wciśnij Enter. Kliknij Zainstaluj przy wyszukanej wtyczce, a następnie Włącz. Teraz przechodzimy do zakładki USTAWIENIA>Facebook FanBox Popup i tam podajemy adres naszego profilu na Facebook’u i konfigurujemy inne ustawienia. Aby zapisać ustawienia klikamy Save Changes.
Aktualnie testuję tę wtyczkę i konfigurując ją przyświecało mi, aby nie była zbytnio irytująca. Dlatego wyświetla się ona dopiero po 20 sekundach przebywania na stronie i nie częściej jak raz na 14 dni. Ciekawa jestem czy takie parametry są dla Was do zaakceptowania? Jeżeli zmieniłaś jakieś ustawienia i chcesz zobaczyć jak Twoja wtyczka działa kliknij w Delete Cookie i odśwież swojego bloga.
Podczas testów, używanie opcji blokowania przewijania strony podczas wyświetlania okienka, powodowała problemy z działaniem strony. Blokowanie zdarzało się nawet, gdy okienko nie było wyświetlanie. Z tego powodu proponuję nie używać tej opcji (należy oznaczyć ją OFF)
Lubię to! i Udostępnij pod każdym postem
Ostatnim dodatkiem, który dzisiaj chcę opisać to przyciski Lubię to i Udostępnij pod każdym postem. Mają one za zadanie ułatwić dzielenie się treściami znalezionymi na blogu. Wygląda to jak poniżej.
BLOGGER
Dodanie tych przycisków do bloggera nie obejdzie bez pogrzebania w kodzie szablonu. Dlatego zanim zaczniesz koniecznie pobierz jego kopię. Wystarczy usunąć jeden nawias, aby wszystko nam się posypało, a później ciężko znaleźć błąd, dlatego nie pomijaj tego. Wejdź na stronę developers.facebook.com i tam oznaczając poszczególne opcje wybierz jak mają wyglądać Twoje przyciski. Następnie kliknij Get Code. Wyskoczy okienko z dwoma kodami. Przed wklejeniem na bloga musimy je zmodyfikować.
- Kod z pierwszego okienka. Znajdź w nim znaczek & dopisz zaraz zanim amp;
Fragment kodu przed zmianą:
js.src = “//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.3″;
Fragment kodu po zmianie:
js.src = “//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.3″;Cały kod z pierwszego okienka po naniesionej zmianie musimy wkleić do szablonu bloga w odpowiednim miejscu. Wejdź w SZABLON>EDYTUJ KOD HTML. Kliknij na dowolny fragment kodu i jednocześnie wciśnij klawisze ctrl i f. Pojawi się okienko wyszukiwania w którym wklej </body> i wciśnij enter. Zmodyfikowany kod wklej bezpośrednio nad tą frazą i zapisujemy. Będzie to wyglądać mniej więcej tak:
- Kod z drugiego okienka. Ten kod również musimy trochę zmodyfikować.
Przed kodem dodajemy:
<b:if cond=’data:blog.pageType == "item"’>
a za nim:
</b:if>Oprócz tego fragment:
data-href=”https://developers.facebook.com/docs/plugins/”
zamieniamy na:
expr:data-href=’data:post.canonicalUrl’Tak zmodyfikowany kod musimy wkleić w odpowiednim miejscu. Aby przyciski pojawiły się nad stopką wpisu w kodzie szablonu odnajdujemy fragment:
<div class=’post-footer’>
i nasz zmodyfikowany kod wklejamy na tą frazą. Jeśli przyciski mają być w stopce to kod wklejamy pod. Fraza ta występuje dwa razy w szablonie i najlepiej czynność powtórzyć dla obu (przyciski pojawią się wówczas również w wersji mobilnej naszej strony). Zapisujemy. Całość ostatecznie będzie wyglądać mniej więcej tak:
Przygotowując ten fragment wpisu posiłkowałam się tematem na forum.blogowicz.info
WORDPRESS
Dodanie tych przycisków na WordPressie jest bardzo proste. Wystarczy zainstalować odpowiednią wtyczkę. Po zalogowaniu do WordPress’a wejdź we WTYCZKI>DODAJ NOWĄ. W okienko wyszukiwania wklej Facebook Like Button by BestWebSoft i wciśnij Enter. Kliknij Zainstaluj przy wyszukanej wtyczce, a następnie Włącz. W panelu pojawi się nowa zakładka BWS PLUGINS. Wybieramy ją i wchodzimy w Facebook Button. W tym miejscu pozostaje nam skonfigurować ustawienia. Najważniejszym jest dodać nazwę swojej strony na facebooku, bądź jej ID. Jeśli macie wątpliwości co wpisać w tym polu najbezpieczniej będzie wejść na stronę findmyfacebookid.com Wklejamy na niej adres naszego finpage’a i klikamy Lookup numeric ID. Pojawi się ciąg cyfr, który jest numeryczną wersją adresu naszego konta na Facebook’u. Numer ten wklejamy w polu Your Facebook ID or username. Nastepnie wybieramy przyciski, które mają być widoczne (Like, Share). Umiejscowienie przycisków wybieramy z listy rozwijanej w polu Facebook Button Position (Before – na początku wpisu, After – na końcu wpisu, Before and After – na początku i końcu wpisu). Warto jeszcze zmienić język na Polski i już możemy zapisać klikając na Save Changes.
To już wszystko co dla Was na dzisiaj przygotowałam. Ciekawa jestem czy użyjecie któryś z dodatków u siebie ( a może wszystkie?). Przygotowanie tej instrukcji zajęło mi sporo czasu więc jeśli uznasz, że może się jeszcze komuś przydać to będzie mi bardzo miło jeśli użyjesz przycisków poniżej:)
