How to Embed Facebook Feed on Your Website In few steps


embed Facebook feed

Raise your hand if you have ever wondered how to embed Facebook feed on your website?

Updating your Facebook page and doing the same for your website is a huge pain and time consuming, so many community managers are just fed up with this task.

In this post, we outline a few methods that can help you to display your Facebook page activity on your website.

What’s inside:

One of the simplest solutions that can help you to embed your Facebook Page timeline feed you can use the free Page Plugin by Facebook.

1. Here is how to embed Facebook feed with Page Plugin

  1. Enter your Facebook Page URL
  2. Set width or height parameters
  3. Click Get Code
  4. And just copy and paste the code in your website body section
page plugin

I know, I know, the Facebook Page plugin has limited functionality for customization, especially if you want to display the feed in a grid layout, which is the most common layout preference.

Well, the good news is that there is a plugin that can embed and customize your Facebook feed on your website in the next 5 seconds. Technically, this means that you will be able to embed an entire Facebook page feed on a website in a grid layout with one line of code, that will sync your website with your Facebook page activity.

It is a simple Facebook Feed Plugin and it will only need you to embed one line of code in the HTML body tag of your blog post or website page. Don’t worry if you are using WordPress for your website or blog. This plugin will help you to embed Facebook feed in your WordPress, Drupal or Joomla websites, too.

Here’s how to embed Facebook feed into your website

2. Steps to Embed Facebook Feed on Website with EmbedFeed

EmbedFeed is a full-featured social media aggregator that has direct integration with the major social media networks, such as Facebook, Instagram, and Twitter.

To embed a Facebook feed with EmbedFeed, first you will need to log in to your account or if you still do not have an account you get a free trial account. Once you have the account, just follow these steps:

  • Click on the menu “Sources”
  • Click the top-right green button “Add New”
  • Select Facebook and click ‘Next’
  • Paste or type your Facebook Page URL and click ‘Next’
  • Once the feed is generated, click ‘Create Feed’
  • Copy the provided embeddable code
  • Paste it into the HTML of your website or in the text editor of your CMS.

That’s it. Here is a demo of the EmbedSocial Facebook social feed.

And, below are the steps in details with screenshots.

1. Import the Facebook Feed into your account

Once you login to your EmbedSocial account, click ‘Sources’ in the left-hand menu and on that page click the top-right ‘Add new source’ button.

embed facebook feed step 1

In the sources list, just click on the ‘Facebook’ box and click “Next” as shown below:

embed facebook feed on website step 2

On the next screen, you will need to choose whether you want to embed your own page feed or you want to embed the posts publish by Facebook users who mentioned your page.

For this example, we will choose the Facebook page posts, so in the ‘Source type’ screen just choose the ‘Facebook Page Posts’ option. An input field will appear where you will need to paste or type your Facebook page URL.

embed facebook page posts

Once you are done just click ‘Next’.

Please wait, for the system to generate the feed, and on the last step you will only need to click ‘Create Feed’.

create feed step 4

Congratulations! You’ve just imported an entire Facebook Page feed in your account. So let’s get the code and embed it on your website. Follow the next step.

2. Get the embeddable code and paste it into your website HTML

Once you open your Facebook feed in an edit mode, you will find the feed’s embeddable code in the top right section. Below is an example and you can see the exact position of the code, highlighted with a red circle.

Embed Facebook Feed Plugin

Once you get your code, choose the position on your website where you want to embed it and just paste this code.

The feed will be immediately displayed on your website.

3. Customize your Facebook Feed

The Embed Facebook Feed plugin – EmbedFeed has few customization features and settings that can help you to style your feed according to your needs.

Use the following settings:

  • Moderation – handpick which posts to appear in your feed. Also, choose the option to auto-add new posts every-time you post on Facebook, that will sync in real-time with your website
  • Add Buy buttons – choose the ‘Call to Action’ option and add buttons on the posts so your web visitors can immediately buy the product or learn more about the post in the feed.
  • Number of posts in feed – limit the number of posts that you want the feed to display
  • Custom CSS – option to fully customize the entire look of the feed by submitting a custom CSS classes with your own styles
  • Post width – you can choose the posts to show in a larger or smaller width
  • Mobile responsive – Post width for phones and tablet, choose different post size for smaller devices
  • Include full post – this option will enable or disable the caption for photo posts
  • No coding required
  • Edit title text, change title color and size
Facebook feed settings

Once you change the feed settings, just click “Save”.

If you don’t have the time to read all the above, here is a video:

Bonus: Embed Facebook Feed to any CMS: WordPress, Wix, Drupal, Joomla and more

Last, but certainly not least, you might want to add more than one feed. This option is currently available to all users, so YES, you can get UNLIMITED feeds and embed them on any website.

The best thing is that the code works for every major CMS, Drupal, WordPress, Joomla, Wix, Squarespace, PageCloud, and more.

Facebook feed plugin wordpress wix joomla drupal

And do you know what’s the best part? You won’t need to install anything!

Just copy and paste the script code in the CMS editor.

{Side note: For WordPress, you can install our official WordPress Facebook Feed plugin and use a shortcode if you prefer.}

Get started with the Facebook Feed Plugin?

Generating, updating and displaying feeds on your website takes lots of resources. To help, we’ve developed EmbedFeed a full-featured social media aggregator tool that will make your life much easier.

Now you’ve learned that you can display your Facebook feeds on any website in seconds.

Comments

Post a Comment

Popular posts from this blog

How to use Django Bootstrap Modal Forms

Image
Installation Install  django-bootstrap-modal-forms : $ pip install django-bootstrap-modal-forms Add  bootstrap_modal_forms  to your INSTALLED_APPS in settings.py: INSTALLED_APPS = [ ... 'bootstrap_modal_forms', ... ] Include Bootstrap, jQuery and  jquery.bootstrap.modal.forms.js  on every page where you would like to set up the AJAX driven Django forms in Bootstrap modal. IMPORTANT: Adjust Bootstrap and jQuery file paths to match yours, but include  jquery.bootstrap.modal.forms.js  exactly as in code bellow. < head > < link rel = " stylesheet " href = " {% static 'assets/css/bootstrap.css' %} " > </ head > < body > < script src = " {% static 'assets/js/bootstrap.js' %} " ></ script > < script src = " {% static 'assets/js/jquery.js' %} " ></ script > < script src = " {% static 'js/jquery.bootstrap.mo
Read more

Everything you need to know when developing an on demand service app

Image
On Demand Services App Remember Richie Rich, the animated show that we used to watch? It had an Robot maid named Irona. We all wished we had someone like her who could complete all our household chores in seconds. Well, that dream still seems to be far from us for at least a century; however, there is a substitute to it which is as effective as Irona.  on-demand apps  for Home Services is that substitute. We all know how on-demand apps have disrupted majority of traditional industries. From the way we travel, eat, shop, and even date, all has undergone a tremendous change. So, why not our household chores and errands? After all we all need an Irona in our lives who can complete our household chores and run our errands in a jiffy. Before we understand the nitty gritty of  on-demand home services apps , let us start from the basic at what exact services that it provides. As the name suggests it serves as a platform where you can hire professionals for all your household ch
Read more

Documentation is Very vital before you develop any system or app

Image
Technical documentation in software engineering is the umbrella term that encompasses all written documents and materials dealing with software product development. All software development products, whether created by a small team or a large corporation, require some related documentation. And different types of documents are created through the whole  software development lifecycle  (SDLC). Documentation exists to explain product functionality, unify project-related information, and allow for discussing all significant questions arising between stakeholders and developers. Project documentation by stages and purpose On top of that, documentation errors can set gaps between the visions of stakeholders and engineers and, as a result, a proposed solution won’t meet stakeholders expectations. Consequently, managers should pay a lot of attention to documentation quality. Agile and waterfall approaches The documentation types that the team produces and its scope depending on the s
Read more