✨ PWA ✨
Logo

Piotr Kowalski

Organizator WarsawJS , Trener, YouTuber

Jak wyświetlić liczbę osób lajkujących nasz fanpage?

Dziś, podczas kolejnych warsztatów z programowania w JavaScript organizacji WarsawJS, wpadłem na pomysł, aby wyświetlać podczas całego dnia liczbę lajków, którymi obdarzony jest profil organizacji WarsawJS.

Obecnie jest blisko okrągłej liczby 1500 lajków. Może podczas warsztatów magiczna liczba zostanie przekroczona?

1493, 1494, 1495, 1496, 1497

Moim zdaniem pomysł jest interesujący. Jeśli chcesz się dowiedzieć jak poszła mi implementacja takiego aplikacji, to zapraszam do lektury 📚

Misja

Cel był prosty:

Zaprezentować w formie dynamicznej liczbę lajków fanpage-a WarsawJS.

Dodam, że aby zrealizować takie zadanie, trzeba być administratorem fanpage-a, bo inaczej nie zna się parametru appId oraz appSecret.

Co musiałem zrobić, aby osiągnąć cel?

  • 1. Facebook dla programistów

    Wpisałem jakieś programistyczne frazy do Google-a, aby podpowiedział jak mam osiągnąć cel. Wyszukiwarka nakierowała mnie na stronę developers.google.com.

  • 2. Zignorowanie dokumentacji

    Zaznaczam, że olałem Getting Started, tylko szukałem jakiegoś kodu, bo szkoda mi było inwestować więcej czasu na ten “szybki” i “prosty projekt”.

  • 3. Stworzenie aplikacji na Facebook-u

    Przeczytałem pobieżnie kilka artykułów. Na wszystkich było napisane, że pierwsze co musisz zrobić to stworzyć aplikację fejsbukową. Stworzyłem więc taką. Oczywiście nazwa nie ma żadnego znaczenia.

    Menu do zakładania aplikacji
    Na stronie developers.google.com, klikasz w prawy górny róg.
  • 4. Credentiale

    Po rejestracji aplikacji, w głównym panelu aplikacji jesteś w stanie dostrzec następujących parametrów:

    • App ID
    • App Secret
    Formularz rejestracji aplikacji
    Aby uzyskać App ID, musisz wpisać nazwę aplikacji.
  • 5. Osadzenie kodu fejsbukowego

    W projekcie, gdzie chcesz zaprezentować liczbę lajków, bo osadź na początku kod Facebook-owy. Stwórz plik: facebook-setup.js:

    W sekcji poniżej jest ciekawostka zw. z osadzeniem.

(function (d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {
    return;
  }
  js = d.createElement(s);
  js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js";
  // js.src = "//connect.facebook.net/en_US/sdk/debug.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
  • 6. Zaczynamy kodować!

    Stwórz plik: main.js, gdzie zdefiniujesz stałe:

const appId = 'XXX';
const appSecret = 'XXX';
const getOAuthAccessTokenURI = `https://graph.facebook.com/oauth/access_token?client_id=${appId}&client_secret=${appSecret}&grant_type=client_credentials&debug=all`;

const pageId = 'warsawjs';
const getEngagementURI = `https://graph.facebook.com/${pageId}/?fields=engagement&debug=all`;
  • 7. Pierwsza komunikacja

    Tworzysz funkcję fbAsyncInit w stylu higher-order function (czytaj globalną), w której inicjalizujesz Facebook API za pomocą FB.init

window.fbAsyncInit = function () {
  FB.init({
    appId: appId,
    autoLogAppEvents: true,
    xfbml: true,
    version: 'v2.9'
  });
}
  • 8. Zdobycie Access Token 🌟

    Aby zdobyć klucz należy wykonać proste zapytanie HTTP. Bycie w posiadaniu takiego klucza, umożliwi Ci większy dostęp do Facebook API.

window.fbAsyncInit = function () {
  // ...
  Promise.resolve()
    .then(() => {
      return window.fetch(getOAuthAccessTokenURI);
    })
    .then((response) => {
        return response.json();
    })
    .catch((err) => {
      console.error(err);
    });
}
  • 9. Zdobycie Zaangażowanie

    O co chodzi z “zaangażowaniem” (eng. engagement)? Nie wiem dlaczego taka nazwa, ale ta właściwość definiuje liczbę lajków fanpage-a. Interesujące.

/**
 * Funkcja, do komunikacji z Facebook API.
 * 
 * @author Piotr Kowalski
 * @param {string} url
 * @param {Object} opts
 */
function fetchFacebookService(url, opts = {}) {
  return new Promise((resolve, reject) => {
    FB.api(url, opts, (response) => {
      if (response.error) {
        return void reject(response.error);
      }
      resolve(response);
    });
  });
}

window.fbAsyncInit = () => {
  // ...
  .then((response) => {
    return fetchFacebookService(getEngagementURI, response)
  })
  .then((response) => {
    return response.engagement.count;
  })
  .then((likes) => {
    console.log(likes); // 1497 # mamy to!!!
  })
  // ...
}
  • 10. The END

    Posiadasz już liczbę lajków do swojego fanpage. Wykorzystaj to w dobrych celach!

Wskazówki

  • Czytaj Getting Started od razu!
  • Nie sugeruj się odpowiedziami ludzi na forum odnośnie tego jak coś zrobić z Facebook API. Informacje te są zwykle przestarzałe.
  • Większość usług wymyga podania Access Tokenu.

Developerskie usprawnienia

  1. Flaga w URLach, zwiększa delikatnie możliwości programistyczne debug=all

    Co robi ten parametr? Nie wiem, ale jest developerski to go używam. Dajcie znać w komentarzach po co on jest. Osobiście takiej informacji nie znalazłem.

  2. Dołączanie głównego pliku w procesie osadzenia Facebook API:
    js.src = "//connect.facebook.net/en_US/sdk/debug.js";

    Od razu w DevToolsach widzę jak działa Facebook API. Super!

Pomysły

Spróbuję zrobić paczkę w npm-ie, która by potrzebowała credientiali, a zwracała liczbę lajków strony, której jest się właścicielem 🌟

Tagi: facebook javascript

2 dni wcześniej napisałem: Dlaczego User-Agent zaczyna się od "Mozilla 5.0..."? 2 dni później napisałem: Zobacz, jak "overflow-wrap" może Cię uratować!

Możesz osadzić kod wykorzystując: <pre><code class="{language}"></code></pre>