WebMatrix - Korzystamy z Facebook Helpers  

Autor: Tomasz Kowalczyk

Opublikowano: 2011-05-25

Pobierz i uruchom Microsoft WebMatrix

Wprowadzenie

Artykuł ten wchodzi w skład cyklu artykułów o WebMatrix, narzędziu firmy Microsoft ułatwiającym  tworzenie aplikacji internetowych. Po zapoznaniu się z treścią artykułu i zastosowaniu się do zawartych w nim porad będziesz wiedział, jak:

• zacząć korzystać z WebMatrixHelpers,
• usprawnić proces budowania własnej strony WWW,
• wzbogacić możliwości swojej strony Web o funkcjonalność portalu Facebook,
• korzystać z Facebook API we własnym projekcie.

Bazując na projekcie wykonanym w poprzedniej części, dodamy do niego bardzo powszechny dziś
w Internecie przycisk Like, który pozwoli gościom naszego serwisu na oznaczanie stron, a tym samym dodanie ich do własnej tablicy na portalu Facebook – dzięki czemu nasza strona będzie rozreklamowana wśród znajomych odwiedzającego.

Przygotowanie środowiska pracy

W celu rozpoczęcia pracy uruchamiamy środowisko WebMatrix. W wyświetlonym oknie wybieramy My Sites, aby otworzyć projekt wykonany poprzednio, następnie wybieramy PierwszaStrona
i klikamy OK. Mamy teraz otwarty projekt wykonany na podstawie wcześniejszego artykułu. Poprzez kliknięcie przycisku Run uruchamiamy projekt w przeglądarce Web.

Informacja

Narzędzie Microsoft WebMatrix pozwala nam na uruchomienie witryny w dowolnej przeglądarce internetowej, warto więc zawsze mieć zainstalowane najnowsze wersje popularnych przeglądarek w celu weryfikacji poprawnego wyświetlania się naszych stron u wszystkich odwiedzających.

Co to są Helpers i do czego je wykorzystać?

Biblioteka ta zawiera komponenty (Helpers), które ułatwiają wykonywanie powszechnych zadań programistów. Część z nich dostępna jest od momentu instalacji, a część trzeba doinstalować samemu w razie potrzeby.

InstalacjaWebMatrixHelpers

Aby móc wykorzystywać Helpers we własnych projektach, należy je najpierw doinstalować (znajdują się one w ASP.NET Web Helpers Library). W tym celu postępuj wg poniższych instrukcji. Mając uruchomioną stronę wykonaną poprzednio, wykonaj poniższe czynności:

1. skopiuj jej adres i otwórz nową kartę w przeglądarce,
2. wklej skopiowany adres i zamiast nazwy strony wpisz_Adminw pasek adresu. Przykładowy adres powinien wyglądać następująco: https://localhost:50987/_Admin/,
3. przed nami okno aplikacji Package Manager  – przy pierwszym uruchomieniu musimy ustalić hasło administratora, wpisując je w pola EnterPassword i ConfirmPassword, następnie klikamy CreatePassword,
4. kolejna wiadomość mówi nam, że dla bezpieczeństwa należy zmienić nazwę pliku _Password.config na Password.config znajdującego się w katalogu /App-Data/Admin/ w strukturze Files naszego projektu – stosujemy się więc do wyświetlonych zaleceń,
5. Następnie wpisujemy zdefiniowane wcześniej przez nas hasło. Po wykonaniu powyższych kroków powinniśmy ujrzeć ekran podobny od przedstawionego na rysunku 1:

Rys.1.Ekran startowy Package Manager.

Korzystamy z Helpers w projekcie

Aby osiągnąć zamierzony cel, użyjemy FacebookHelpers. Należy teraz doinstalować odpowiedni Helpers poprzez okno przedstawione na rysunku 1.

• Z pola Show wybieramy Online. Przed nami wyświetlona została lista z dostępnymi komponentami (Helpers) gotowymi do instalacji – na liście odnajdujemy Facebook.Helper 1.0,
• Klikamy przycisk Install. Pozwoli nam to na korzystanie z API serwisu Facebook bezpośrednio
• w naszym projekcie, jak i w projektach realizowanych w przyszłości.

Informacja

Poprzez wybranie opcji Updates w polu Show, masz możliwość późniejszej aktualizacji zainstalowanych u siebie Helpers.

 

Tak naprawdę to już wszystko, co należy wykonać, aby móc korzystać z API serwisu Facebook w naszej aplikacji. Zobaczmy,  jakie nasza praca przyniosła efekty:

• Otwieramy stronę _SiteLayout.cshtml naszego projektu i w sekcji RenderBody wpisujemy Facebook.LikeButton() – nie zapominamy o poprzedzeniu tej instrukcji znakiem @.
• Odświeżamy widok naszej strony w przeglądarce poprzez wciśnięcie klawiszaF5 na klawiaturze – naszym oczom ukaże się strona podobna do przedstawionej na rysunku 2.

Rys.2.Przycisk Like serwisu Facebook na naszej stronie.

Zmieniamy parametry FacebookHelpers

Warto zauważyć, że po instalacji FacebookHelpers w projekcie naszego serwisu pojawił się katalog App_Code wraz z plikiem Facebook.cshtml, w którym to zdefiniowane są metody oraz atrybuty udostępnione nam podczas korzystania z tego komponentu.

Informacja

Warto dokonać zmian w 86 linii pliku Facebook.cshtml – gdzie ustawiany jest domyślny język – wpisując pl_PL zamiast en_US.  W miejsce napisu „Like” pojawi się nam widziane na polskojęzycznych stronach „Lubię to”.

 

Korzystając z FacebookHelpers, mamy możliwość zdefiniowania parametrów wyświetlania przycisku „Like”. Wykorzystajmy więc część tych możliwości, definiując wygląd przycisku globalnie dla wszystkich podstron w pliku _SiteLayout.cshtml. W tym celu uzupełniamy ten plik poniższym kodem:

@Facebook.LikeButton(

href: "http://www.msdn.pl",

buttonLayout: "button_count",

font: "Verdana",

colorScheme: "dark"

)

Kod ten zmienia wygląd przycisku, a także stronę, którą „lubimy”.

Zaawansowane wykorzystanie FacebookHelpers

Do naszego projektu od początku korzystania z FacebookHelpers został dołączony jeszcze jeden katalog – Facebook. Analiza jego zawartości pozwoli nam dowiedzieć się, jak dołączyć do naszego serwisu moduł oparty na funkcjonalności portalu Facebook, który trzeba uruchomić razem z aplikacją webową. Aby przekonać się jak to działa, musimy najpierw zarejestrować tworzoną przez nas aplikację na portalu Facebook – otrzymamy wówczas niezbędne dla nas App ID i AppSecret.

Informacja

Aby móc tworzyć aplikacje oparte na portalu Facebook, nasze konto musi być zweryfikowane poprzez np. podanie numeru telefonu komórkowego.

 

Przechodzimy na stronę http://www.facebook.com/developers/createapp.php, gdzie w pole Nazwa aplikacji wpisujemy preferowaną przez nas nazwę, np. PierwszaStrona. W zakładce Strona Aplikacji w polu Adres URL strony wpisujemy skopiowany z paska adresu przeglądarki podstawowy adres naszego serwisu, np. https://localhost:50987/, zapisujemy również wartości z pól Application ID i Application Secret, co obrazuje rysunek 3:

Rys.3.Rejestracja nowej aplikacji opartej na serwisie Facebook.

Klikamy w „Zapisz zmiany”. Następnie przechodzimy do programu WebMatrix i wykonujemy kolejno następujące kroki:

• dodajemy do naszego projektu plik _AppStart.cshtml w sposób omawiany w poprzednim artykule,
• wpisujemy w ww. plik następujący kod:

@{

Facebook.Initialize("<Twój App ID>", "<Twój App Secret>");

}

•   w pliku _SiteLayout.cshtml zmieniamy Tag: <html Lang=”pl”> na <htmllang="en" @Facebook.FbmlNamespaces() >

•   aby odwiedzający naszą stronę mogli dodawać do niej komentarze, ponownie kod pliku _SiteLayout.cshtml zmieniamy i bezpośrednio po wywołaniu metody RenderBody() wpisujemy:

@Facebook.GetInitializationScripts()                

@Facebook.Comments()

• przechodzimy do okna przeglądarki wyświetlającej naszą stronę, wciskamy F5 i cieszymy się efektem końcowym.

Podsumowanie

W tym artykule nauczyliśmy się korzystać z narzędzia WebMatrix – Helpers. Przekonaliśmy się, w jak dużym stopniu komponenty te ułatwiają proces budowania strony Web. Implementując w naszym serwisie możliwości, jakie daje programistom serwis Facebook, wzbogaciliśmy naszą stronę o nowe możliwości.

Zachęcam do samodzielnego zapoznania się z innymi Helpers dostępnymi w ASP.NET Web Helpers Library. W kolejnym artykule dowiemy się, jak uruchomić serwis oparty na framework Joomla za pomocą narzędzia WebMatrix.

---