Tworzenie aplikacji-zakładek na Facebooku

1 May 2012 Comments

Dość często na facebookowych fanpage (stronach) trzeba stworzyć nową zakładkę z własną zawartością. W najprostszym przypadku można wykorzystać dostępne aplikacje (różne "static pages"), choć by mieć pełną kontrolę trzeba stworzyć własną prostą Facebookową aplikację. Po prostu na Facebooku tworzymy aplikację, wybieramy jej "typ" jako zakładka i podajemy link do strony, którą zakładka ma wyświetlać (zazwyczaj na takiej stronie będzie jakaś grafika i odnośniki)

By stworzyć aplikację przechodzimy na stronę developers.facebook.com/apps i klikamy "Utwórz nową aplikację". Pojawi się okno pytające o nazwę aplikacji (nazwę zakładki podajemy później, tutaj podajemy nazwę porządkową, która pozwoli nam później rozpoznać aplikację):

Po stworzeniu aplikacji możemy edytować jej ustawienia. Poniżej podstawowych opcji będą różne zwijane belki. Wybieramy "Zakładka strony":

Musimy podać nazwę zakładki oraz odnośniki do strony jaka ma być wyświetlana. "Secure Page Tab URL" powinien zawierać link szyfrowany (https). Użytkownicy Facebooka stosujący szyfrowania w serwisie będą także dostawać szyfrowane aplikacje, więc twój serwer musi mieć certyfikat i obsługiwać poprawnie połączenia szyfrowane (linki https). Możemy także wstawić ikonę zakładki ("Obraz karty strony") oraz wybrać jej szerokość (co zazwyczaj ma znaczenie gdy wstawiamy grafikę, np. na landing page jakiejś kampanii).

Po zapisaniu ustawień aplikacji zobaczymy jej dane - zapisujemy "App ID", który przyda się nam za chwilę:

Następnie "App ID" wstawiamy do linka i otwieramy go w przeglądarce:

http://www.facebook.com/add.php?api_key=TUTAJ_WSTAW_APP_ID&pages&page=

Pojawi się formularz, za pomocą którego dodamy aplikację-zakładkę do wybranej strony/fanpage.

Nawet jeżeli dostaniemy komunikat o niedziałającej aplikacji - to i tak zakładka powinna być na miejscu i w pełni sprawna.

Strony HTML pod zakładki

W zakładkach zostanie wyświetlona strona z podanego przy tworzeniu aplikacji linku. Strona ta otworzy się w ramce. Zazwyczaj w takich zakładkach wyświetlamy grafiki - landing page, czy bramki do aplikacji - grafika z kilkoma interaktywnymi elementami (link do aplikacji, przycisk "lubię to" itd.). Strony muszą być proste i trzymać się kilku reguł by dobrze wyglądać na facebooku. Odnośniki np. do pliku graficznego, stylów itp. muszą być pełne ("http://www.naszadomenta.pl/grafika.jpg" a nie samo "grafika.jpg"). Rozmiary grafiki nie mogą być większe niż okno jakie daje na to Facebook.

Zazwyczaj grafikę (kreację) zakładki ustawiałem jako tło DIVa o rozmiarach takich jak rozmiar grafiki. Następnie wewnątrz niego stosując absolutne pozycjonowanie rozmieszczałem elementy takie jak odnośniki, czy przyciski "lubię to". Oto przykładowy szablon:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 
	'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
	<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
	<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<style>body { overflow:hidden; }</style>
</head>
<body>
<div style="background-image:url(https://jakaśstrona.pl/kreacja.jpg);width:755px;height:690px;background-repeat:no-repeat;position:relative;">

<div class="fb-like" data-href="https://www.facebook.com/mojastrona" data-send="false" data-width="450" data-show-faces="true" style="border:none; overflow:hidden;
  position:absolute;top:510px;left:250px;width:75px;overflow:hidden;height:25px;" allowTransparency="true"></div>

<a href="https://apps.facebook.com/jakiś-link-do-aplikacji/" style="display:block;position:absolute;top:495px;left:420px;width:200px;height:60px;" target="_parent"></a>
</div>


<!-- tutaj resztę kodu do przycisku lubię to, itp. -->
</body>
</html>

Powyższy szablon zawiera przycisk lubię to i jeden link. Za pomocą absolutnych pozycji CSS elementy pojawią się na określonej części grafiki (np. link będzie tam gdzie grafika ma napisane "Przejdź do aplikacji"). Należy zwrócić uwagę że linki do aplikacji muszą mieć target="_parent" gdyż znajdują się wewnątrz ramki.

RkBlog

Podstawy tworzenia stron www, 1 May 2012