Marsjana.net

No cóż, korzys­ta­jąc z okazji, że tu już piszę, chci­ałbym się pochwalić zaję­ciem przez moją drużynę pier­wszego miejsca na szczeblu wojew­ódzkim w Dial­Net Mas­ters. W środę wyjeżdżamy na pół­fi­nały. Może­cie trzy­mać za nas kciuki anon­i­mowo, lub też zare­je­strować się jako kibic.

Screen Fanpage’a, na którym jest screen z Mars­jany. Nawet w dwóch kopi­ach. Prawie jak Skom­p­likowany Sys­tem Luster.

A teraz do mer­i­tum — Marsjana.net¹ doro­biła się włas­nego fan­page na Face­booku. Zapraszam więc do lubi­enia bezpośred­nio tutaj, w stopce strony, bądź też na samym Fb. Na razie pod­piąłem tam tylko kanał RSS, ale może­cie być pewni, że prędzej czy później zaczną się tam pojaw­iać ekskluzy­wne mate­ri­ały niedostępne nigdzie indziej². Dodałem też możli­wość Lajkowa­nia³, z której to jestem najbardziej dumny. Ponieważ posiedzi­ałem nad tym trochę i u mnie kliknię­cie tego przy­cisku nie wrzuca po prostu suchego odnośnika⁴, ani też odnośnika z losowym obrazkiem, którym może okazać się wlepka z side­bara⁵. U mnie ten guzik wrzuca pier­wszy obrazek, który zna­jdzie się w treści wpisu (a nie gdziekol­wiek na stronie), a w przy­padku braku obrazków do Face­booka przekazy­wany jest screen strony (taki sam, jak ten ustaw­iony jako obrazek fan­page). Trochę się nad tym nasiedzi­ałem, więc pokazuję, jak taki efekt uzyskać prosto w każdym blogu opar­tym o WordPressa.

Uwaga — będzie tech­nicznie. Jeśli nie intere­suje Cię grze­banie w plikach PHP nawet na poziomie kopiuj-wklej w odpowied­nie miejsce, nie czy­taj dalej. Chyba, że bardzo chcesz.

Więc po pier­wsze, musisz w ogóle mieć lajk­batony na swoim blogu. Najproś­ciej dostać je instalu­jąc jakąś wty­czkę, albo samodziel­nie generu­jąc odpowiedni kod na odpowied­niej stronie Fb. Ja, kiedy tylko jest taka możli­wość, wolę zro­bić coś samemu i dobrze, a nie ufać jakiejś wty­czce, więc oczy­wiś­cie wybrałem drugą możliwość.

Krok pier­wszy — gen­erowanie kodu

Sam for­mu­larz jest po ang­iel­sku, ale to chyba nie prob­lem — wszys­tko jest zrozu­mi­ałe nawet dla laika, a użytkownik i tak zobaczy wer­sję zależną od ustaw­ień językowych swo­jego pro­filu na Fb… Ale może po kolei:

• URL to Like — na razie wpisu­jemy w to pole cokol­wiek, byleby było łatwo je później odnaleźć w kodzie. W końcu adres będzie gen­erowany dynam­icznie, w zależności od wpisu.
• Lay­out Style — kwes­tia gustu oraz szablonu. Ja zostaw­iłem stan­dard, ale jestem w stanie sobie wyobrazić parę sytu­acji, w których lep­sze będą inne opcje. Wybier­a­jąc je z listy, generu­jemy podgląd po prawej.
• Show Faces — no jasne! Przy­na­jm­niej dla mnie. W końcu użytkown­ikowi łatwiej będzie “pol­u­bić” link, który “lubi” już tylu jego zna­jomych…
  
• Width — no, sze­rokość. Zależnie od szablonu. Domyślna powinna pasować na więk­szość stron, ja u siebie ją min­i­mal­nie zwiększyłem.
• Verb to dis­play — jak kto woli. Do wyboru “Lubię to!” i boda­jże “Pole­cam”. Wybrałem to pier­wsze — wiadomo, kul­towe…
• Font — można zostawić domyślne, lub dopa­sować do innych czcionek uży­tych na blogu.
• Color Scheme — proste, jeśli ktoś ma ciemny szablon, wybiera taki, a jeśli jasny, to taki.

No i w końcu — klikamy Get Code i podzi­wiamy efekt.

Nas intere­suje oczy­wiś­cie pier­wszy kod. Kopi­u­jemy go i wkle­jamy w wybranym miejscu w szablonie (Wygląd -> Edy­tor -> Poje­dynczy wpis). Teraz trzeba coś zro­bić z adresem — nic prost­szego.  Odszuku­jemy naszą frazę (w moim przy­padku adreswpisu), oraz zamieni­amy ją na <?php echo get_permalink(); ?>. Otrzy­mu­jemy więc coś na ksz­tałt tego:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo get_permalink(); ?>&layout=standard&show_faces=true&width=485&action=like&font=trebuchet+ms&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:485px; height:80px;" allowTransparency="true"></iframe>

I… w zasadzie na tym moglibyśmy to zakończyć, ale właś­ciwa zabawa dopiero się rozpoczyna.

Pod­suwanie Face­bookowi obrazków

Jak już pisałem, chci­ałem, żeby w przy­padku, gdy dana strona zaw­iera obrazki, jako ten do Like’a był pod­suwany pier­wszy z nich, a w przy­padku jego braku, jeden główny, wybrany przeze mnie (w tym przy­padku screen). Do tego trzeba… przewinąć trochę w dół.

Niżej na tej stronie zna­j­dują się dodatkowe wskazówki dla bardziej ambit­nych, na które niestety chyba więk­szość nawet nie zagląda. Mają przy­cisk i są szczęśliwi. Nawet giganci zal­iczają w związku z tym wpadki — Spi­der­sWeb swego czasu zro­biło aferę na pół inter­netu, że Fb cen­zoruje lajki, a potem okazało się to ich (SW) pomyłką. A o co chodzi? Oczy­wiś­cie o znaczniki Open­Graph, które mówią Fejs­bukowi, jak ma rozu­mieć treść na tej stronie. Takie Web 3.0 trochę. Właśnie te znaczniki trzeba wyko­rzys­tać, żeby przy wpisie była (odpowied­nia) miniaturka.

A więc co trzeba zro­bić? Najpierw trzeba jakoś ustalić, który obrazek we wpisie jest pier­wszy (oraz czy w ogóle jakiś jest), oraz dobrać się do jego adresu URL. Ja zgod­nie z poradą ze strony Dobe­web wstaw­iłem odpowiedni kod do pliku functions.php mojego szablonu (znowu kła­nia się edy­tor). Oczy­wiś­cie w linii $first_img = "/images/default.jpg"; wstaw­iamy adres włas­nego obrazka, który będzie wysyłany w przy­padku braku jakiegokol­wiek w treści wpisu, najlepiej w for­ma­cie bezwzględ­nym⁶. Jeśli w takim wypadku chcemy, by lajki wysyłane były bez jakiegokol­wiek obrazka, w ogóle kasu­jemy tę linijkę.

Teraz można już przys­tąpić do właś­ci­wego wstaw­ia­nia tagów. Chcemy, żeby w przy­padku wpisu, przy lajkach pojaw­iał się obrazek z jego treści, a w przy­padku strony głównej i innych, ten wybrany przez nas wcześniej. Również inne tagi różnią się w zależności od miejsca, w którym aktu­al­nie zna­j­duje się użytkownik, nasz kod musi więc to uwzględ­niać. Najprostrzym rozwiązaniem wydaje się być funkcja is_singular(), która zwraca Prawdę w przy­padku strony staty­cznej bądź wpisu. Gotowy kod prezen­tuje się następująco:

<meta property="og:site_name" content="Nazwa bloga"/>
<meta property="fb:admins" content="Fb ID"/>
<meta property="og:image" content="<?php echo catch_that_image() ?>"/>
<meta property="og:url" content="<?php echo site_url().$_SERVER['REQUEST_URI']; ?>"/>
<?php if(is_singular()) { ?>
<meta property="og:type" content="article"/>
<meta property="og:title" content="<?php single_post_title(); ?>"/>
<?php } else { ?>
<meta property="og:type" content="blog"/>
<meta property="og:title" content="Nazwa bloga"/>
<?php } ?>

Uwagę należy zwró­cić na linijki:

• <meta property="og:site_name" content="Nazwa bloga"/> — tutaj oczy­wiś­cie wstaw­iamy nazwę naszego blogaska
• <meta property="fb:admins" content="Fb ID"/> — Face­book ID. Zna­jdziemy je wygen­erowane tutaj.
• <meta property="og:title" content="Nazwa bloga"/> — jak wyżej, nazwa naszego bloga.

Pozostałe para­me­try są zwracane bezpośred­nio przez skrypt, więc nie trzeba się nimi prze­j­mować.
To wszys­tko razem sprawi, że lajki z naszej strony będą wyglą­dać zawsze tak, jak tego po nich oczeku­jemy, a nie tak, jak Fb aku­rat wylo­suje, oraz co sam wyczyta.

Mam nadzieję, że pomogłem. Jakby co — komen­tarze są Wasze. Lajk­b­u­tony — również.