publikacja: 18 stycznia 2010, 8:00; autor: Adam Klimowski http://wpninja.pl/dodawanie-komentarzy-do-wpisow-za-posrednictwem-konta-na-facebooku/

Dodawanie komentarzy do wpisów za pośrednictwem konta na Facebooku

Dodawanie komentarzy do wpisów za pośrednictwem konta na Facebooku

Właśnie mija rok od chwili, w której na stronach internetowych zaczęły pojawiać się przyciski Facebook Connect. Ta technologia jest używana przede wszystkim przez serwisy internetowe, które chcą ułatwić swoim użytkownikom rejestrację lub dodawanie komentarzy.

Ponieważ każdy WordPress jest takim serwisem, warto zainteresować się wtyczkami, które pozwalają na wykorzystanie Facebook Connect.

WP-FacebookConnect

Takich wtyczek jest coraz więcej, ale mnie najbardziej przypadła do gustu ta o nazwie WP-FacebookConnect. Pokażę Wam, jak wykorzystać jego możliwości.

Instalacja i uruchomienie

Zaczynamy od standardowej procedury, jaką jest ściągnięcie wtyczki, zainstalowanie jej i uruchomienie. Po wszystkim przechodzimy na podstronę Ustawienia/Facebook Connect i zastajemy taki obraz.

Panel administracyjny wtyczki Facebook Connect

Panel administracyjny wtyczki Facebook Connect

5-punktowa lista to krótka instrukcja zdobycia klucza API i „tajemnej” – dwóch linijek kodu, niezbędnych do uruchomienia wtyczki. Zaczynamy od przejścia na stronę Create Application; po wybraniu nazwy aplikacji zostajemy przerzuceni na jej stronę. Znajdują się tu oba kody, których potrzebujemy. Kopiujemy je do odpowiednich okienek w panelu wtyczki.

Strona aplikacji: klucz API i "tajemna"

Strona aplikacji: klucz API i "tajemna"

Ważne okienka i adresy

Teraz pora na uzupełnienie kilku innych okienek. Wracamy do strony naszej aplikacji i uzupełniamy następujące pola:

  • w zakładce Podstawowe/Adresy URL, które widzi użytkownik./Adres URL zakładki wpisujemy coś w rodzaju http://apps.facebook.com/naszanazwa/ – naszanazwa zastępujemy unikalną nazwą naszej aplikacji.
  • w zakładce Strona ramowa/Required URLs/Adres URL strony ramowej podajemy tę samą unikalną nazwę naszej aplikacji, co w poprzednim punkcie.
  • w zakładce Strona ramowa/Required URLs/Canvas Callback URL podajemy adres, pod którym aplikacja będzie mogła znaleźć potrzebne jej pliki. Akurat w przypadku tej wtyczki żadne pliki nie są potrzebne, ale adres i tak trzeba podać sugeruję coś w rodzaju http://wpninja.pl/facebook/ (koniecznie ze slashem na końcu).
  • w zakładce Strona ramowa/Optional URLs/Post-Authorize Redirect URL podajemy ten sam adres, co w punkcie pierwszym (http://apps.facebook.com/naszanazwa/).
  • w zakładce Połącz/Facebook Connect Settings/Connect URL podajemy adres naszego bloga.

To były zabiegi obowiązkowe. Jeśli ktoś ma za dużo wolnego czasu, może jeszcze zadbać o ikonkę, logo i opis aplikacji :)

Jeszcze o wtyczce

Ponownie wracamy do panelu administracyjnego naszej wtyczki. Zostały do ustawienia dwie opcje:

  • Force Reload of Template Bundle from config.php (resets ID) – opisana poniżej
  • Strip nofollow from Facebook comment author links – dotyczy atrybutu nofollow w linkach komentatorów, którzy skorzystają z Facebook Connect. Pozostawiam to Waszemu uznaniu.

Template Bundle

Jeśli ktoś doda komentarz do wpisu, korzystając z opcji logowania się via Facebook, zostanie zapytany o to, czy zechce opublikować informację o tym na swojej tablicy.

Standardowa informacja o nowym komentarzu na blogu

Standardowa informacja o nowym komentarzu na blogu

Jeśli jednak zaznaczymy Force Reload of Template Bundle from config.php i dokonamy w pliku config.php odpowiednich zmian, to zmiany tego komunikatu ogranicza jedynie nasza wyobraźnia (i wymóg, by nazwa autora komentarza zawsze znajdowała się na początku informacji). Plik znajduje się w katalogu wtyczki.

<?php
 
/* Controls whether the absolutely positioned "Welcome, username"
window is displayed.  If this is disabled you *must* place equivalent
information somewhere on your page.  */
define('FBC_USER_PROFILE_WINDOW', true);
 
define('FBC_ANONYMOUS_DISPLAYNAME', 'użytkowniku Facebooka');
 
// enable to turn on login state headers (for debugging)
define('FBC_DEBUG_LOGIN_HEADER', false);
 
/*
In each of the templates below, the first template is for a single
story and the second template is for an aggregated story.
*/
$fbc_one_line_stories = array(
'{*actor*} dodał(a) komentarz do wpisu "<a href="{*post-url*}">{*post-title*}</a>" na <a href="{*blog-url*}">blogu WPNinja</a>.',
'{*actor*} dodał(a) komentarz do wpisu na <a href="{*blog-url*}">blogu WPNinja</a>.'
);
 
$fbc_short_story_templates = array(
array('template_title' =>
'{*actor*} dodał(a) komentarz do wpisu "<a href="{*post-url*}">{*post-title*}</a>" na <a href="{*blog-url*}">WPNinja</a>.',
'template_body' => ''),
array('template_title' =>
'{*actor*} dodał(a) komentarz na <a href="{*blog-url*}">blogu WPNinja</a>.',
'template_body' => '')
);
Podrasowany komunikat o nowym komentarzu na Facebooku

Podrasowany komunikat o nowym komentarzu na Facebooku

Plik po moich zmianach. Pamiętajcie, że na początku zawsze musi być {*actor*}.

Komentarze i awatary

Aby dodać przycisk, dzięki któremu czytelnicy bloga będą mogli skorzystać z Facebook Connect, należy wkleić kod do pliku comments.php. Polecam układ, jaki zastosowałem u siebie na blogu – dzięki temu nawet zalogowani na blogu użytkownicy będą mogli przetestować wtyczkę.

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>URL</small></label></p>
 
<?php endif; ?>
 
<?php do_action('fbc_display_login_button') ?>

Można jeszcze zadbać o lanserskie awatary (z logo Facebooka w prawym dolnym rogu). Kod to <?php echo get_avatar( $comment, 32 ); ?> – także wklejany do pliku comments.php.

Przydatne linki:

Komentarze (24)

  1. Kmit (18 stycznia 2010, 18:22) #:

    Hehe, a my przez prawie tydzień głowiliśmy się jak u siebie to zrobić ;) I choć trochę na około to udało nam się i wszystko działa jak należy.

    Szkoda, że nie przeczytałem tego wpisu wcześniej.

  2. Malin (18 stycznia 2010, 19:13) #:

    Ważna uwaga. Facebook Connect NIE ZADZIAŁA, jeśli na stronie jest już facebookowy widget z fanami strony (typu WPNinja na Facebooku plus przycisk „Zostań fanem”). Generalnie chodzi o to, że można mieć tylko jedno połączenie do Facebooka na danej stronie. Widget z fanami to jedno połączenie, FacebookConnect to drugie. Zawsze będzie nam wyskakiwał błąd logowania.

    Jedynym wyjściem jest umieszczenie ramki z fanami na osobnej statycznej stronie i umieszczenie jej w blogu w iframe. Wszystko jest dokładnie opisane na stronie http://wiki.developers.facebook.com/index.php/WP-FBConnect – na samym dole, ostatnie pytanie i odpowiedź w dziale Troubleshooting / FAQ.

  3. Adam Klimowski (18 stycznia 2010, 19:18) #:

    @Malin: ciekawa uwaga – u mnie jest i Facebook Connect, i ramka fanów (nie w iframe), a wszystko chodzi bez problemów.

  4. Malin (18 stycznia 2010, 22:05) #:

    No proszę, czary z mleka :-) Może któreś z połączeń jest inaczej nawiązywane. Nie znam szczegółów, po prostu na stronie, do której próbowałem podłączyć facebook connect była taka właśnie sytuacja i to rozwiązanie znalazłem na wiki developerów facebooka.

  5. Darku (19 stycznia 2010, 19:48) #:

    Pierwsze primo; genialna sprawa… PS: Dlaczego WPNinja sobie czegoś takiego nie strzeliło. Secundo; twój pomysł Adamie, podany do dodania „Połącz” na wszystkich stronach nawet dla zalogowanych, zalicza się także do panelu logowania /wp-admin/… nie wiem czy tak powinno być.

  6. Darku (19 stycznia 2010, 20:12) #:

    Dodatkowo w przypadku linku „w zakładce Strona ramowa/Required URLs/Canvas Callback URL podajemy adres, pod którym aplikacja będzie mogła znaleźć potrzebne jej pliki”, mamy tutaj stronę która de facto wyświetli się „na stronie” aplikacji Facebook. Czyli jeśli ktoś pisał i zerknie potem do profilu na zakładkę „aplikacje” dostaje on dostęp do tegoż miejsca… co w przypadku nieistniejącego linku oznacza błąd 404…

  7. aniec2 (23 stycznia 2010, 0:44) #:

    Sto lat, sto lat bo mógłbym zapomnieć:)

  8. Szymon Skulimowski (23 stycznia 2010, 10:39) #:

    Dzięki :-).

  9. Robert Głowacki (24 stycznia 2010, 13:59) #:

    A czy ktoś z was testował może plugin do wordpressa (darmowe) od firmy gigya.com?
    Umożliwia on podobno logowanie sie do wordpressa przy pomocy kont na facebooku, twitterze, myspacie, googlu, yahoo i aol.
    Nie mialem ostatnio czasu zeby to przetestować na swoich stronach i jestem ciekaw czy ktos ma jakies opinie na ten temat.

  10. Adam Klimowski (24 stycznia 2010, 22:19) #:

    Dopiero teraz przypomniałem sobie, że dziś urodziny Szymona :) Wszystkiego najlepszego!

  11. Michał Leśniowski (27 stycznia 2010, 12:02) #:

    Robercie ja właśnie testuje i jednym słowem wtyczka jest świetna. Mniej zachodu z konfiguracją, a udostępnia połączenie z tak wieloma serwisami. Polecam ;)

  12. piotr (7 marca 2010, 22:06) #:

    Cześć wszystkim zaintrygował mnie temat ponieważ chciałbym podłączyć cześć treści mojej strony do Facebooka tak by automatycznie tresc w nią wpisana implementowana była w moje konto na f.b. Pytanie najprostsze – jak to zrobić?

  13. Levre (8 marca 2010, 7:11) #:

    na tablicy wchodzisz w Opcje/Ustawienia z dostępnych witryn dodajesz Blog/RSS gdzie wpisujesz http://twoja_strona.pl/feed/

  14. piotr (12 marca 2010, 10:49) #:

    Levre – sorry jestem imbecylem gdzie znajde w koncie na facebooku tablice o ktorej mowisz?

  15. piotr (12 marca 2010, 12:35) #:

    a chyba widze jak cos nie da sie dodac to bede prosił o dalszą pomoc.

  16. piotr (19 marca 2010, 9:04) #:

    Pytanko. Mam stronkę na facebooku z tym ze widoczna jest tylko dla zalogowanych widzów. jak to zmienić by był on widoczny dla wszystkich ktorzy klikną linka.

  17. SEm (1 czerwca 2010, 20:40) #:

    piotr robisz tak: klikasz na swojego awatara-zdjęcie na f-b, zakładka wall->na niej option->klikasz w option->wyświetla się settings-> tam w Available Sites:
    wybierasz RSS i wpisujesz adres swojego feeda rss

  18. fred (4 czerwca 2010, 21:33) #:

    witam, czy jest możliwość uruchomienia facebook connect na php4 ?

  19. Bluff (19 czerwca 2010, 13:02) #:

    Dzięki za wpis właśnie czegoś takiego szukałem :)

  20. sid (5 lipca 2010, 10:51) #:

    Super instrukcja! Naprawdę ułatwiła mi życie! :)

  21. modelarstwo (10 lipca 2010, 10:20) #:

    Świetny tekst, nareszcie porządna instrukcja.

  22. mg (12 lipca 2010, 23:11) #:

    Drodzy (bo tu chyba sami panowie:) – mozew ktorys z Was moglby mi lopatologicznie pomoc, bo mnie to zdecydowanei przeroslo. Mam sklep www i jego profil na FB. I chcialabym, aby na stronach produktowych byla mozliwosc klikniecia facebookowego „I like”. Bede BARDZO wdzieczna za pomoc, tylko blagam, tak jak dla blondynki.

  23. Marcin (15 lipca 2010, 19:47) #:

    Mam u siebie ramke fanów w iframe jako Widget, FB connect działa w Firefoxie ale w Internet Explorerze pojawia sie tylko tekst „Connect with your Facebook Account” i nie pojawia się button do zalogowania sie przez Facebooka przez co faktycznie wtyczka nie dziala poprawnie, nie mozna sie zalogowac przez FB. Jak zrobic zeby poprawnie wyswietlalo sie w IE ?

  24. geryy (22 lipca 2010, 21:27) #:

    witam, mam problem. wydaje mi się, że zrobiłem wszystko według wskazówek.
    jednak pojawia się błąd

    „An error occurred with gera_blog_comment. Please try again later.

    API Error Code: 100
    API Error Description: Invalid parameter
    Error Message: next is not owned by the application.”

    natomiast w statystykach aplikacji na facebooku nie ma żadnych informacji o błędnych wywłaniach API.

    co może być problemem? Z gór dziękuję za odpowiedź

Dodaj własny komentarz

Odnośniki z innych stron (2)

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

  1. Facebook + Wordpress | Netgeeks

    [...] końcu Kmita podsunął mi wpis na wpninja, który w przystępny sposób opisywał cały proces. Trochę poczytałem, trochę sam [...]

  2. Dodawanie komentarzy do wpisów za pośrednictwem konta na Facebooku | Blog Manager

    [...] Ponieważ każdy WordPress jest takim serwisem, warto zainteresować się wtyczkami, które pozwalają na wykorzystanie Facebook Connect. (więcej na WP Ninja…) [...]