Skip to content

Facebook events page architecture

Adrien D. Ahlqvist edited this page Feb 6, 2020 · 3 revisions

Facebook events page architecture

This document aims at providing a clearer understanding of how FB Event Page is built. This enables us to better understand how to parse it.

Event grouping

You have three sets of event types in Facebook:

  1. Upcoming events. They are regrouped in a #upcoming_events_card div.
  2. Recurring events. They are regrouped in a #recurring_events_card div
  3. Past events. They are regrouped in a #past_events_card div

Screenshots

Upcoming events Upcoming events

Recurring events Recurring events

Past events Past events

HTML structure

Upcoming and past events

  • Event date: ._5px7 _51m-
  • Event name and link: ._4dmk
  • Date details: ._4dml fsm fwn fcg
  • Event location: ._4dmn
    <div id="upcoming_events_card" data-referrer="upcoming_events_card">
        <div class="_p6e _4-u3">
            <div class="_p6f">
                <div class="_4uly">Évènements à venir</div>
                <div class="_1ikf"><button rel="dialog" class="_4jy0 _4jy3 _517h _51sy _42ft" type="submit" value="1"><i
                            alt="" class="_3-8_ img sp_UKmIkqBN6Ca sx_3df933"></i>Partager les évènements</button></div>
            </div>
            <div class="_24er">
                <table class="_4dmd _4eok uiGrid _51mz" cols="4" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr class="_51mx">
                            <!-- Event date -->
                            <td class="_5px7 _51m-"><span class="_5x8v _5a5j _5a5i"><span class="_5a4-">FÉV</span><span
                                        class="_5a4z">13</span></span></td>
                            <td class="_4dmi _51m-">
                                <div class="_4dmj">
                                    <!-- Event name -->
                                    <div class="_4dmk"><a data-hovercard="/ajax/hovercard/event.php?id=1308046792731673"
                                            href="/events/1308046792731673/?acontext=%7B%22source%22%3A5%2C%22action_history%22%3A[%7B%22surface%22%3A%22page%22%2C%22mechanism%22%3A%22main_list%22%2C%22extra_data%22%3A%22%5C%22[]%5C%22%22%7D]%2C%22has_source%22%3Atrue%7D"><span
                                                class=" _50f7"> Fêter l'amour! </span></a></div>
                                    <!-- Date details -->
                                    <div class="_4dml fsm fwn fcg"><span class="">13 févr. - 15 févr.</span><span
                                            aria-hidden="true"> · </span>10 invités</div>
                                </div>
                            </td>
                            <td class="_5pxd _51m-">
                                <!-- Event location -->
                                <div class="_4dmn">
                                    <div class="_30n-"><a data-hovercard="/ajax/hovercard/hovercard.php?id=1033922579981273"
                                            href="https://www.facebook.com/brasserieboswell/">Boswell Brasserie
                                            Artisanale</a></div>
                                    <div class="_30n_">Montréal</div>
                                </div>
                            </td>
                            <!-- Calls to action -->
                            <td class="_4dmt _51mw _51m-">
                                <div class="_4dmu">
                                    <div class="_2ib5">
                                        <div class="_2ib4"><a class="_4jy0 _4jy3 _517h _51sy _42ft" target="_blank"
                                                href="https://l.facebook.com/l.php?u=http%3A%2F%2Fwww.brasserieboswell.com%2F%3Ffbclid%3DIwAR0AT24UTB3QzZCJ8pnfM1uS61I59ZehYXf6XXJ_9mYNuINylvg_gDYPCLs&amp;h=AT230XrUsd6fHVVwVQk2pTYWi-ARWNXp9_i7beoHgrFgSQnRK_gsvVgmV5uijjzbcGe6FzoxyeyX4pkWQziWaFIh9vVsUBVsoeRX0_ZL6XUgzIEwLBUx7uUEdwcZ21iYaNkirraY0HQ"
                                                rel="nofollow noopener" data-lynx-mode="hover">Obtenir des billets</a></div>
                                        <div class="_2ib4">
                                            <div><button class="_4jy0 _4jy3 _517h _51sy _42ft" type="submit" value="1"><i
                                                        alt="" class="_3-8_ img sp_VGKaupb8AJQ sx_7fa060"></i>Ça
                                                    m’intéresse</button></div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

Recurring events

  • Event name and link: ._2l3f _2pic
  • Event dates: ._4bl7
  • Event description: ._4etw
  • Event location: ._2l3g _2pic
    <div id="recurring_events_card" data-referrer="recurring_events_card">
        <div>
            <div class="_1b-a _4-u2  _4-u8">
                <!-- Maint event container -->
                <div class="_j6k clearfix _ikh">
                    <!-- Left hand-side picture -->
                    <div class="_1b-b _4bl7"><a
                            href="/events/1310049312515940/?acontext=%7B%22source%22%3A5%2C%22action_history%22%3A[%7B%22surface%22%3A%22page%22%2C%22mechanism%22%3A%22main_list%22%2C%22extra_data%22%3A%22%5C%22[]%5C%22%22%7D]%2C%22has_source%22%3Atrue%7D">
                            <div backgroundfocus="50% 46.99%" backgroundsize="coverinside" height="204" width="390"
                                src="https://scontent-lga3-1.xx.fbcdn.net/v/t1.0-9/s960x960/79779356_2744064398989080_8498011855095070720_o.jpg?_nc_cat=111&amp;_nc_ohc=5yiWJxif24AAX9qKGXo&amp;_nc_ht=scontent-lga3-1.xx&amp;oh=3a57aa507f951ca8fef009a1d6cf655d&amp;oe=5EC3A566"
                                loadingindicatorstyle="none" class="_5f0d" style="width: 390px; height: 204px;"><img alt=""
                                    class="_5i4g img" style="width: 390px; height: 232px; left: 0px; top: -7px;"
                                    src="https://scontent-lga3-1.xx.fbcdn.net/v/t1.0-9/s960x960/79779356_2744064398989080_8498011855095070720_o.jpg?_nc_cat=111&amp;_nc_ohc=5yiWJxif24AAX9qKGXo&amp;_nc_ht=scontent-lga3-1.xx&amp;oh=3a57aa507f951ca8fef009a1d6cf655d&amp;oe=5EC3A566">
                            </div>
                        </a></div>
                    <!-- Event description -->
                    <div class="_1b-d _4bl9">
                        <div>
                            <div class="_4wfe">
                                <div class="_2l3c">2 dates restantes</div>
                                <!-- Event title -->
                                <div class="_2l3f _2pic"><a
                                        href="/events/1310049312515940/?acontext=%7B%22source%22%3A5%2C%22action_history%22%3A[%7B%22surface%22%3A%22page%22%2C%22mechanism%22%3A%22main_list%22%2C%22extra_data%22%3A%22%5C%22[]%5C%22%22%7D]%2C%22has_source%22%3Atrue%7D">Initiation
                                        à l'escalade de glace</a></div>
                                <!-- Event location -->
                                <div class="_2l3g _2pic"><span>La Liberté Nord-Sud</span></div>
                                <!-- Event description -->
                                <div class="_2l3j">
                                    <p class="_4etw"><span>Vous rêvez d’essayer l’escalade de glace? Ça tombe bien! En
                                            collaboration avec La Liberté Nord-Sud, Zéro Gravité vous convie à une journée
                                            d'initiation cet hive</span>... <a href="#" title="Plus" class="">Plus</a> <a
                                            href="#" title="Moins" class="_4a6u">Moins</a></p>
                                </div>
                            </div>
                            <!-- Upcoming event dates -->
                            <div><span>
                                <!-- Individual date -->
                                <a class="_2l45"
                                        href="/events/1310049329182605/?acontext=%7B%22source%22%3A5%2C%22action_history%22%3A[%7B%22surface%22%3A%22page%22%2C%22mechanism%22%3A%22main_list%22%2C%22extra_data%22%3A%22%5C%22[]%5C%22%22%7D]%2C%22has_source%22%3Atrue%7D">
                                        <div class="_2l43 clearfix _ikh">
                                            <div class="_4bl7"><span class="_5x8v _5a5j _5a4_"><span
                                                        class="_5a4-">FÉV</span><span class="_5a4z">8</span></span></div>
                                            <div class="_2l4t _4bl9"><span>Sam. 09:45</span></div>
                                        </div>
                                    </a></span></div>
                        </div>
                    </div>
                </div>
                <div class="_3z96 _2ph_"><span class="_p1j">Sport · 126 personnes</span>
                    <div class="_idm">
                        <div class="_2ib5">
                            <div class="_2ib4"><a class="_4jy0 _4jy3 _517h _51sy _42ft" target="_blank"
                                    href="https://app.rockgympro.com/b/widget/?a=offering&amp;offering_guid=0f5da14f82f34da9b0b85bc68b871272&amp;mode=p&amp;fbclid=IwAR2aIVga12yji25ydA-eYcmN8T-NZcIlob_fuir68GntT-CJbpiWvvoXmfk"
                                    rel="nofollow noopener" data-lynx-mode="hover"
                                    data-lynx-uri="https://l.facebook.com/l.php?u=https%3A%2F%2Fapp.rockgympro.com%2Fb%2Fwidget%2F%3Fa%3Doffering%26offering_guid%3D0f5da14f82f34da9b0b85bc68b871272%26mode%3Dp%26fbclid%3DIwAR2aIVga12yji25ydA-eYcmN8T-NZcIlob_fuir68GntT-CJbpiWvvoXmfk&amp;h=AT3H5OnSbLkftMbZPOinz8nbWWiFXXNUnMkE1IRZ6jpaD-_bLO77Vm74wnb98S423_dEd9Sbat5eBP3PL1CIE6js2F5bg4chIEOdHwoSIOYWwQVGTDFzUEEKeK1g-Fms91VXdCGcGXY">Obtenir
                                    des billets</a></div>
                            <div class="_2ib4">
                                <div><button class="_4jy0 _4jy3 _517h _51sy _42ft" type="submit" value="1"><i alt=""
                                            class="_3-8_ img sp_VGKaupb8AJQ sx_7fa060"></i>Ça m’intéresse</button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>