Élő Facebook a web-oldaladon

2014.01.03. 20:09

Jó pár évvel ezelőtt az egyik legnagyobb divat az interneten a fórumozás volt. Egymás után nyíltak meg a különböző fórumok, portálok, és mindenhova szép számmal regisztráltak be emberek, majd többnyire aktívan részt is vettek a fórumok életében. Az utóbbi években elszaporodó közösségi oldalak (facebook, stb) viszont szó szerint elszívták az embereket a fórumokból, blogokból, és egyéb portálokból, így ezeknek az oldalaknak az aktív látogatottsága jelentős mértékben (sok helyen katasztrofálisan) lecsökkent.
Mivel a jelenség ellen a fórumok nem sokat tudnak csinálni, csak egy lehetőség marad, felvenni a divat stílusát, és kapcsolódni valahogy ezekhez a közösségekhez úgy, hogy közben a fórumunk is megmaradjon. A siker nem biztosított, de a lehetőség adott, és ha nem élünk vele, annyival kevesebb esélyünk marad a fennmaradásra!

Tehát egy lehetséges megoldás, ne "facebook" kinézetű fórummal próbálkozzunk, hanem hozzuk be a Facebook-ot az oldalunkra úgy, hogy közben a fórumunk is megmarad eredeti állapotában.
Nagyon sok különböző portál már használja, de phpbb3 fórumon is ugyanúgy lehet ezt a megoldást használni, mint máshol.

Nem találtam használható phpbb MOD-ot erre a témára, kezdeményezések régebben voltak, de mára már javarészt elavultak.

Van sokféle megoldás, van, amelyik "jobb", és/vagy bonyolultabb. Ez az itteni egy egyszerűbb változat, de jól működik, és kezdésnek használható. Az is jó lenne, ha pár hozzáértőbb fórumtárs érdemben újabb, vagy jobbító ötletekkel formálná az itt felvázolt lehetőséget mindenki javára.

Hogy is kezdjünk hozzá:
  • Legelőször is lépjünk be a böngészőben a facebook oldalunkra, és a továbbiakban is ezt a böngészőt használjuk, míg nem vagyunk készen.
    • Kezdjük egy fontos feladattal, kell nekünk egy Applications ID (app_id) szám.
    • Lépjünk be erre az oldalra: https://developers.facebook.com/docs/plugins/comments
    • Klikkeljünk legfelül az Alkalmazások menüpontra.
    • Ha még nincsen app_id, akkor klikk a Create a New App opcióra.
    • Display Name: - ahol a fórumod van (például: http://weboldalad.ltd/ - vagy http://weboldalad.ltd/forum/) a "/" jellel zárjad!
    • Namespace: - adjál meg egy bármilyen egyszerű nevet egy szóban ékezet nélkül (nyuszika, nevenincs, ferike, stb, stb)
    • Kategória: - válasszad ki az Alkalmazások oldalakra opciót.
    • Ezután klikk az Alkalmazás létrehozása gombra.
    • Itt meg kell adni majd egy Captcha kódot, és ha jól adtad meg, elkészül az Alkalmazásazonosító kódod. (ezt másold ki valahova, mert majd kell!).
    • Klikkeljünk megint legfelül az Alkalmazások menüpontra.
    • Klikk az app_id-s névre, amit már elkészítettünk.
    • Bal oldalt Szerepek menüpont, és nézzük meg, hogy Adminisztrátorok vagyunk-e.
    • Ha nem, adjuk hozzá magunkat a facebook user nevünk segítségével (kezdjük el beírni).
    • Mást nem kell csinálni, mert a többi kódot lejjebb leírom, nem kell vele bíbelődni.
    • Lépjünk be erre az oldalra: http://findmyfbid.com
      Találsz felül egy beviteli mezőt, ide írd be a jelenlegi facebook user nevedet, például:
      Kód:
      https://facebook.com/kovacs.gizi.6924

      Klikk a Find Numeric ID gombra
      Megkapod a Facebook User ID kódodat (ezt másold ki valahova, mert majd kell!).


Az oldalunk szerkesztése:
  • Szükségünk lesz egy változóra, amit el kell készíteni:
    • Az oldalunkról töltsük le és szerkesszük a viewtopic.php fájlt
        Keresd ezt:
        Kód:
        $viewtopic_url = append_sid("{$phpbb_root_path}viewtopic.$phpEx", "f=$forum_id&t=$topic_id" . (($start == 0) ? '' : "&start=$start") . ((strlen($u_sort_param)) ? "&$u_sort_param" : '') . (($highlight_match) ? "&hilit=$highlight" : ''));

        Beillesztés mögé:
        Kód:
        $facetopic_url = generate_board_url() . "/viewtopic.{$phpEx}?f=$forum_id&t=$topic_id";

        Keresd ezt:
        Kód:
           'U_VIEW_TOPIC'          => $viewtopic_url,

        Beillesztés mögé:
        Kód:
           'U_FACE_TOPIC'          => $facetopic_url,

      • Mentés, bezárás, visszatöltés a helyére, felül írva az ott lévőt.

        sytels/kinézetünk/template/overall_header.html
        A fájl legelején keress ezt:
        Kód:
        {META}

        Beillesztés eléje új sorba
        Kód:
        <META property="fb:app_id" content="ide írd be szóköz nélkül azt az Alkalmazásazonosító kódot"/>

        Beillesztés az előző elé új sorba
        Kód:
        <meta property="fb:admins" content="Ide írd be szóköz nélkül a Facebook User ID számokat"/>
          Ez utóbbival azt értük el, hogy a fórum oldalunkon a Facebook Comment Box-ba a bal felső sarokban a Public Comments felirat mellett meg fog jelenni a Moderator View menüpont is. Ezzel moderálhatjuk az ott megjelenő hozzászólásokat.
          Törölni nem tudjuk, csak a sajátunkat, de az akármi miatt oda nem illő, vagy spam, vagy egyéb "troll" hozzászólásokat el tudjuk rejteni, így mások sem fogják látni.
        Beillesztés az előző elé új sorba
        Kód:
        <meta property="og:site_name" content="weboldalad_domain_neve.tld"/>

        Beillesztés az előző elé új sorba
        Kód:
        <meta property="og:type" content="website" />

        Beillesztés az előző elé új sorba
        Kód:
        <meta property="og:image" content="http://oldalad_neve.tld/images/akarmi.xxx" />
          Az images könyvtárba fel kell tölteni egy képet, amelyik min. 200x200 pixeles, és ennek a pontos elérését kell megadni.
        Beillesztés az előző elé új sorba
        Kód:
        <!-- IF U_FACE_TOPIC -->
        <meta property="og:title" content="{PAGE_TITLE}" />
        <meta property="og:url" content="{U_FACE_TOPIC}" />
        <meta property="og:description" content="{SITE_DESCRIPTION}" />
        <!-- ENDIF -->

        DEMO kép:
          Kép


        Keresd ezt:
        • prosilver stílusban
          Kód:
           <body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
          Beillesztés mögé:
          Kód:
          <div id="fb-root"></div>
          <script>(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/hu_HU/all.js#xfbml=1";
                fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));
          </script>

          .
        • subsilver2 stílusban
          Kód:
          <body class="{S_CONTENT_DIRECTION}">

          Beillesztés mögé:
          Kód:
          <div id="fb-root"></div>
          <script>(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/hu_HU/all.js#xfbml=1";
                fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));
          </script>
        .
      • Mentés, bezárás, visszatöltés a helyére, felül írva az ott lévőt.

        style/kinézetünk/template/viewtopic_body.html
        A beillesztés helye szabadon választott, kezdőknek, kevésbé gyakorlottaknak ajánlott:

        Keresd ezt:
        • prosilver stílusban
          Kód:
          <!-- IF S_FORUM_RULES -->
             <div class="rules">
                <div class="inner"><span class="corners-top"><span></span></span>

                <!-- IF U_FORUM_RULES -->
                   <a href="{U_FORUM_RULES}">{L_FORUM_RULES}</a>
                <!-- ELSE -->
                   <strong>{L_FORUM_RULES}</strong><br />
                   {FORUM_RULES}
                <!-- ENDIF -->

                <span class="corners-bottom"><span></span></span></div>
             </div>
          <!-- ENDIF -->

          Beillesztés mögé:
          Kód:
                <div class="fb-comments" data-href="{U_FACE_TOPIC}" data-width="800" data-numposts="5" data-order-by="reverse_time" data-colorscheme="light"></div>

        • subsilver2 stílusban
          Kód:
          <div id="pageheader">
             <h2><a class="titles" href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a></h2>

          <!-- IF MODERATORS -->
             <p class="moderators"><!-- IF S_SINGLE_MODERATOR -->{L_MODERATOR}<!-- ELSE -->{L_MODERATORS}<!-- ENDIF -->: {MODERATORS}</p>
          <!-- ENDIF -->
          <!-- IF U_MCP -->
             <p class="linkmcp">[ <a href="{U_MCP}">{L_MCP}</a> ]</p>
          <!-- ENDIF -->
          </div>

          Beillesztés mögé:
          Kód:
                <div class="fb-comments" data-href="{U_FACE_TOPIC}" data-width="800" data-numposts="5" data-order-by="reverse_time" data-colorscheme="light"></div>
      • Mentés, bezárás, visszatöltés a helyére, felül írva az ott lévőt.
      • Elvileg készen vagyunk a szerkesztéssel.

      .
    • Pár szót a beillesztett kódról:
      • data-width="800" - a facebook comments blokk 800 pixel széles (változtatható, 300px alá lehet, de nem érdemes menni)
      • data-numposts="5" - Egyszerre 5 hozzászólás jelenik meg. Változtatható, minimum 1 kötelező, ajánlott maximum 10.
        Ha ennél több van, akkor alul megjelenik a szokásos szöveg: - További xx bejegyzés megtekintése - klik rá, és megtekinthető.
      • data-order-by="reverse_time" - A hozzászólások időrendi sorrendben jelennek meg, a legfrissebb legfelül.
      • data-colorscheme="light" - a comment box színe - két választás van: "light" or "dark", az az világos, vagy sötét.
      • Akit még egyéb beállítás érdekel (nem sok van): https://developers.facebook.com/docs/plugins/comments

      .
    • Kezdőknek, kevésbé gyakorlottaknak egy tipp a beillesztésre a sima kód helyett:
      Kód:
         <br />
            <center>
               <table style="width: 820px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-color: #898989; border-style:solid;" cellpadding="10"><tr><td align="center" valign="middle" width="100%">
                  <font face="Arial Black" size="3"><b>FACEBOOK COMMENTS</b></font>
               </td></tr>
               <tr><td align="center" valign="middle" width="100%">   
            <div class="fb-comments" data-href="{U_FACE_TOPIC}" data-width="800" data-numposts="5" data-order-by="reverse_time" data-colorscheme="light"></div>
               </td></tr></table>   
            </center>
         <br />
      Természetesen a HTML értékek, méretek, színek szabadon változtathatók, a lényeg a <div ....... /div> között van.

      .
    • Azoknak, akik használják az Első hozzászólás kiemelése megoldást, jól jöhet az abban lévő kód:
      Keresd ezt:
      Kód:
          <!-- IF postrow.S_ENABLE_DETACHMENT --><br /> IDE BE LEHET TENNI SZÖVEGET, KÉPET, REKLÁMOT, VAGY MÉG TÖBB (<br />) SOREMELÉST <br /><!-- ENDIF -->

      Csere erre:
      Kód:
          <!-- IF postrow.S_ENABLE_DETACHMENT --><br /> <div class="fb-comments" data-href="{U_FACE_TOPIC}" data-width="800" data-numposts="5" data-order-by="reverse_time" data-colorscheme="light"></div> <br /><!-- ENDIF -->

      Így nem csak az első hozzászólás lesz jól láthatóan kiemelve, de a hely is ki van használva.
      Viszont ebben az esetben csak akkor jelenik meg a facebook comment box, ha az első hozzászólás ki van emelve!
      Ezzel viszont azt is elérhetjük, hogy nem mindegyik téma használható facebook oldalként (is), hanem csak az, amelyiket mi azzá tesszük a kiemeléssel.
  • A Facebook Comments Box lényege, hogy ezzel a megoldással közvetlen kapcsolatban vagyunk a facebook oldallal.
  • Megjelenik akkor is, ha nem vagy belépve a Facebook oldalra, akkor is, ha az oldaladra sem vagy belépve, de vendégként látható a téma. Látható, olvasható, de a Comments Box-ban hozzászólni csak facebook bejelentkezés után lehet.
  • Viszont ha bárki ír hozzászólást, nem csak a fórum oldalon jelenik meg, hanem a facebookon is, és a facebook ismerősök is láthatják.
  • A fórum oldalon viszont azok láthatják, és hozzá szólhatnak, akik arra járnak. Ha hozzászól, nála is megjelenik a facebook oldalon, és így már az ő ismerősei is láthatják.
  • Ugyanakkor, ha valaki hozzászól a fórumon egy már meglévő facebook hozzászóláshoz, a hozzászólás többi résztvevőinél is megjelenik a facebook oldalon a megszokott jelzés, hogy új hozzászólás érkezett, mintha a facebook-on szólt volna hozzá.
  • És ha valaki a facebook-on szól hozzá, a fórumban is megjelenik a Comments Boxban a hozzászólása!.
  • Ha a fórumban az adott topikot vendégek is láthatják, olvashatják, akkor ezt a Comments Box-ot is tudják használni.
  • Ugyanakkor a topikot, a fórum hozzászólásokat ugyanúgy lehet használni, mint előtte, nem befolyásol semmit.

2017.03.08. 07:00

thanks post & Like post very...