{"id":26071,"date":"2021-06-26T15:00:23","date_gmt":"2021-06-26T13:00:23","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=26071"},"modified":"2021-06-23T12:31:32","modified_gmt":"2021-06-23T10:31:32","slug":"how-to-add-facebook-event-calendar-to-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-facebook-event-calendar-to-wordpress\/","title":{"rendered":"How to Add a Facebook Event Calendar to WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]With the number of users nearing three billion<\/a>, Facebook is easily the most popular social network<\/strong> at the moment. Part of the reason for its popularity with users are its features \u2013 on Facebook, people connect with people, businesses connect with clients, and communities can form organically, whatever else you may think of the network.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]One of Facebook\u2019s popular features is event organization and planning. If you are running a website for a business or a community (such as a hobby club or a neighborhood association) which holds meetings or events with any frequency, chances are you also run a Facebook group or page to organize and inform attendees.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Of course, you can use WordPress to embed a Facebook group feed or page timeline<\/a> into your website, but suppose you only want the event calendar? We\u2019ve got your back. But before we get into the nuts and bolts of the how-to, let us take some time to go into the why and wherefore.[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Why Add a Facebook Event Calendar to Your Website?<\/h2>\n

[\/vc_column_text][vc_column_text]Popular as it is, many people only use Facebook irregularly<\/strong> (or only to keep in touch with family and friends), while visiting their favourite websites daily for news. Also, your website visitors and your Facebook followers or group members might not overlap. With a Facebook Event calendar on your website, your visitors will be notified of upcoming events at a glance, even if they don\u2019t don\u2019t want to log into Facebook to mark themselves as interested or going.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Sure, you could just create an event registration page<\/a> on your website, but that only doubles the work<\/strong> if you also want to create events for your Facebook community. Furthermore, with Facebook, registering for an event just takes a click, which makes it a good option for informal events or large gatherings. We do think a comprehensive form or RSVP plugin<\/a> is better for invitation-only events, but for club meetings, open-air events and similar, simpler is better.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]How to Add a Facebook Event Calendar to WordPressBefore you begin, you\u2019ll need a Facebook page with at least one upcoming event. Once you have a Facebook page with an event, you\u2019ll need its URL. Simply load your page in your browser and copy it.
\n[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Facebook <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You then need to access Facebook\u2019s Page Plugin<\/a> page in order to generate the code you need.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The first thing you need to input is the Facebook Page URL<\/strong>. Once you do, you will get a preview of your page timeline in the preview box, with your page posts in descending order from latest to first. This is about events, though, so in the Tabs<\/strong> field you need to replace \u201ctimeline\u201d with \u201cevents\u201d. Once you press enter, you will see that the preview has changed to show upcoming events only, with the most immediate ones first.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This is where you can also customize the look of the widget which will appear to your visitors. You can set the Width<\/strong> and the Height<\/strong>, with Width being limited to anything between 180 and 500 pixels, while Height has to be over 70 pixels. If you leave these fields blank, you will get the default values of 340 by 500 pixels.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The checkboxes below the Width and Height fields govern the style of your Event Calendar: you can select a Small Header<\/strong> or Hide the Cover Photo<\/strong> to give more space to your event content, and you can also choose to uncheck Adapt to plugin container width<\/strong> and Show Friend\u2019s Faces<\/strong>, which are checked by default.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Facebook <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you are of a more technical bent, you can scroll down and read through some of the attributes used by Facebook\u2019s plugin. If not, you can just click the Get Code<\/strong> button underneath the preview box to, well, get your code.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You will get two pieces of code, and you need both of them. Copy the first one.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Get <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You need to copy your first piece of code into your header.php<\/em> file. You will find it by navigating to Appearance\/Theme Editor.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Theme <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Find the header.php<\/em> in the right-hand side menu and click to open it. Next, find the <body> tag, and paste the first piece of code directly underneath it, making sure you don\u2018t upset any other tags. Finally, scroll down and click Update File<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Paste <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, go back to the Facebook Page Plugin page and copy the second piece of code.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Widget <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This is the code to the actual event calendar widget, and you can use it in any widget area on your website, minding the height and width. We will use it as part of a post, but you can use it whenever you like.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Once you have created a post, click on the plus<\/strong> sign to add a block, then select the HTML<\/strong> block.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]All that\u2018s left to do is paste the code into your HTML block. Of course, this goes for Gutenberg users. If you are using Elementor, you need the Custom HTML<\/strong> element, while a Classic Editor<\/strong> user can simply paste the code where they want it, provided they are using the Text<\/strong> view.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And your event calendar will be there for your visitors to peruse.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Event <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]As we have shown, embedding a Facebook event calendar into your WordPress website is quick and easy and uses Facebook\u2018s own code. So, in the interest of time-saving for you and for your website visitors, take a while to set up this simple solution. Your visitors will know what events you\u2018ve got in the pipeline at a glance, and your community will have more ways of staying informed. Best of all? This widget updates itself constantly, meaning you only ever need to create an event once \u2013 on Facebook.
\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

There is an easy way to notify your visitors of your Facebook events in WordPress. We will show you how.<\/p>\n","protected":false},"author":16990,"featured_media":26484,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[115,15,26,4,13],"class_list":["post-26071","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-events","tag-plugins","tag-social","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=26071"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26071\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/26484"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=26071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=26071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=26071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}