{"id":414,"date":"2011-05-31T15:44:26","date_gmt":"2011-05-31T15:44:26","guid":{"rendered":"https:\/\/blog.igloonet.cz\/?p=414"},"modified":"2014-08-11T21:28:32","modified_gmt":"2014-08-11T19:28:32","slug":"facebook-landing-page-v-ruby-on-rails","status":"publish","type":"post","link":"https:\/\/igloonet.cz\/blog\/facebook-landing-page-v-ruby-on-rails\/","title":{"rendered":"Facebook Landing page v Ruby on Rails"},"content":{"rendered":"
<\/div>\n

Pokud pou\u017e\u00edv\u00e1te Facebook str\u00e1nky k propagaci n\u011bjak\u00e9 slu\u017eby nebo produktu, tak jste se u\u017e mo\u017en\u00e1 setkali s pojmem Landing page<\/strong>. Jedn\u00e1 se o \u00favodn\u00ed obrazovku, kter\u00e1 se zobraz\u00ed v\u0161em, kte\u0159\u00ed nav\u0161t\u00edv\u00ed va\u0161i Facebook str\u00e1nku a nejsou zat\u00edm jej\u00ed fanou\u0161ci. M\u011bla by p\u0159edev\u0161\u00edm n\u00e1v\u0161t\u011bvn\u00edka zaujmout a p\u0159im\u011bt ho, aby si va\u0161i Facebook str\u00e1nku p\u0159idal mezi sv\u00e9 obl\u00edben\u00e9. Jedin\u011b tak mu budete schopni zas\u00edlat informace o sv\u00fdch novink\u00e1ch \u010di zm\u011bn\u00e1ch. V\u017edy se ale vych\u00e1z\u00ed z webov\u00fdch str\u00e1nek, kter\u00e9 jsou se str\u00e1nkou na Facebooku propojeny. Internet je pln\u00fd n\u00e1vod\u016f, k vytvo\u0159en\u00ed Landing page, kdy\u017e m\u00e1te webov\u00e9 str\u00e1nky naprogramovan\u00e9 v jazyce PHP. Ale nepoda\u0159ilo se mn\u011b naj\u00edt ani zm\u00ednku o tom, jak toho doc\u00edlit u webov\u00fdch str\u00e1nek zalo\u017een\u00fdch na frameworku Ruby on Rails. Tento \u010dl\u00e1nek by m\u011bl p\u0159in\u00e9st n\u00e1vod, jak pr\u00e1v\u011b vytvo\u0159it Landing page v prost\u0159ed\u00ed Ruby on Rails.<\/p>\n

V prv\u00e9 \u0159ad\u011b bych cht\u011bl popsat, jak takov\u00e1 Landing page funguje. Malou uk\u00e1zku m\u016f\u017eete vid\u011bt t\u0159eba zde<\/a>. V tomto p\u0159\u00edpad\u011b, pokud je\u0161t\u011b n\u00e1v\u0161t\u011bvn\u00edk nen\u00ed fanou\u0161kem Planet of Winners, tak uvid\u00ed v\u00fdzvu ke kliknut\u00ed na tla\u010d\u00edtko \u201eTo se mi l\u00edb\u00ed\u201c. Jakmile se stane fanou\u0161kem, tak ji\u017e nen\u00ed t\u0159eba zobrazovat tuto v\u00fdzvu a naopak mu chceme nab\u00eddnout, aby se registroval na webov\u00fdch str\u00e1nk\u00e1ch Planet of Winners<\/a>. Zdrojov\u00fd k\u00f3d t\u00e9to Landing page v\u0161ak nen\u00ed um\u00edst\u011bn na Facebooku, ale na\u010d\u00edt\u00e1 se jako webov\u00e1 str\u00e1nka. Jej\u00ed ve\u0159ejn\u00fd odkaz m\u016f\u017eete vid\u011bt zde<\/a>.<\/p>\n

Kroky, kter\u00e9 jsou nutn\u00e9 k integraci<\/h2>\n

Zde je seznam krok\u016f pot\u0159ebn\u00fdch k nastaven\u00ed vlastn\u00ed Landing page. Detailn\u011b budou pops\u00e1ny ve zb\u00fdvaj\u00edc\u00ed \u010d\u00e1sti tohoto \u010dl\u00e1nku. <\/p>\n

    \n
  1. Vytvo\u0159it Facebook str\u00e1nku, do kter\u00e9 budeme Landing page integrovat<\/li>\n
  2. Vytvo\u0159it k\u00f3d pro Landing page, kter\u00fd bude ve\u0159ejn\u011b dostupn\u00fd jako webov\u00e1 str\u00e1nka v Ruby on Rails aplikaci<\/li>\n
  3. Program\u00e1tor, kter\u00fd stoj\u00ed za samotnou integrac\u00ed, mus\u00ed b\u00fdt veden jako v\u00fdvoj\u00e1\u0159 na Facebooku<\/li>\n
  4. Vytvo\u0159it Facebook aplikaci, kter\u00e1 bude na\u010d\u00edtat vytvo\u0159enou str\u00e1nku z bodu \u010d. 3<\/li>\n
  5. Propojit FB str\u00e1nku z bodu \u010d. 1 s aplikac\u00ed z bodu \u010d. 4<\/li>\n<\/ol>\n

    1. Vytvo\u0159en\u00ed FB str\u00e1nky<\/h2>\n

    Nerad bych se zde zb\u00fdval n\u00e1vodem, jak vytvo\u0159it vlastn\u00ed Facebook str\u00e1nku. Podobn\u00fdch popis\u016f je pln\u00fd internet. Facebook m\u00e1 pro tyto \u00fa\u010dely vytvo\u0159en\u00e9ho jednoduch\u00e9ho klikac\u00edho pr\u016fvodce<\/a>. Postup je v n\u011bkolika kroc\u00edch a je velice intuitivn\u00ed.<\/p>\n

    2. Vytvo\u0159en\u00ed k\u00f3du Landing page v Ruby on Rails<\/h2>\n

    V minulosti m\u011bli v\u00fdvoj\u00e1\u0159i v\u00edc mo\u017enost\u00ed jak detekovat fanou\u0161ky str\u00e1nky. Dalo se k tomu vyu\u017e\u00edvat tzv. FBML tag\u016f<\/a>, konkr\u00e9tn\u011b k t\u011bmto \u00fa\u010del\u016fm slou\u017eil tag fb:visible-to-connection<\/a>. Av\u0161ak od 11. b\u0159ezna 2011 byla u nov\u00fdch str\u00e1nek odebr\u00e1na mo\u017enost p\u0159ipojit FBML aplikace. Star\u0161\u00edch str\u00e1nek se tato zm\u011bna net\u00fdk\u00e1 a mohou nad\u00e1le vyu\u017e\u00edvat sv\u00e9 FBML aplikace. U nov\u00e9ho projektu je jedinou mo\u017enost\u00ed vyu\u017e\u00edt tzv. iFame aplikace.<\/p>\n

    Aplikace typu iFrame umo\u017e\u0148uj\u00ed v\u00fdvoj\u00e1\u0159\u016fm vkl\u00e1dat extern\u00ed webov\u00fd obsah do sv\u00fdch z\u00e1lo\u017eek na Facebook str\u00e1nk\u00e1ch. Proto\u017ee nen\u00ed tento obsah hostov\u00e1n na Facebooku, je mo\u017en\u00e9 vyu\u017e\u00edvat pln\u011b HTML a CSS standard\u016f, d\u00e1le funkc\u00ed JavaScript knihoven (jQuery, Prototype, \u2026). Jak jsem ji\u017e zm\u00ednil, samotn\u00fd HTML k\u00f3d pro Landing page bude um\u00edst\u011bn na va\u0161em webu, odkud ho bude na\u010d\u00edtat FB aplikace. V\u00fdvoj\u00e1\u0159 mus\u00ed pro Landing page pouze integrovat kus k\u00f3du, d\u00edky kter\u00e9mu zjist\u00ed zda \u010dlov\u011bk prohl\u00ed\u017eej\u00edc\u00ed si danou str\u00e1nku je fanou\u0161kem na Facebooku nebo ne. Podle toho mu zobraz\u00ed p\u0159\u00edslu\u0161n\u00e9 informace.<\/p>\n

    V n\u00e1sleduj\u00edc\u00ed uk\u00e1zce za v\u0161\u00edm stoj\u00ed akce show<\/em>:<\/p>\n

    \nclass FacebookController < ApplicationController\n  \n  # layout pouze pro tento kontroler pro iFrame na Facebook str\u00e1nce\n  layout 'facebook'\n  \n  def show\n    if params['signed_request']\n      p = params['signed_request'].split('.')[1]\n      json = Base64.decode64(p + \"=\" * (4 - p.size % 4))\n      data = ActiveSupport::JSON.decode(json)\n      @liked = data[\"page\"][\"liked\"]    \n    end\n  end\nend\n<\/pre>\n
    Pozn\u00e1mka1: k\u00f3dovan\u00fd \u0159et\u011bzec mus\u00ed b\u00fdt dopln\u011bn znakem \u201e=\u201c dokud nedos\u00e1hne d\u00e9lky n\u00e1sobku 4 byt\u016f.<\/em><\/p>\n
    Prom\u011bnn\u00e1 params[\u201asigned_request\u2018]<\/em> je napln\u011bna pouze v p\u0159\u00edpad\u011b, pokud se p\u0159\u00edslu\u0161n\u00e1 str\u00e1nka na\u010dte p\u0159es iFrame aplikaci na Facebooku. V\u00fdsledkem cel\u00e9 akce je pak napln\u011bn\u00e1 prom\u011bnn\u00e1 @liked<\/em>, kter\u00e1 nab\u00fdv\u00e1 true<\/em> nebo false<\/em> podle toho, zda je n\u00e1v\u0161t\u011bvn\u00edk fanou\u0161kem Facebook str\u00e1nky nebo ne. <\/p>\n
    3. Sta\u0148 se v\u00fdvoj\u00e1\u0159em na Facebooku<\/h2>\n
    Aby bylo mo\u017en\u00e9 p\u0159ej\u00edt k vytvo\u0159en\u00ed p\u0159\u00edslu\u0161n\u00e9 iFrame aplikace, je nutn\u00e9 se nejprve st\u00e1t v\u00fdvoj\u00e1\u0159em na Facebooku. Co to p\u0159esn\u011b pro V\u00e1s znamen\u00e1? Nen\u00ed nutn\u00e9 nikde \u017e\u00e1dat o zam\u011bstn\u00e1n\u00ed u spole\u010dnosti Facebook, sta\u010d\u00ed pouze ud\u011blat jeden jednoduch\u00fd krok - p\u0159idat si mezi obl\u00edben\u00e9 str\u00e1nku V\u00fdvoj\u00e1\u0159 (Developer), kter\u00e1 je k dispozici na adrese http:\/\/www.facebook.com\/developers\/<\/a>. Mnohdy je nutn\u00e9 na zm\u011bnu po\u010dkat i n\u011bkolik hodin, Facebook \u00fapravu propaguje na v\u0161echny jejich servery.<\/p>\n
    4. Vytvo\u0159en\u00ed pot\u0159ebn\u00e9 FB aplikace<\/h2>\n
    N\u011bkolikr\u00e1t jsem se o tom zmi\u0148oval v p\u0159edchoz\u00edm textu tohoto \u010dl\u00e1nku. Samotn\u00e1 Landing page funguje jako Facebook aplikace, kter\u00e1 na\u010d\u00edt\u00e1 extern\u00ed webov\u00fd obsah (vytvo\u0159en\u00fd v bodu \u010d.2). Tak\u017ee pokud je spln\u011bn i p\u0159edchoz\u00ed bod a jste fanou\u0161kem aplikace V\u00fdvoj\u00e1\u0159 (Developer), p\u0159ejd\u011bte na tuto str\u00e1nku http:\/\/www.facebook.com\/developers\/<\/a>. Pomoc\u00ed tla\u010d\u00edtka Vytvo\u0159it novou aplikaci<\/em> otev\u0159ete formul\u00e1\u0159 pro vytvo\u0159en\u00ed nov\u00e9 iFrame aplikace. Te\u010f u\u017e zb\u00fdv\u00e1 jen vyplnit v\u0161e pot\u0159ebn\u00e9 a odeslat. V nastaven\u00ed takto vytvo\u0159en\u00e9 aplikace vypl\u0148te n\u00e1sleduj\u00edc\u00ed polo\u017eky:<\/p>\n