Facebook like it

Przycisk Like it Facebook na stronie WP

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 Lubię to

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ż to zostanie przycięty POPUP ( okienko z dodawaniem komentarza i podglądem fragmentu strony ).

Niepełne okno popup FB

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

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *


− 1 = trzy

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre user="" computer="" escaped="">