-
Notifications
You must be signed in to change notification settings - Fork 1
Facebook events page architecture
Adrien D. Ahlqvist edited this page Feb 6, 2020
·
3 revisions
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.
You have three sets of event types in Facebook:
- Upcoming events. They are regrouped in a
#upcoming_events_card
div. - Recurring events. They are regrouped in a
#recurring_events_card
div - Past events. They are regrouped in a
#past_events_card
div
Upcoming events
Recurring events
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&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>
- 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&_nc_ohc=5yiWJxif24AAX9qKGXo&_nc_ht=scontent-lga3-1.xx&oh=3a57aa507f951ca8fef009a1d6cf655d&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&_nc_ohc=5yiWJxif24AAX9qKGXo&_nc_ht=scontent-lga3-1.xx&oh=3a57aa507f951ca8fef009a1d6cf655d&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&offering_guid=0f5da14f82f34da9b0b85bc68b871272&mode=p&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&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>