Już jeden tekst na ten temat pisałem, przyszedł czas na aktualizacje i rozwiązane irytującego problemu ( wyświetlenie pełnego okienka / popupa po naciśnięciu „lubię to” ). Wcześniej kod odpowiedzialny za wyświetlenie przycisku FB ( lubię to / like it ) znajdował się w iframe. Są jeszcze inne sposoby, które są preferowane przez samego Facebooka.
Przycisk Like it w IFRAME
Dla przykładu mój stary kod dla przycisku „lubię to” jak i „udostępnij” ( fb share ) w iframe. Jak widać poniżej jest wklejony kod w PHP a w zasadzie funkcja API WP: the_permalink() generująca link do bieżącej strony:
1 2 3 4 | <div class="fb-like-post" style="float:left"><iframe src="https://www.facebook.com/plugins/like.php href=<?php the_permalink(); ?>" scrolling="no" frameborder="0" style="border:none; width:450px; height:25px"></iframe></div> |
I przycisk „Udostępnij”:
1 2 3 4 5 | <a name="fb_share" type="button_count"share_url="<?php the_permalink();?>"type="text/javascript"></script> |
Facebook Like it
„Lubię to” wersja 1
Czas na odświeżenie i spojrzenie na inne sposoby udostępniania przycisku Like it preferowane przez samego Facebooka. Poniżej prostsza wersja, nie wymagająca wklejania dodatkowego kodu JS ze skryptem z funkcją natychmiastową z SDK Facebooka:
1 2 | <fb:like href="[TUTAJ URL]" layout="button_count" width="450"></fb:like> |
Możemy oczywiście wprowadzić odpowiednie zmiany zmieniające wygląd lub funkcjonalność przycisku FB. Na samym dole zostały wyszczególnione wszystkie dostępne opcje dla obu wersji.
„Like it” wersja 2 z SDK
Na samym początku wklejamy poniższy kod zaraz po znaczniku BODY. W WordPressie będzie to plik header.php:
1 2 3 4 5 6 7 8 9 | <!-- Load Facebook SDK for JavaScript --> <div id="fb-root"></div> <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/en_US/sdk.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> |
Następnie dodajemy kod odpowiedzialny za wygenerowanie przycisku Like it. Aby w WordPress przycisk znajdował się w każdym artykule dodajemy kod do pliku: content.php w wybranym przez nas miejscu. U mnie przyciski FB pojawiają się pomiędzy tytułem a samym tekstem artykułu.
1 2 3 4 5 6 | <div class="fb-like" data-href="[ADRES URL]" data-layout="standard" data-action="like" data-show-faces="true"> </div> |
Strona z generatorem kodu przycisku Like it i Udostępnianie znajduje się na podstronie facebooka: Generator Like it
+ Podstawowe Opcje Pluginu FB:
| Opcja | Opcja z SDK / HTML5 | Ustawienia |
|---|---|---|
| action | data-action | like lub recommended zmiana napisu na przycisku |
| colorscheme | data-colorscheme | kolor przycisku – do wyboru: light lub dark |
| href | data-href | link, który ma być „zalajowany" / udostępniony |
| layout | data-layout | wybór wyglądu przycisku: standard, button_count, button lub box_count |
| share | data-share | Dodanie przycisku share ( udostępnianie ). Domyślnie jest ustawione na false, włączenie – true |
| show_faces | data-show-faces | pokazuje twarz użytkownika, który „zalajkował" daną stronę. Domyślne ustawienie: false, włączenie: true |
| width | data-width | szerokość pola dla pluginu |
Problemy
Natknąłem się na bardzo irytujący problem, przez który straciłem sporo nerwów. Dotyczy to w większości stron opartych na systemie WordPress. Otóż jeśli wybierzemy w ustawieniach przycisku Like it layout inny niż
Problem z przyciskiem Lubię to! / Like it!
Aby zaradzić temu problemowi w przypadku WordPressa, musimy dodać do globalnego pliku style.css na samym końcu odpowiednie właściwości przysłaniające domyślne:
embed, iframe, object
{
max-width: 635% !important;
}
Słowa kluczowe: przycisk lubię to, like it, wordpress, wp, facebook, fb, problemy z fb, przycina popup like it, niepełne okienko lubię to