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:
<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”:
<a name="fb_share" type="button_count" share_url="<?php the_permalink();?>" href="http://www.facebook.com/sharer.php">Udostępnij</a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 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:
<script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script> <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:
<!-- 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.
<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