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:

like-box-facebook

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:

like box facebook

W mojej ulubionej tak:

like box facebook

A w najbogatszej tak:like box facebook

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.

facebook like box

 

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.

Facebook-pop-up

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.facebook pop-up wordpressAktualnie 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.

Lubię to pod wpisem

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ć.

lubię to  udostępnij blogger

  1. 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&amp;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:
    lubię to facebook
  2. Kod z drugiego okienka. Ten kod również musimy trochę zmodyfikować.
    Przed kodem dodajemy:
    <b:if cond=’data:blog.pageType == &quot;item&quot;’>
    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:
    lubię to facebook blog
    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.

lubię to na wordpress

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:)

sciskam-karolina1-300x157