Facebook page - custom tab - like button

8 naročnikov

OMFG. Celi dan se že zajebavam s presnetim Facebook page-om.
Imam eno vprašanje. Kako hudiča naredim zavihek (tab) v katerega dam svojo podstran, ki ima gumb LIKE/RECOMMEND.

FBML statični - no way
Iframe aplikacija - očitno tudi ne

Prebral sem pomoje že celotni svetovni splet, pa ga ni junaka, ki bi lahko to zapisal v enem kosu.

Je kdo naredil zavihek s custom vsebino, na kateri je Like/Recommend button?

Je to iframe s facebook connect?

Evo, točno to.
Do tu sem prišel, da v aplikaciji prikaže nad comment tudi Like button (v Static FBML Like gumba nad comment ne prikaže). Aha, sepravi s CCSjem bi potem skril tisti del, kjer oddajaš komentar.

No, sedaj moram rešit, da ko klikneš Like ne Like-aš aplikacije, ampak to podstran (zavihek-tab). Oh ja :)

Osnova recimo zgleda takole:
http://www.facebook.com/threadless?v=app_116832620224

Disney ima tole še drugače. Ker tebi na profilu ko Like-aš napiše in linka na X njihov Page.

Miha likes Toy Story (Movie).

Pri Threadless pa linka na njihov website (www)

Miha likes Moustardche! on Threadless.

Ne najdem How-To vodiča, čeprav bi bil zelo zelo dobrodošel. Dam $50, če ga kdo napiše ;)

Evo, uspelo mi je, samo še enega errorja se moram znebit :)
Zvečer bom napisal celoten postopek od A do Ž.

Mika, izredno veseli bomo tvojega vodiča!

Kako narediti tole –gumb Like znotraj Facebooka Page-a – s klikom nanj boste like-ali spletno stran Podarimo.si. (naprej morate postati (Like-ati) FB stran Podarimo.si, da se vam prikaže FB Like gumb)

Zakaj sem rabil gumb Like na FB strani? (FB stran je še v izdelavi). S klikom na gumb Like dejansko lajkaš mojo prodajno stran in ne FB strani.

Najprej moram povedati, da se na FB ne spoznam, niti na programiranje ne. Vendar bolj elegantne rešitve najverjetneje ni, saj v 10 urah študiranja je nisem odkril. Nikjer tudi ni takole podrobnega vodiča. Vsi blogerji, objavite tale vodič kjer želite, v vseh možnih jezikih.

Kako lahko dodamo custom zavihek (tab) na našo FB stran? Ena možnost je, da poiščemo aplikacijo Static FBML ter jo dodamo na stran. Ta aplikacija nam doda nov zavihek, v katerega vpišemo html kodo (Edit page –> Applications -> poiščemo FBML in spodaj kliknemo Go to application). Vendar vanjo ni mogoče dodati FB Like gumba (se ne prikaže, ne podpira). Tako je edini workaround sledeč.

Narediti moramo lastno aplikacijo, v katero tudi ne moremo dodati FB Like gumba. Kaj sedaj? V FB iframe aplikacijo lahko dodamo Comment box, ki ima v tem primeru poleg dela za komentiranje zgoraj tudi gumb Like. Zakaj ga ne dodamo v Static FBML zavihek? Ker tam gumba Like ne prikaže, prikaže le del za komentiranje.

Kaj pomeni lastna aplikacija? Poenostavljeno, naredimo aplikacijo, ki je ubistvu ‘HTML’ stran, ki jo nato lahko dodamo na svojo FB stran. Stvar pa je malo tricky, ker je FB malo čuden in nič ni na logičnih mestih, vse je nekje skrito, nikjer navigacije, kje hudiča se nahajaš. Tako se kaj hitro izgubiš oziroma ne najdeš več URLja od strani, kjer si nekaj urejal. Aplikacijo se naredi v 5 minutah. HTML za prikaz v aplikaciji (na zavihku) pa je vaša stvar ;)

Pa začnimo. Nič ne bom pisal kako in zakaj, ker pojma nimam o programiranju. To lahko dokumentira kdo drug. Napisal bom le, kaj sem jaz naredil, da zadeva deluje tako kot mora.

Pa naredimo aplikacijo ‘Podarimo.si’ – primer za Podarimo.si page (page se naredi na URLju http://www.facebook.com/pages/):

Korak 1:

Odprimo http://www.facebook.com/developers/createapp.php
-Application Name: podarimo
-Terms: Agree
-Kliknemo “Create Application”
-vpišemo captcho

Sedaj se nam odpre stran za konkretno urejanje aplikacije. Na desni imamo vertikalni meni “About, Web Site, Facebook Integration, Mobile and Devices, Advanced” (čez 1 mesec bo ta meni sigurno drugačen, kot tudi vsa vnosna polja. FB pač.).

Nič ne spreminjamo, na dnu kliknimo ‘Save changes’. Sedaj nas vrže na osnovno stran o naši oziroma naših aplikacijah (na levi je ubistvu seznam vseh naših aplikacij, če je to vaša prva, bo tam samo trenutna aplikacija, na desni pa njeni podatki). Link za direkten dostop: http://www.facebook.com/developers/apps.php (če se zgubite, kliknite tale link, saj nikjer ni nobene povezave “My applications” ali breadcrumbs navigacije, ki jo zelo zelo pogrešam. Dejansko nikoli ne vem kje na FB se nahajam. Ta link je iztočnica.)

Na desni strani v sredini v meniju kliknemo ‘Edit settings’ in smo nazaj na strani za urejanje aplikacije, kot smo bili prej. Vedno, ko boste klikniti ‘Save changes’ vas bo vrglo na tisto stran, zato smo si naprej pogledali to, da se ne izgubimo (na FB to res ni težko).

V razdelku About (izbrano na levi v meniju) pač vpišemo poljubne podatke, dodamo ikono naše aplikacije… po želji.

Korak 2:

Pomembno: vse URLje, ki jih boste vpisali, končajte z /, drugače vam bo javilo napako.

V levem meniju kliknimo na Web Site. Tukaj dodajmo URL naše strani
-Site URL: http://www.podarimo.si/ (POZOR! URL se mora nujno končati z /, drugače bo izpisalo error)
Kliknimo ‘Save changes’ in potem na strani, ki se nam odpre, ponovno Edit settings, da pridemo nazaj na urejanje aplikacije. Sedaj kliknimo na razdelek “Facebook integration” v levem meniju. Dopolnimo sledeča polja:

Canvas:
-Canvas Page: http://apps.facebook.com/podarimo/ (URL naše aplikacije, po želji)
-Canvas URL: http://www.podarimo.si/fbapp/ (našo aplikacijo moramo shraniti nekam na svoj server. Tako da na svoji strani naredite mapo, v kateri boste imeli html/php datoteke aplikacije z vsebino zavihka naše FB strani)
-Canvas Type: IFrame (OBVEZNO!!!)
-IFrame Size: Auto-resize

Page Tabs:
-Tab Name: SEO nasveti (ime zavihka, ki ga želimo na naši FB strani)
-Tab URL: index.php (ime datoteke, ki bo prikazala vsebino zavihka. Ostali URL (Canvas Page) je že izpisan, dodamo samo ime končne datoteke, ki jo bomo naložili v Canvas URL, ki smo ga zapisali zgoraj)

Kliknemo “Save changes”.

Viola, naša aplikacija je nastavljena. Sedaj moramo narediti datoteke, ki jih bomo naložili na Canvas URL. Ostanimo na osnovni strani s podatki naše aplikacije, kjer vidimo Application ID, API Key…

Korak 3:

Naredimo prazno (brez kakršnekoli kode) datoteko index.php za našo aplikacijo . Najprej vanjo skopirano sledečo kodo:

<?php
require_once 'facebook.php';

$appapikey = 'VAŠ API KEY';
$appsecret = 'VAŠ APPLICATION SECRET';

require_once 'facebook.php';
$facebook = new Facebook($appapikey, $appsecret);

$istab = isset($POST['fbsiginprofiletab']);
if( !$istab ){
$userid = $facebook->requirelogin();
}else{
$userid = $facebook->getprofileuser();
}

$html = 'PUT YOUR HTML HERE';

$facebook->apiclient->profilesetFBML(NULL, $user_id, $html, NULL, NULL, $html);
echo '
<fb:add-section-button section="profile" />';
?>

V zgornji kodi nadomestimo VAŠ API KEY in VAŠ APPLICATION SECRET, ki ju najdemo na strani s podatki o naši aplikaciji. Pod to kodo, pa lahko damo poljubno našo HTML kodo. Širina strani je lahko 520px. Za začetek vstavimo le naš logo:

<img src="http://www.podarimo.si/images/podarimo-logo.jpg" />

S FTPjem se povežemo na server, naredimo mapo, ki smo jo navedli v URLjih, vanjo naložimo naš index.php. Sedaj moramo na server v našo mapo z aplikacijo dodati še knjižnico za facebook:

http://github.com/facebook/platform/raw/master/clients/packages/facebook-platform.tar.gz

Snemite, razpakirajte in naložite v Canvas URL na serverju. Ne vem kako tole deluje, ampak vsebina mape PHP (facebook.php) mora biti na korenu, sepravi Canvas URLju, kjer je tudi naša datoteka index.php (v našerm primeru torej na http://www.podarimo.si/fbapp/).

Naša aplikacija bi morala sedaj delovati. Najdemo jo na URLju, ki smo ga podali pod Canvas URL – URL najdete na strani s podatki o naši aplikaciji. V našem primeru http://apps.facebook.com/podarimo/ .
Preden nam aplikacijo prikaže, nas seveda vpraša za ‘Request for Permission’, kliknemo gumb ‘Allow’

Korak 4:

Dodajmo našo aplikacijo na našo FB stran (s tem, ko dodamo aplikacijo, dodamo naš zavihek in njegovo vsebino). Tukaj je točen in edini način (1 uro sem rabil, da sem našel kje in kako, btw). Poleg naše aplikacije se je avtomatično izdelala FB stran o naši aplikaciji (FB page). Kje/kako ga najdem? Na strani s podatki o naši aplikaciji, kjer smo klikali “Edit settings” se takoj pod tem linkom v meniju nahaja link “Application Profile Page”. Kliknite in odprla se bo FB stran o naši aplikaciji, brez logota. No, pod ‘logotom’ pa je 3. link “Add to my Page”. Izberite še, na kateri Page boste dodali aplikacijo. Viola.

Pojdimo na našo FB stran, kamor smo dodali aplikacijo. Kot administrator lahko premikamo zavihke. Če zavihka naše aplikacije ni, kliknimo na koncu vrstice z zavihki na puščico >>, da vidimo preostale skrite zavihke. Primemo in nesemo zavihek na želeno mesto. Če se vrstica z zavihki sesuje, refreshamo stran.

Korak 5:

Končno. Dodajmo FB Like gumb, saj to je naš namen? Aja, ne moremo, ker ga ne podpira. Pa dodajmo FB Comment box in ga ustrezno prilagodimo, da nam ostane le še FB Like gumb. V index.php naše aplikacije dodamo tole vrstico na mesto, kjer želimo FB gumb, recimo pod naš logotip:

<fb:comments xid="podarimo" title="Daritveni oglasnik" returnurl="http://www.podarimo.si" numposts="0" width="500px">/fb:comments

Vnesem poljuben xid, title ter returnurl (URL strani, ki jo bodo obiskovalci Like-ali. Lahko je URL FB strani ali naše web strani). numposts="0" pomeni, da se spodaj pod poljem za oddajo komentarja ne bo prikazal noben komentar. Shranite kodo in refreshajte aplikacijo (zavihek). OK, kot vidite, moramo skriti del za komentiranje in slike uporabnikov, ki so kliknili Like.

Nad našo kodo za prikaz aplikacije v index.php dodamo kodo:

<style type="text/css">
div.commentbody { display: none; }
div.connectwidgetsampleconnections { display: none; }
</style>

Shranimo datoteko index.php in refreshajmo stran. Viola. Ostane le še Like gumb. Žal ne moremo gumba spremeniti v Recommend. Lahko mu spreminjamo videz, tako da prilagodimo CSS. S Firebugom kliknite na gumb (element) in poglejte Style, skopirajte v index.php in ustrezno spremenite. Za spremembo Like gumba se boste igrali s sledečimi nastavitvami, ki jih dodate k zgornji CSS kodi:

a.connectwidgetlikebutton {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
border:1px solid #000000;
display:block;
float:left;
padding:4px 5px;
}
.connectwidget td.connectwidgetvertical_center {
border-spacing:0;
}
td, td.label {
font-size:14px;
text-align:left;
font-weight:bold;
}
div.like a {
font-weight:normal;
}

Ok, ko kliknemo gumb Like, se na našem osebnem profile (oziroma kolegom na news feedu) prikaže sledeče
- Miha likes Podarimo.si - mali oglasi podarim - daritveni oglasnik on podarimo.si.
oziroma
- Miha likes “META-TITLE” on “SITE-NAME”. (glej spodaj za infor)

Ker pa imamo META-TITLE oziroma title naših web strani predolg, moramo v glavo naše web strani dodati določene meta oznake, ki jih bo FB prebral in tako v naši Like objavi prikazal želen title in url. (Podrobneje o tem na http://developers.facebook.com/docs/opengraph). Odpremo header naše web strani, ter pred <head> takoj za

<html xmlns=http://www.w3.org/1999/xhtml

dodamo še

xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"

Nato spodaj v <head> dodamo:

<meta property="og:title" content="META-TITLE (glej zgoraj, kje se pojavi v Like objavi)"/>
<meta property="og:type" content="USTREZEN TYPE, NAJDETE GA NA http://developers.facebook.com/docs/opengraph#types "/>
<meta property="og:url" content="URL NAŠE STRANI"/>
<meta property="og:image" content="URL DO IKONE NAŠE STRANI, VSAJ 50x50px"/>
<meta property="og:site_name" content="SITE-NAME (glej zgoraj, kje se pojavi v Like objavi)"/>
<meta property="fb:admins" content="ID ADMINISTRATORJA NAŠE SKUPINE, NICK"/>

ID administratorja je vaš nick, ki ga imate v URLju osebnega profila.
Shranimo header naše strani. To je to, Facebook sedaj ve, kaj prikazati v Like objavi. Da se prepričamo, če smo nastavili pravilno, odpremo http://developers.facebook.com/tools/lint/ in v iskalnik vpišemo URL naše strani. Vrne nam podatke, ki smo jih vpisali zgoraj. Če smo kaj izpustili, nam prikaže privzete nastavitve naše strani.

Korak 6:

Želite, da se nečlanom vaše FB skupine prikaže drugačna vsebina kot članom? Da nečlani ne vidijo Like gumba? Vnesemo sledečo kodo:

fb:visible-to-connection
VSEBINA VIDNA ČLANOM
fb:else
VSEBINA VIDNA NEČLANOM
/fb:else
/fb:visible-to-connection

To je to. Od tu naprej uprabljajte domišljijo za oblikovanje vaše predstavitve na FB. Iframe-a ne morete uporabljati – embedanje Google Maps odpade. Da ne boste obrnili cel www, da boste na koncu prišli do te ugotovitve. ;)

Predlagam ti, da raje narediš Share, kot pa like. Share je bolj viden na FB kot pa like spletne strani.

Dodaj pa seveda še nekaj "marketinškega teksta", da bo folk bolj z veseljem klikal.

Share ne vem če ima counter, ki je potreben za moj primer? Malo je tudi smotano, ker sta dva koraka, ko nekaj sharaš (meni osebno je odbijajoče in zelo redko kliknem Share). Tu samo klikneš Like in si bližje cilju - številka se poveča. Še bolje bi bilo, če bi bil Recommend, pa ne gre.

Kaj je tvoj namen?

• čimbolj širiti podarimo.si (zato uporabi share)
• ali dvigovati si ego (counter? zakaj za boga ga rabiš - saj imaš fan box s fani in dovolj social proofa) ?

FB ima možnost like ali recommend (ki je isto kot like). Sem videl na WP pluginu. Ne vem pa kako sprogramirati.

Vseeno ti priporočam Share, ker je bolj viden v FB feedu.

Share je res bolj viden na postih, je pa ponavadi manj učinkovit. Več ljudi klikne LIKE kot pa SHARE.

Mika:
Iframe-a ne morete uporabljati – embedanje Google Maps odpade. Da ne boste obrnili cel www, da boste na koncu prišli do te ugotovitve. ;)

Napoved je, da naj bi tudi to začelo delat, še letos:
"Support for IFrames in Page tabs - Q4 2010 - New method for using IFrames in Page tabs"
http://developers.facebook.com/roadmap

@Zare

na katerih temeljih stoji ta tvoja trditev?