How to Embed Facebook Feed on Website?

Add Facebook Feeds

Step 1: Login to your Taggbox Account. You will land on the Dashboard. Click on the Wall Name to open the Wall Editor.

Step 2: Click on Feeds. (You will find it on the top row in the left column)

Linkedin Feeds

Step 3: A drop-down menu appears. Click on Add Feeds to create a new feed.

Linkedin Add feed

Step 4: Select Facebook icon as your feed source from Pick a source.

Select Facebook icon1

Step 5: A Create Facebook Feed box will appear. Select a source from Page or My Profile Posts and create a Facebook connection.

Create Facebook Feed

  • Choose Page to fetch your Facebook Page posts on your social wall.
  • Choose My Profile Posts to fetch your Facebook Profile posts on your social wall.

Step 6: Click on Continue With Facebook. Provide your login credentials to connect your Facebook account to your social wall.

Great! You have successfully added your Facebook feeds and they will appear in the wall editor in a while. You can also use the Personalize and Moderation Panel to set up your Social wall. You can finally embed the Facebook feed on website.

Embed Facebook Feed On Website

To embed Facebook feeds on a website, follow the following steps –

Step 1: Click on the Display Button on your wall editor.

Display Button

Step 2: Select the Embed in Websites to embed your Facebook feeds on your website.

Display Options

Step 3: Select your Website Platform. (E.g. – HTML, WordPress, Wix etc.)

Choose embed platform

Embed On HTML Website

Step 1: To embed your Facebook feed on HTML website, choose HTML as your platform.

Choose HTML

Step 2: Set width, height and height type as per your requirements.

HTML height

Step 3: Click on Get Code.

Get Code

Step 4: Copy the code from the field or you can also see a preview of your wall by clicking on Preview. Paste the code into the body section of your website.

With these steps, you can easily embed Facebook feed on HTML website.

Embed On WordPress 5.0 Website

Step 1: To embed your Facebook feed on WordPress 5.0 website, choose WordPress as your platform.

Choose embed platform WordPress

Step 2: Set width, height and height type as per your requirements and click on Get Code.

Step 3: Generate the Website Embed code from the Taggbox code generator and copy the Code.

WordPress code height

Step 4: Open the page in your WordPress backend where you want to embed the Facebook feeds. Select “(+)Add Block” in the top left corner of the WordPress Editor.

Step 5: Here, click on Formatting and then choose Custom HTML. Paste the copied code in the editor. Click on Publish/Update post and You’re done.

Embed On WordPress Classic Website

In case you are still using the older version of WordPress, follow the below steps-

Step 1: Select WordPress as your website building platform and generate the Website Embed Code from Taggbox. Once the code is generated, copy it on the clipboard.

Step 2: Open the page in your WordPress backend where you want to embed the Facebook feeds.

Step 3: On the right-hand side, you will find a Visual and a Text option. Choose Text Mode. Paste the generated embed code where you want to show your wall.

Step 4: After embedding the code, click on Update/Publish to save the changes.

Embed on WIX Website

Step 1: To embed your Facebook feed on WIX website, choose Wix as your platform.

Choose embed platform Wix

Step 2: Open your WIX Editor and Navigate to the Page Where you want to Embed Facebook feeds. Here, click on the “+ Add” button.

Step 3: Click on More and Select Embed a Site.

Step 4: Check the “Website Address” under Mode.

Step 5: Copy and paste the generated URL into the “Website Address” field.

Done.

Embed On Squarespace Website

Step 1: To embed your Facebook feed on SQUARESPACE website, choose Squarespace as your platform.

Choose embed platform Squarespace

Step 2: Set width, height and height type as per your requirements and click on Get Code.

Squarespace Height code

Step 3: On Squarespace Navigate to the page where you want to embed Facebook feed.

Step 4: Click on +Add/Edit Block and Select Code.

Step 5: Paste the Copied code and Click on Apply.

Step 6: Save the page to apply the changes.

Embed On Weebly Website

Step 1: To embed your Facebook feed on Weebly website, choose Weebly as your platform.

Choose embed platform Weebly

Step 2: Set width, height and height type as per your requirements and click on Get Code.

Weebly get code

Step 3: On Weebly Navigate to the page where you want to embed the Facebook feeds.

Step 4: In the left navigation bar click on “Embed Code” and drop it on the position where you want to display the wall.

Step 5: Paste the Copied code into the Container and publish the changes you made.

Embed On Shopify Website

Step 1: To embed your Facebook feed on Shopify website, choose Shopify as your platform.

Choose embed platform Shopify

Step 2: Set width, height and height type as per your requirements and click on Get Code.

Choose embed platform Shopify

Shopify gives you to option to embed your Facebook feeds either on default Pages or New Pages or Blog Posts.

Default Pages

Follow these steps for Default Pages:

Step 1: After generating the embed code, Login your Shopify store and navigate to Online Store-> Themes Menu in the sidebar.

Step 2: Go to Edit HTML/CSS option on top right of the page.

Step 3: Select Layout/Templates/Section (Eg: For Homepage – Index.liquid) Where you want to display Facebook feeds.

Step 4: Paste the Copied code and Click on Save.

New Pages

Follow these steps for new pages:

Step 1: After generating the embed code, Login your Shopify store and navigate to Online Store-> Themes Menu in the sidebar.

Step 2: Click on Add Page on Top right of the page.

Step 3: Select Show HTML (<>) option of Text Editor.

Step 4: Paste the Copied code and Click on Save.

Blog Posts

Follow these steps for Blog Posts:

Step 1: After generating the embed code, Login your Shopify store and navigate to Online Store-> Themes Menu in the sidebar.

Step 2: Click on Add Blog post on the Top right of the page.

Step 3: Select Show HTML (<>) option of Text Editor.

Step 4: Paste the Copied code and Click on Save.

If you have any questions or need help, please Contact us or write us at support[at]taggbox[dot]com.