How to Embed a Facebook Feed On Your Website [Quick Tutorial]

Facebook is an undeniably powerful channel for marketing purposes. In fact, 91% of B2B and 96% of B2C marketers are currently using it for advertising and marketing.

The success of your social media marketing strategy depends on engagement, usually in the form of likes, comments, or shares. However, high engagement rates are easier said than done.

One way to increase engagement on your company’s Facebook page is to embed your page on your website. This can increase the number of likes and comments on your posts without Remove viewers from your website.

Here’s how to embed a Facebook feed on a website. Whether you host your website on HubSpot, WordPress, Squarespace, or Wix, we have it all for you.

How to embed a Facebook feed on a website

1. HubSpot

If you want to embed a Facebook feed on your HubSpot hosted website, it’s incredibly easy to do.

1. Go to first Facebook’s plugin page.

2. Copy and paste your company’s company page into the Facebook Page URL field.

3. Then adjust the width and height to suit your preferences, depending on your website and placement. When you’ve customized the timeline, click the Get Code button.

4. Go to the IFrame tab and copy the custom module.

5. Next, open the editor tool on your HubSpot landing page and select “Source Code”.

6. Now paste your IFrame code into the Source code section of your page. Then click on “Save Changes”.

And voila! Your timeline is officially embedded in the HubSpot landing page of your choice.

2nd place

If you host your website on Squarespace, follow most of the directions listed above. However, the third step will vary for this website hosting platform.

Let’s explore how to embed a Facebook feed in Squarespace. It is important to note: Adding JavaScript or IFrames to blocks of code is a Premium function available on both business and commerce plans, so you’ll need a premium account to continue.

1. Go to first Facebook’s plugin page.

2. Copy and paste your Company Page URL into the Facebook Page URL field. Then adjust the width and height to suit your preferences, depending on your website and placement.

When you’ve customized the timeline, click the Get Code button. Copy and paste the code in JavaScript form.

3. Next, on a Squarespace page, click Edit Post, click an insertion point, and choose Code from the menu:

4. Next, select Javascript from the drop down menu and copy and paste your Facebook code into the box. Then click on “Apply”.

If you have more questions about adding unique code to your Squarespace page, see the Squarespace Code Blocks FAQ page.

3. WordPress

WordPress differs slightly from the instructions listed above.

Instead of using Facebook’s custom code, you can use a WordPress plugin. (Note: You have to upgrade to the business plan under WordPress in order to use this plugin function.)

For our purposes, use this Smash Balloon Social Post Feed plugin which is rated 5 stars and has over 200,000 active installs.

Before you continue with the following steps, make sure that you install the plugin in your Businessplan WordPress account. You can either install via the WordPress plugin directory or by uploading the files to your web server (in the / wp-content / plugins / directory). Then click on “Activate”.

1. Navigate to the Facebook Feed tab in WordPress to configure your feed. Then click on “Connect Facebook Account” and select your company page.

2. Next, copy the shortcode [custom-facebook-feed] to embed your feed on your website. (You can also view multiple feeds from different Facebook pages by specifying a page ID directly in the shortcode: [custom-facebook-feed id=smashballoon num=5].)

3. Paste it into the text of your new or existing WordPress site.

4. All right! Once you’ve previewed your page, you’ll see what the timeline will look like in live mode.

4. Wix

For Wix customers, you use a third party tool – Elfsight – to generate the unique code that you can use on your Wix website. Because of this, this list includes a few additional steps.

1. Create your own Elfsight Apps account or log in to your existing account. (It’s free to embed a Facebook feed code. If you have to use Elfsight a lot, consider the basic plan, which is $ 18 a month for startups and new businesses.)

2. On the Social tab, click the Facebook Feed application.

3. Select the template you want to use to determine what your Facebook feed will look like on your Wix site. For example, you can choose a Facebook feed with a small widget or a Facebook feed in full screen mode. Click “Continue with this template …” when you’re ready.

4. Then click the “Connect to Facebook” button to connect your company’s Facebook page to Elfsight. You can also click the Layout tab to change the height and width of your widget.

5. When you are finished, click “Save”. A popup will appear giving you the code you need to embed your page on your Wix website.

6. Now open your Wix ADI and select “Add” at the top of your Wix page. Click Section To Page.

7. Select “HTML Embed” in the navigation bar.

8. Now click on the desired section design. Then enter the title, subtitle and paragraph. When you’re done, click the blue Settings button in HTML.

9. Select the embed type – in this case you want “HTML Code”. Then paste the HTML you received from Elfsight into this section.

10. When you are finished, click the “Publish” button on your Wix Page to add your Facebook feed to your Live Wix site.

Embed Facebook event feeds on the website

To embed a Facebook event feed on your website, go to the page plugin and paste your Facebook page url into the box. Then type “Events” in the “Tabs” section.

Now click on “Get Code” and using the steps above, copy and paste this code into your existing site.

And there you have it! You can now embed any post, timeline, or event on your website to increase engagement with your social pages.