{"id":16925,"date":"2020-12-05T15:00:17","date_gmt":"2020-12-05T14:00:17","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=16925"},"modified":"2020-12-04T12:22:04","modified_gmt":"2020-12-04T11:22:04","slug":"facebook-group-feed-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/facebook-group-feed-wordpress\/","title":{"rendered":"How to Embed a Facebook Group Feed and Page Timeline in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]With <a href=\"https:\/\/www.statista.com\/statistics\/272014\/global-social-networks-ranked-by-number-of-users\/\" target=\"_blank\" rel=\"noopener noreferrer\">over two and a half billion active users<\/a>, Facebook is easily the most popular social network there is. Like it or not, Facebook is omnipresent and alive. And with a little help from us, you can create a Facebook feed for your WordPress website, making your social media content accessible to your visitors without them having to leave your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But before we get to the how, let\u2018s talk about the why.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-embed-facebook-timeline\">Why You Should Embed Your Facebook Timeline into Your Website<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-embed-page-timeline-in-wordpress-using-code\">How to Embed Your Page Timeline in WordPress Using Code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-embed-page-timeline-in-wordpress-using-plugin\">How to Embed Your Page Timeline in WordPress Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-embed-facebook-group-feed-in-wordpress-using-plugin\">How to Embed a Facebook Group Feed in WordPress Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-embed-facebook-timeline\"><\/a>Why You Should Embed Your Facebook Timeline into Your Website<\/h2>\n<p>[\/vc_column_text][vc_column_text]It should firstly be said that the internet, as a forum for discussion, has changed. Do you remember IRC? When have you last visited a bulletin board? As user habits and fashions have changed, forums and chatrooms have largely been supplanted by social media. Facebook groups and Facebook pages are now an indispensable communication avenue for your customers. Fortunately, with only a little effort, you can embed a Facebook page\u2018s timeline or a Facebook group feed into your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Embedding a Facebook page or group into your website will let you update your website visitors in real time, without even having to update the contents of your site. Your visitors \u2013 and your community managers \u2013 will appreciate it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Note that this only works for Facebook pages and public groups, in accordance with Facebook\u2019s terms and conditions. You cannot embed a personal timeline.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-embed-page-timeline-in-wordpress-using-code\"><\/a>How to Embed Your Page Timeline in WordPress Using Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]Fortunately, Facebook\u2018s developers are aware of this demand, and have gone out of their way to make it easy for other web developers to add a Facebook embed option into their own software. If you are using a theme which does not have this functionality, you can introduce it yourself, though it does mean you need to change the code of your theme. Be safe, and remember to back up everything. If you don\u2018t feel confident editing code, scroll right down to the next section and find out how you can achieve the same effect using a plugin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, you need to find out your Facebook page URL. In our case, it is:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]https:\/\/www.facebook.com\/QodeInteractive[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/URL-Facebook-Qode.jpg\" class=\"attachment-full size-full\" alt=\"URL Facebook Qode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/URL-Facebook-Qode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/URL-Facebook-Qode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/URL-Facebook-Qode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, to generate the code you need, go to <a href=\"https:\/\/developers.facebook.com\/docs\/plugins\/page-plugin\" target=\"_blank\" rel=\"noopener noreferrer\">Facebook\u2018s Page Plugin<\/a> page.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here, you can generate the link for your Facebook page\u2018s widget. Once you paste your Facebook page URL into the designated field, you will see that your page is loaded into the preview space.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will see your Page\u2018s profile image, its name, the number of likes and the cover image right at the top.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The preview also features the <strong>Like Page<\/strong> button (or the<strong> Liked<\/strong> notification if you have already liked the page) and the <strong>Shop Now<\/strong> button, with the link to your Facebook store, if you have set it up. Immediately underneath will be the <strong>friends<\/strong> bar. If any of your friends have liked the page, you will see how many, and their profile pictures. If not, you will be prompted to <em>Be the first of your friends to like this<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Below that, you will find your Facebook posts, with the <strong>Like<\/strong>, <strong>Comment<\/strong> and <strong>Share<\/strong> buttons underneath each one, so your users can interact with them without navigating away from your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Above the preview space are some fields and checkboxes: The <strong>Facebook Page URL <\/strong>field, which we have already covered, the <strong>Tabs field<\/strong>, which is by default set to show your <em>timeline<\/em>, but you can use it for other page tabs (such as <em>events<\/em>, for instance), and the <strong>Width<\/strong> and <strong>Height<\/strong> field. <strong>Width<\/strong> can be set to anything between 180 and 500 pixels, while height must be set to anything above 70 pixels. Leaving these fields blank makes the widget adopt default values: 340 by 500 pixels. We will leave them at their default values, but you can make them suit your social content \u2013 and website style \u2013 better.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can use the checkboxes immediately below to select a <strong>Small Header<\/strong> or <strong>Hide the Cover Photo<\/strong>, making your embedded page more compact. Here you will also find the <strong>Adapt to plugin container width<\/strong> and <strong>Show Friend\u2018s Faces checkboxes<\/strong>, which are checked by default. We feel we have enough space for this widget, so we will leave them checked.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Page Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Settings-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Settings-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Scrolling down, you can find a large number of options along with code you can use to customize your Facebook page widget. There are also in-depth explanations for people who really like to get into code. We like the look of our widget just the way it is, so we will click the <strong>Get Code<\/strong> button. We now have two snippets of code.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Get-Code.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Get Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Get-Code.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Get-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Get-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first piece of code needs to be added to your theme\u2018s<em> header.php<\/em> file. You will find it in <strong>Appearance\/Theme Editor<\/strong>, on the right-hand side, among the<em> Theme Files<\/em>. You need to paste the first bit of code underneath thetag. Remember to click the <strong>Update File<\/strong> button at the bottom of the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Theme-Editor-Paste-FB-Code.jpg\" class=\"attachment-full size-full\" alt=\"Theme Editor Paste FB Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Theme-Editor-Paste-FB-Code.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Theme-Editor-Paste-FB-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Theme-Editor-Paste-FB-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next bit of code goes wherever you want your plugin to appear on the page. To insert it into a post using <strong>Gutenberg<\/strong>, for instance, simply click the <strong>+<\/strong> sign and add a <strong>Custom HTML<\/strong> block to your post, then paste the HTML into its field. Of course, if you are working with <strong>Elementor<\/strong>, you need a <strong>Custom HTML<\/strong> element for the code, and if working with the <strong>Classic<\/strong> editor, simply edit the post or page in <strong>text<\/strong> mode and paste the code.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/WP-Editor-Paste-FB-Code.jpg\" class=\"attachment-full size-full\" alt=\"WP Editor Paste FB Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/WP-Editor-Paste-FB-Code.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/WP-Editor-Paste-FB-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/WP-Editor-Paste-FB-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And your Facebook page is there for your website visitors!<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"392\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Page Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Preview-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Preview-620x347.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-embed-page-timeline-in-wordpress-using-plugin\"><\/a>How to Embed Your Page Timeline in WordPress Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]But maybe you are uncomfortable fiddling with your website\u2019s code \u2013 that\u2019s fine! There is another solution you can use. You can embed a Facebook page into your website using a plugin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The plugin we will be using is <a href=\"https:\/\/wordpress.org\/plugins\/custom-facebook-feed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Smash Balloon Social Post Feed<\/a>, formerly known as Custom Facebook Feed. It allows you to generate a feed that blends into your website. However, in its free version it will not embed any kind of graphics. Your text posts and links will be there, through. We have created a Test Page on Facebook and populated it with some randomly generated content for this demonstration.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have installed and activated the plugin, you need to log into your Facebook account and connect it to the plugin. Simply click the big blue <strong>Connect a Facebook account<\/strong> button in the <strong>Configuration<\/strong> tab and follow the instructions on the screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Configuration.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Feed Configuration\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Configuration.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Configuration-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Configuration-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will be prompted to choose whether you wish to embed a page or a group feed. We will select a page feed for this part of the demonstration.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Display-Facebook-Page.jpg\" class=\"attachment-full size-full\" alt=\"Display Facebook Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Display-Facebook-Page.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Display-Facebook-Page-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Display-Facebook-Page-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Log into your Facebook account and you will be prompted to select which page\u2018s feed you\u2018d like to embed. You will only be able to select the pages you are admin of. We will select our <em>Test Page<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Choose-Page.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Choose Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Choose-Page.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Choose-Page-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Choose-Page-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next up, you will be brought to the permissions screen. In order for the plugin to function properly, we will let it <em>Read content posted on the Page<\/em>, <em>Manage accounts<\/em>, <em>settings and webhooks for a Page<\/em>, and <em>Read user content on your Page<\/em> (though you may choose to grant it fewer permissions), then click <strong>Done<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Smash-Balloon-Configuration.jpg\" class=\"attachment-full size-full\" alt=\"Smash Balloon Configuration\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Smash-Balloon-Configuration.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Smash-Balloon-Configuration-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Smash-Balloon-Configuration-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you do that, you will be returned to the plugin\u2018s settings screen. You will be prompted to select a page. Again, we will choose our <em>Test Page<\/em>, and then click <strong>Connect this page<\/strong> to the plugin.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Connect-Page.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Connect Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Connect-Page.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Connect-Page-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Connect-Page-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The plugin will automatically fill in your <strong>Facebook Page ID<\/strong> and your <strong>Facebook Access Token<\/strong>. By default, your feed will tend to look like the rest of your website. You can customize it a great deal using the options in the <strong>Customize<\/strong> tab. Once done, you need to <strong>Save<\/strong> your <strong>Settings<\/strong> before scrolling down.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"410\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Configuration-2.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Feed Configuration\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Configuration-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Configuration-2-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Configuration-2-620x363.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Configuration<\/strong> tab also contains some basic settings. Here you need to select the <strong>Page<\/strong> feed, choose which posts you want to <strong>show<\/strong> (we went with<em> Only the page owner<\/em>), as well as select the <strong>Number of posts to display<\/strong> (which could have a different setting for mobile devices). We will leave the rest of the settings alone, but you can fiddle with the way Facebook software parses your posts, change the time during which your plugin<strong> Checks for new posts<\/strong>, which <strong>Localized<\/strong> version of Facebook you wish to use, as well as your <strong>Timezone<\/strong>. Once you are satisfied, you need to <strong>save Settings &amp; Clear Cache<\/strong>. Before you leave the settings page, copy the shortcode<em> [custom-facebook-feed]<\/em>, since you will need it to display your feed on a page or post.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Feed Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Feed-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will demonstrate your facebook feed as part of a post, but it works just the same for a WordPress page. If you are working with <strong>Gutenberg<\/strong>, you need to add a shortcode block. Simply create a shortcode block, paste the shortcode you previously copied from the plugin\u2019s settings, and you are ready to go. When working with <strong>Elementor<\/strong>, you need to use the shortcode element from your left-hand side menu, and if you are using the <strong>Classic<\/strong> editor, you need to paste the shortcode where you want it, provided you are editing in <strong>Text<\/strong> mode.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Page Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Page-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And our post now proudly displays our Facebook page\u2018s feed. Note that image content isn\u2018t visible (that\u2018s a feature of the plugin\u2018s pro version), but the text and the links are there.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"398\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Our-Facebook-Page-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Our Facebook Page Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Our-Facebook-Page-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Our-Facebook-Page-Preview-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Our-Facebook-Page-Preview-620x353.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-embed-facebook-group-feed-in-wordpress-using-plugin\"><\/a>How to Embed a Facebook Group Feed in WordPress Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]The same plugin, <a href=\"https:\/\/wordpress.org\/plugins\/custom-facebook-feed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Smash Balloon Social Post Feed<\/a>, can be used to embed a group feed. It works only a little different than a page. When prompted, you need to select <strong>Facebook Group<\/strong> in the drop-down menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Display-Facebook-Group.jpg\" class=\"attachment-full size-full\" alt=\"Display Facebook Group\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Display-Facebook-Group.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Display-Facebook-Group-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Display-Facebook-Group-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will be guided via prompts through Facebook, where you need to select the groups you wish to connect to the plugin (obviously different for each account), before finally returning to the plugin and selecting the group you wish to embed. For us, it is the <em>Test Group<\/em> we created. Once we have selected it, we will click the <strong>Use token for this Group<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Use-Token.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Use Token\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Use-Token.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Use-Token-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Use-Token-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, in order for the plugin to function correctly, you need to allow the plugin to access the group from Facebook\u2018s group settings screen. You can get there easily by following the \u201c<em>here<\/em>\u201d link.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Group-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Group Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Group-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Group-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Group-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Scroll down all the way to <strong>Advanced settings<\/strong> and click the<strong> Pencil<\/strong> icon to edit the Apps permissions.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"418\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Group-Settings-2.jpg\" class=\"attachment-full size-full\" alt=\"Facebook Group Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Group-Settings-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Group-Settings-2-300x179.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Facebook-Group-Settings-2-620x370.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, search for the <strong>Smash Balloon<\/strong> plugin, and select it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"414\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Smash-Balloon-Search.jpg\" class=\"attachment-full size-full\" alt=\"Smash Balloon Search\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Smash-Balloon-Search.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Smash-Balloon-Search-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Smash-Balloon-Search-620x367.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, click the <strong>Add<\/strong> button to attach the app to the group.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Add-Smash.jpg\" class=\"attachment-full size-full\" alt=\"Add Smash\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Add-Smash.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Add-Smash-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Add-Smash-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In order to use the plugin\u2018s shortcode to display one timeline instead of the other, you need to make the group your primary feed. You can do this by clicking the <strong>Make Primary Feed<\/strong> button. If you want to show multiple feeds using this plugin, you will need to do some shortcode editing. You can find the developer\u2019s tutorial by clicking on the <a href=\"https:\/\/smashballoon.com\/doc\/using-shortcode-options-customize-facebook-feeds\/\" target=\"_blank\" rel=\"noopener noreferrer\">multiple feeds<\/a>\u00a0link in the <strong>Configuration<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"438\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Make-Primary-Feed.jpg\" class=\"attachment-full size-full\" alt=\"Make Primary Feed\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Make-Primary-Feed.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Make-Primary-Feed-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Make-Primary-Feed-620x388.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You also need to scroll to the <strong>Settings<\/strong> section of the <strong>Configuration<\/strong> tab and change the setting of <strong>Is it a page or group?<\/strong> to <em>Group<\/em>. Then you need to copy the <em>[custom-facebook-feed]<\/em> shortcode.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/DD-Group.jpg\" class=\"attachment-full size-full\" alt=\"DD Group\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/DD-Group.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/DD-Group-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/DD-Group-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The shortcode works the same for a group as it does for a page. If you are a <strong>Gutenberg<\/strong> user, simply create a <strong>shortcode<\/strong> block by clicking on the <strong>plus<\/strong> sign and selecting a shortcode block. Then you need to paste the shortcode in its field to work. Of course, if you are using <strong>Elementor<\/strong>, you need to drag and drop the <strong>shortcode<\/strong> element from the left-hand side menu and paste the shortcode in its field. For the <strong>Classic<\/strong> editor, simply paste the shortcode where you want the feed to appear while making sure you are editing your post or page in <em>text<\/em> mode.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Facebook-Feed-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Custom Facebook Feed Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Facebook-Feed-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Facebook-Feed-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Facebook-Feed-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And your group will appear as part of your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"410\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Our-Facebook-Group-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Our Facebook Group Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Our-Facebook-Group-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Our-Facebook-Group-Preview-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Our-Facebook-Group-Preview-620x363.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you have seen, there are several ways of embedding a Facebook feed, be it for a page or a group, into your WordPress website. But which one is for you? As always, it depends on what you want to use the Facebook feed for on your website. If you want to open a window into Facebook so that your visitors can follow your Page content without leaving your website, perhaps the best choice is Facebook\u2018s native Page plugin. However, if you don\u2018t feel confident with altering your page\u2018s code, or if you want to integrate a Facebook group into your website as a forum-like feature, the Smash Balloon plugin might be a better choice. But for full effect you might want to invest in the Pro version of the plugin. Either way, social media integration is now only a short step away.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to integrate your Facebook page or group into your WordPress website? We will show you how.<\/p>\n","protected":false},"author":16990,"featured_media":17111,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,26,4,13],"class_list":["post-16925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-social","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16925","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=16925"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16925\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/17111"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=16925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=16925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=16925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}