Media społecznościowe

MediaSpołecznoś ciowe-Facebook
Chwila oddechu:
Laboratorium 2 – Social Plugins (Wtyczki Społecznościowe)
Social Plugins są w skrócie gotowymi kawałkami do umieszczenia w naszej aplikacji. Nie wymagają
szczególnie dużych umiejętności tworzenia aplikacji WWW.
Udostępniaja one typowe działania „facebookowe”
Przedstawionione zostaną one na przykładach
dla
użytkowników
naszych
stron.
Przycisk Lubię to (Like Button)
Najprostrza i najbardziej typowa sprawa. Możemy przypinać przyciski Lubię to! do niemal wszystkich
elementów na naszych stronach i zbierać „lajki” :).
Najszybszy dostęp do generatora kodu przycisku Lubię to! jest z poziomu serwisu deweloperskiego.
Zakładka Docs, zasób Sharing -> Wtyczki społecznościowe (Jak widać spolszczenie dokumentacji jest
szczątkowe)
Wystarczy w polu URL to like wpisać adres naszej aplikacji i kliknąć Get Code
Otrzymujemu kod przeznaczony dla NASZEJ WCZEŚNIEJ ZDEFINIOWANEJ APLIKACJI
Pierwsza część jest gotowcem kodu inicjalizacji SDK Facebooka (Mamy go już na naszej testowej
stronie). Możemy jedynie zmodyfikować lokalizację pliku SDK na polską, co pozwoli na renderowanie
przycisków z polskimi opisami
Pozostaje tylko wklejenie w kod strony kodu z drugiego okienka i już możemy polubić naszą apkę…
W standardowej wersji wtyczka wyświetla awatary znajomych, którzy polubili ten element.
Jednocześnie informacje te nie są dostępne dla aplikacji, w której klikamy przycisk Lubię to.
Zachęcamy do przeczytania odpowiedzi na typowe pytania odnośnie tego przycisku:
https://developers.facebook.com/docs/plugins/like-button?locale=pl_PL
, szczególnie pytanie I need to move a page to a different URL - can I migrate the number of likes to
the new page location? Daje ona dość dobry wgląd w opcję “canonical source” i proces zaliczania
lajka nie koniecznie tam gdzie sądzimy.
Przycisk Udostępnij (Share Button)
Przycisk Udostępnij pozwala na prezentowanie przez użytkownika na swojej linii czasowej odnośnika
do danego zasobu oraz opatrzenie go odpowiednim komentarzem
Standardowo dostęp do generatora kodu przycisku Udostępnij jest z poziomu serwisu
deweloperskiego. Zakładka Docs, zasób Sharing -> Wtyczki społecznościowe
Wygenerowany kod:
<div class="fb-share-button" data-href="http://miki.cs.pollub.pl/ftest" datalayout="button_count"></div>
Efekt wklejenia kodu do naszej aplikacji:
Zadanie 2
Umieść odpowiednie przyciski Lubię to i Udostępnij w swojej aplikacji. Sprawdź jakie informacje
widać po zdobyciu kilku „lajków” i udostępnień od kolegów z grupy.
Wysyłanie prywatnego udostępniania ( Send)
Pozwala na wysłanie prywatnej wiadomości z odnośnikiem do strony, do użytkownika facebooka .
Standardowo dostęp do generatora kodu przycisku Send jest z poziomu serwisu deweloperskiego.
Zakładka Docs, zasób Sharing -> Wtyczki społecznościowe. Wygenerowany kod,
<div
class="fb-send"
data-href="http://miki.cs.pollub.pl/ftest"
colorscheme="light"></div>
po umieszczeniu w naszej stronie, renderuje poniższy przycicsk.
data-
Efekt kliknięcia przycisku Wyślij
Powyższe przyciski pozwalają użytkownikowi na opublikowanie odpowiednio spreparowanych
danych na swoim profilu. Należy zauważyć, że dzieje się to poza naszą aplikacją a więc użytkownik nie
musi przyznawać aplikacji praw do publikowania w jego imieniu. Użytkownik nie musi być nawet
zalogowany do naszej aplikacji…
Wszystkie powyższe przyciski powodują umieszczenie krótkiej informacji o naszym elemencie (stronie,
artykule itp.) w jakimś miejscu Facebooka. Informacja ta jest generowana przez Facebook Crawler na
podstawie zawartości naszej strony. Jak widać na powyższym obrazku FC nie wygrzebał zbyt wiele
z naszej strony testowej (nie za wiele tam jest).
Facebook prowadzi własny indeks stron i ich elementów, wykorzystując w tym celu strukturę i
technologię Open Graph. Facebook Crawler preferuje źródła zgodne z tą strukturą – właściwie się
indeksujące.
Można to uzyskać uzupełniając dane meta naszej strony
<meta property="fb:app_id" content="317692391765220"/>
<meta property="og:title" content="Strona testowa naszej aplikacji"/>
<meta
property="og:site_name"
content="Wspaniała
apka
zintegrowana
z
Facebookiem"/>
<meta property="og:url" content="http://miki.cs.pollub.pl/ftest" />
<meta property="og:description" content="Na tej stronie testujemy różne
elementy SDK Facebooka. Są to m. in. Wtyczki społecznościowe - przyciski
Lubię to, Udostępnij, wyślij, jak również logowanie via Facebook" />
Pełną
listę
dostępnych
parametrów
można
przejrzeć
pod
https://developers.facebook.com/docs/sharing/best-practices?locale=pl_PL#tags
adresem
Dział: 3. Use proper Open Graph tags
Niestety odświeżenie danych FC trwa nawet 24h…
Zamieszczanie postów
Wtyczki społecznościowe mogą również działać w drugą stronę. Mamy np. możliwość osadzenia
dowolnego PUBLICZNEGO postu w strukturze naszego artykułu.
Kod wstawienia postu można najłatwiej uzyskać klikając w prawym górnym rogu publicznego postu w
Facebooku i wybierając Wstaw post
Pozyskany kod składa się z dwóch kontenerów div, z których pierwszy zawiera inicjator SDK i można
go pominąć w naszej aplikacji. Drugi kontener to odwołanie do postu:
<div
class="fb-post"
datahref="https://www.facebook.com/bezuzytecznapl/photos/a.266202190115534.59697.
265382100197543/766343186768096/?type=1"
data-width="466"><div
class="fbxfbml-parse-ignore"><a
href="https://www.facebook.com/bezuzytecznapl/photos/a.266202190115534.59697.
265382100197543/766343186768096/?type=1">Post</a>
użytkownika
<a
href="https://www.facebook.com/bezuzytecznapl">Wiedza
bezużyteczna</a>.</div></div>
Efektem będzie wstawka na naszej stronie:
Komentarze (Comments)
Wtyczka ta pozwala użytkownikom komentować dany element w naszej aplikacji. Użytkownik może
zdecydować, czy publikować swój komentarz również na swoim profilu.
Wygenerowany kod:
<div class="fb-comments" data-href="http://miki.cs.pollub.pl/ftest"
numposts="5" data-colorscheme="light"></div>
Efekt w naszej aplikacji:
data-
Lista aktywności/rekomendacji (Activity/recommendation Feed)
Obie listy pozwalają na przedstawienie aktywności w aplikacji (komentarze, lajki) i rekomendacji
aplikacji w Facebooku wystawionych przez znajomych zalogowanego użytkownika.
Kod wtyczki:
<div
class="fb-activity"
data-site="miki.cs.pollub.pl/ftest"
dataaction="likes, recommends" data-colorscheme="light" data-header="true"></div>
div
class="fb-recommendations"
data-site="miki.cs.pollub.pl/ftest"
dataaction="likes, recommends" data-colorscheme="light" data-header="true"></div>
Lista pokazuje aktywności zrealizowane przez znajomych użytkownika, z wyłączeniem jego samego.
Zadanie 3
Zbuduj w swoim serwisie stronę „favorite funnies” zawierającą 5 najśmieszniejszych według Ciebie
obrazków znalezionych w Internecie. Do każdego obrazka przypisz przyciski Lubię to i Udostępnij oraz
listę komentarzy zgodnie z szablonem:
Obrazek
prz
ycis
ki
Komentarze (max 6)
Na pasku z prawej strony umieść Wtyczkę aktywności – pokazującą zdarzenia na naszej stronie
Przejrzyjcie swoje strony w grupie, lajkując i komentując według uznania. Sprawdźcie jak zmienia się
wygląd wtyczek w trakcie. Szczególnie gdy większa ilość osób jest zalogowana do Twojej aplikacji