Přejít k navigační liště

Zdroják » Různé » Facebook Custom Stories

Facebook Custom Stories

Články Různé

Facebook Custom Stories je jedna z možných forem publikování na Facebooku z aplikací užívajících jeho API. Nejvýrazněji je vidět například u uživatelů Instagramu, který je využívá pro zobrazování oblíbených fotografií, jiné aplikace je využívají spíše jen jejich textovou formu. V tomto článku se podíváme, jak jsme Custom Stories implementovali my v GoOut.cz.

Facebook Custom Stories je jedna z možných forem publikování na Facebooku z aplikací užívajících jeho API. Nejvýrazněji je vidět například u uživatelů Instagramu, který využívá pro zobrazování oblíbených fotografií, jiné aplikace je využívají spíše jen jejich textovou formu. V tomto článku se podíváme, jak jsme Custom Stories implementovali my v GoOut.cz.

1. ukazka english

Custom stories umožňují definovat objekty a uživatelské akce nad nimi prováděné, které se pak ve velice pěkné formě zobrazují v newsfeedu. Nejběžnější custom stories jsou pouze textové, generované všemožnými hrami: “Jane Doe dosáhla úrovně 7 v aplikaci Supaplex.” Pro zobrazení obrázkových stories je potřeba mít obrázky unikátní a musí odpovídat uživatelské aktivitě. Každá custom story musí být vyvolána aktivitou uživatele v aplikaci, tudíž je aplikace nesmí generovat svévolně.

Implementace

Nejprve je potřeba definovat odpovídající akce a objekty na https://developers.facebook.com/x/apps/<APP_ID>/open-graph/. V obou případech je Facebook docela striktní, například akce “Follow” umožňuje sledovat pouze objekty typu “Person”, či akce “Like” musí být ve vaší aplikaci zobrazena symbolem, který aktivitě odpovídá – tedy palec nahoru, srdíčko, či podobné. Akce i objekt musí mít jednoznačný a neofensivní název, který nesmí vést ke zmatení uživatele. Proces schválení uživatelských stories je popsán detailně na stránce Custom Stories Submission Process, obecné akce jsou uvedeny v Open Graph Actions.

V našem konkrétním případě může uživatel GoOut.cz vyvíjet tři rozdílné aktivity, z nichž budeme dále vycházet:

  • sledování míst
  • sledování umělců
  • přidávání akcí do kalendáře

Nejprve je potřeba definovat objekty, se kterými budeme pracovat. Ty definujeme jejich URL a <meta> značkami v jejich obsahu. Například umělec na obrázku “Moderat” identifikovaný URL http://goout.cz/cs/kapely/moderat/vpac/ má v HTML kódu následující:

<meta property="fb:admins" content="100001224175510"/>
<meta property="fb:app_id" content="124258840997748"/>
<meta property="og:title" content="Moderat"/>
<meta property="og:type" content="goout_cz:performer"/>
<link rel="image_src" href="/i/026/265919-383.jpg"/>

Ke každému custom objektu je potřeba v “Open Graph” sekci nastavení vaší aplikace nutné vytvořit daný objekt – v příkladu je pak navázaný přes og:type. Možné vlastnosti objektů jsou uvedené ve specifikaci.

Screen Shot 2014-01-27 at 9.11.43 AM

Pro naše “sledování”, které v aplikaci iniciujeme symbolem +, jsme z dříve uvedených důvodů nemohli ani “Follow”, ani “Like” použít. Schválena nám nakonec byla aktivita “Subscribe”, která danému úkonu víceméně odpovídá. Pro přidání akce do kalendáře naše “Add to calendar” také nejprve nebyla akceptovatelná: akce musí být pouze jednoduché sloveso, v tomto případě tedy “Add”; předmět “to calendar” je dodefinován později. Nejprve definujeme tvary sloves:

Screen Shot 2014-01-27 at 9.26.37 AM

Pak již můžeme dodat konkrétní specifika aktivity, v našem případě tedy “do kalendáře”:

Screen Shot 2014-01-27 at 9.28.13 AM

Když máme hotové objekty i akce schválené (do 4 hodin jsem vždy měl reakci), můžeme začít publikovat. Potřebujeme pouze access_token uživatele s právy publikování. GoOut aplikace je napsána v Javě, proto pro publikování používáme hezkou Java knihovnu RestFB.

FacebookClient client = new DefaultFacebookClient(userAccessToken);
client.publish("me/goout_cz:add_to_calendar", FacebookType.class, 
  Parameter.with("event”, “http://goout.cz/cs/divadlo/brno/psychoza-ve-4-48/ywap/"));
Screen Shot 2014-01-27 at 10.15.13 AM

Testovat publikování můžeme i v Graph API Exploreru https://developers.facebook.com/tools/explorer/<APP_ID>/

Lokalizace

Za předpokladu, že naši aplikaci bude používat české publikum, určitě není na škodu stories přeložit do češtiny. Zajímavé je, že nelze lokalizovat jiné než anglické aplikace, proto je potřeba jim nejdříve nastavit jako výchozí jazyk angličtinu. Pak již není problém v nastavení aplikace vybrat položku “Localize” a následně “Translate Open Graph Stories”.

Nástroj na překládání je docela chytrý a umí respektovat rody podstatných jmen i číslo sloves.

Screen Shot 2014-01-27 at 10.23.20 AM

Screen Shot 2014-01-27 at 10.21.29 AM

Mimo takto precizní překládání přibude vedle Facebook Chatu ikonka pro živý překlad:

Screen Shot 2014-01-26 at 1.52.21 PM

S jeho pomocí je pak možné překládat nejen stories přímo pravým kliknutím v prostředí Facebooku na kterýkoliv červeně podtržený text. Tento nástroj bohužel neumožňuje překlady případně opravit, či rozlišovat rody a čísla, proto je možná lepší jej nepoužívat. Přeložená story pak může vypadat následovně.

Z. z+ív¦Ťre¦Źn+Ż vzhled ¦Źesky

Závěr

Během několika předchozích dní Facebook nasadil novou verzi administrace stories, která vypadá i funguje výrazně lépe. Předchozí byla trochu “na klíč” a člověk musel zkoušet, kam kliknout, aby nedostal “500 Server Error”. I tak ale kvalita zdaleka neodpovídá běžné činnosti návštěvníka Facebooku. Inline překlady také fungují jen někdy a v konzoli pak jsou vidět “pětistovky”. Když se ale člověk nadechne a v klidu snahy dotáhne k cíli, efekt je výborný.

Screen Shot 2014-01-26 at 1.57.34 PM

Na návštěvnosti se custom stories zatím příliš neprojevují, pro budování brandu a šíření mezi “přáteli” jsou ale velice dobrým nástrojem – prozatímní zkušenost ukazuje, že lidem se naše stories líbí a zatím se nenašel jediný, který by jejich zobrazování zakázal. Nevýhodou ale je facebookovské “zobrazíme jen malému procentru přátel” – stories se tak v konečném důsledku zobrazují relativně málo a ani je není možné podpořit platbou.

Custom stories nezbývá než doporučit, jen je potřeba mít na mysli, že musí odpovídat reálné uživatelské aktivitě a ta by měla být pro návštěvníkovy přátele atraktivní: “John Doe si zakoupil toaletní papír na ToaletniPapiry.cz” s jeho obrázkem asi nikoho nenadchne :-)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.