With Flockler, you can show Facebook Page posts and user-generated content like Page mentions and recommendations in a beautiful Facebook widget. Also, you can combine Facebook posts with auto-updating feeds from Instagram, TikTok, Twitter, and more, and create fully custom branded widgets for any website.
The Facebook Page plugin is a great option if you only want to show your Facebook timeline on a website sidebar and if you aren’t keen to show multiple social channels in one place. With Facebook’s plugin, you won’t be able to customize the look & feel and the widget width and height are fixed, but it will definitely do the trick for your WordPress blog. Not only that, Facebook widgets for WordPress often make the Page plugin installation easier.
But if you are running a business, you are most likely looking for these Facebook widget features:
- Seamless integration into your website and responsive design (no fixed width and height)
- Multiple Facebook feed layout options and custom brand look & feel
- Combine multiple Facebook Pages and UGC from happy customers in one widget
- Show Facebook Page feeds with Instagram, TikTok, Twitter and other channels in one place
- Categorize content sources for different websites and marketing campaigns
- Advanced UGC moderation tools
- Non-technical setup and live support for your colleagues.
None of those features are available with the standard Facebook embed and they are some of the key reasons why brands embed Facebook Page feeds using tools like Flockler instead. Next, I’ll show you how easy creating a custom Facebook widget for your business is.
Facebook widget for any website
Here’s a three-step guide on how to embed a Facebook widget on any website:
- Add Facebook Page feeds (and other social media channels)
- Choose the Facebook widget layout
- Embed a Facebook widget on any website
1. Add Facebook Page feeds (and other social media channels)
If you don’t have a Flockler account yet, sign up for a 14-day free trial. You get free access to all features, and there’s no credit card needed when signing up.
Then, create your first live social feed. Our bot suggests the most common channels – get started with Facebook.
Facebook will ask you to connect your personal account. This connection avoids you having to fiddle around with the Facebook Page API and makes the installation easy for any non-technical users in your organisation. The connected account can be any personal account managing at least one Facebook Company Page. Note that the managed Page does not need to be the same as the one you want to show on the widget! Flockler won’t show anything from your personal account.
Now, choose if you’d like to show content from the Page you manage or any other Page.
If you select the page you manage, you can also show Page mentions and recommendations. If you are looking to embed just the Page timeline, you can choose 'Another page'.
Here, you can add the URL of the Page to the field to make it easier to find the right one.
Then, choose if you’d like to moderate content before showing anything on your website or if you'd rather let posts show automatically. Most Facebook widgets automatically update with new posts.
That’s it – you’ve created a Facebook feed that updates fresh content every 15 minutes! š
With Flockler, you can combine multiple content sources in one place. For example, you might also like to collect Facebook reviews and recommendations from your customers or show Instagram feeds with your Facebook Page content. To add more content sources, navigate to the 'Automated Feeds' tab and click the 'Create a new feed' button. For more inspiration, check the supported social media feeds and sources that your team can put together.
If your organisation has multiple brands, or you organise seasonal hashtag campaigns over the year, you might want to show that content separately. Flockler’s sections allow you to categorise auto-updating content sources and create unique widgets for any website and digital service.
2. Choose the Facebook widget layout
Now that you have a Facebook feed updating with fresh content, it’s time to choose the Facebook widget layout.
Navigate to the 'Display' tab, where you can create unlimited widgets. Choose from four layouts: Wall, Grid, Carousel, and Slideshow.
The Facebook widget fits any website and screen size without additional work and typically picks the font from your website. To further customize the look & feel, click the 'Edit style and settings' link.
You can, for example, hide elements and choose brand colours. If you need any advanced changes, you can add custom CSS. Also, don’t hesitate to ask Flockler developers for help with any styling questions and issues.
With Flockler, brands create unlimited widgets with a custom design. On Flockler’s 'Display' tab, click the 'Create a new layout' button to get a new embed code for another website, app, or digital screen. Your subscription doesn’t limit the number of services where the widget is displayed.
3. Embed a Facebook widget on any website
The final step is to embed your Facebook widget html on any website. After creating the layout in step 2, you will get an embed code that you can add to any website or digital service.
Below, you will find step-by-step instructions on how to embed the Facebook feed widget on Squarespace, Wix, Webflow, WordPress and Elementor, Shopify, Drupal, and Joomla.
Facebook widget examples
Now that you’ve seen how easy it is to gather Facebook feeds and show them on any website, I’m sure you’d love to see some live Facebook widget examples.
I’ve picked out a few of my favourites below.
Facebook wall widget for New Zealand Black Caps
New Zealand Black Caps is one of the many organisations with a custom designed Facebook widget. They use the purple brand colour on the wall layout and combine social media feeds from Facebook, Twitter, and Instagram on the homepage.
Facebook grid widget for Hapag-Lloyd Cruises
Most hospitality and travel businesses show their social feeds front and centre on the homepage, and Hapag-Lloyd Cruises makes no exception. The social grid combines Facebook and Instagram feeds from the brand account and user-generated content campaigns from happy customers.
Facebook carousel widget for Da Vinci Engineering
Facebook widgets work well for B2B companies as well. Da Vinci Engineering is one of the many businesses that shows a Facebook carousel widget on the homepage. The carousel combines posts from Facebook, Instagram, and LinkedIn – it gives the website visitor direct access to the latest news and shows the people behind the brand as well.
Facebook slideshow widget for FIFA Museum
If you have a brick-and-mortar shop, tourism attraction, or office space, a social media feed for digital displays is a great way to make sure the latest news and campaigns are always visible to visitors. FIFA museum is one of the many public venues where a slideshow shows the latest posts from Facebook and Instagram. And to add to digital screens, the slideshow can be embedded as a single post slider on any website.
Embedding a Facebook widget on most popular website builders
Below you’ll find step-by-step instructions on how to embed a Facebook widget on:
If you are using any other website builder and need help with the installation, don’t hesitate to send us a message via website’s live chat.
How to embed a Facebook feed widget on Squarespace
Note: you’ll need a Business plan for Squarespace to add any third-party widget.
Click to ‘Edit’ the page where you’d like to add the Facebook widget.
Next, go ahead and add an element to the page in the visual editor.
Click the + icon, and a set of options should open. Here, search and choose the ‘Code’ block.
In the ‘Code’ block, check that you’ve got ‘HTML’ selected from the dropdown and that you have NOT selected ‘Display source’. Next, copy and paste Flockler’s Facebook widget code to the field from the 'Display tab. Then, click ‘Apply’.
Here you’ll notice the element saying ‘Script Disabled’. Don’t worry; that’s standard behaviour on Squarespace.
Save changes and publish the changes to your site – the Facebook feed widget shows up on your Squarespace site!
How to embed a Facebook widget on Wix
Below you’ll find instructions for both the Classic and ADI editors.
Add a Facebook widget to the (classic) Wix Editor
- Click the + button on the left, choose 'Embed' and then 'Embed a widget' from the available options.
- Resize the element and click the 'Enter code' button.
- Navigate to Flockler’s ‘Display’ tab and copy and paste the Facebook widget’s code to Wix’s code editor.
- Click the ‘Update’ button, and your Facebook widget appears on the page preview.
- Click 'Publish', and the Facebook widget shows up on the live Wix page!
Add a Facebook widget to the Wix ADI editor
- Open the editor, click + icon on the page, and select the position where you’d like to display the Facebook widget.
- Select ‘HTML Embed’ and one of the ready templates.
- Click ‘Settings’ next to HTML.
- Make sure you select ‘Website’ from the two embed types and add the
‘Preview’ URL of Flockler to the editor. You can find the ‘Preview’ URL
from Flockler’s Display tab. Note that you can also change the width
and height available for the Flockler layout.
- That’s it. Click 'Publish', and the Facebook widget appears on the Wix page!
How to embed a Facebook widget on Webflow
Note: You’ll need a paid Webflow plan to add any third-party widget.
In Webflow’s page editor, select an area where you’d like the Facebook feed to display. Then click the + icon, scroll down to the 'Components' part, and select the ‘Embed’ button.
After selecting the ‘Embed’ component, another editor opens up. Add the FB widget embed code from Flockler’s Display tab to the editor and save changes.
Then publish the changes to your site, and the Facebook feed widget shows up on your Webflow page!
How to embed a Facebook widget on WordPress and Elementor
For WordPress, we recommend downloading Flockler’s WordPress plugin. Then follow the steps introduced in this article, but instead of the Facebook widget html, you can click the 'WordPress' button on Flockler’s Display tab.
Below, you will find step-by-step tutorials for the Elementor, Gutenberg, and the Classic editor.
Add a Facebook widget to the Elementor page
- Add a new page on WordPress or edit an existing one.
- Click on Edit with the Elementor button.
- From the left, search for the HTML widget.
- Drag and drop the HTML widget into your page where you’d like the Facebook widget to show up.
- A new set of editing tools on the left opens up.
- Copy and paste the Flockler plugin shortcode directly into the HTML Code field.
- Update/Publish the Page.
- All sorted! You’ve now added an elegant Facebook widget to WordPress
Add a Facebook widget to the Gutenberg (Block) editor
- Open the Post or Page in the WordPress admin where you’d like to embed a Facebook widget
- Select “(+) Add Block” in the top left corner of the WordPress editing tools.
- Next, search for the Custom HTML element and add it to your Page.
- Copy and paste a shortcode from Flockler’s Display tab to the element.
- Update/Publish changes to the WordPress Post/Page.
- That’s it. The beautiful Facebook feed widget shows up on the page!
Add a Facebook widget to the WordPress Classic editor
- Open the Post or Page in the WordPress admin where you want to add a Facebook widget.
- In the WordPress content editor, you’ll find options to use a Visual or Text mode. Choose the Text mode.
- Copy and paste the shortcode from Flockler’s Display tab to where you would like to display the Facebook feed on WordPress.
- Update/Publish changes to the WordPress Post/Page.
- All done! The Facebook widget shows up on your WordPress page.
How to embed a Facebook widget on Shopify
You can add a Facebook feed to the Shopify homepage, product and collection pages, or any individual page. Here are the various options in more detail.
Add a Facebook widget to the Shopify homepage
- To embed a Facebook widget on Shopify’s homepage, you need to edit
the theme layout. Go to Themes, click ‘Actions’ and select ‘Edit code’.
- Go to 'Sections' and click 'Add a new section'.
- Give it a name (e.g., flockler), and an editor opens up.
- In the editor, replace the Section name with "flockler".
- Also, replace all after 'endschema' with Flockler’s embed code that you can find from Flockler’s Display tab. Save changes.
- Next, scroll up the list to 'Templates', and click 'index.json'.
- An editor opens, and you need to add the following section at the top:
"flockler": { "type": "flockler" }, - Scroll down the code editor, and you’ll find the order of homepage
elements. Choose the right spot for Flockler and add it to the list.
- Finally, save changes, and the Facebook widget appears on the Shopify homepage!
Add a Facebook widget to all products and collection pages
You can follow the steps above if you’d like the Flockler embed code to show on all collections and product pages. Only now, edit either 'collection.json' or 'product.json' to define the layouts of your Shopify product pages or collections.
Add a Facebook widget to any individual Shopify page
Sometimes you’d like to add a Facebook widget to an individual page. For example, you might want to have a unique feed visible on a product page.
One option is to embed Flockler directly into the page content. From the text editor, click the ‘HTML button’.
Then add Flockler anywhere in the text.
Publish changes, and the Facebook widget shows up on a Shopify page.
How to embed a Facebook widget on Drupal
Here we’ll show you two options:
- Add a Facebook widget to any Drupal article and page
- Add a Facebook widget to your Drupal homepage using the block element
1. Add a Facebook widget to any Drupal article and page
Navigate to the 'Content' section on Drupal and create a new article/page or edit one of the existing pages.
In the article editor, select the 'Full HTML' option from the dropdown, click the 'Source' button in the toolbar, and paste the widget’s embed code to the body field.
Save changes, and the Facebook feed widget appears on a Drupal page.
2. Add a Facebook widget to your Drupal homepage using the block element
If you’ve been editing Drupal pages before, you are probably familiar with the concept of blocks. You can add block elements to any Drupal page.
Open Drupal’s site management, select Structure > Block layouts and click the 'Custom block library' tab. Next, click the '+ Add custom block' button.
In the editor, give the block a name (e.g., Flockler widget). Make sure to select the 'Full HTML' option from the dropdown. Then click 'Source' in the toolbar and paste Flockler’s embed code to the Body field. Click to save changes.
After that, navigate to the 'Block layout' view in Drupal and select where you’d like to add Flockler. For example, you could add it to the Content area. Then, click 'Place block'.
Then select the block ('Flockler widget') you created earlier.
In the editor, you can select if the block's title is visible on your page and if there are any restrictions. For example, you could decide to restrict this element to show on a specific page.
After configuring your custom block, scroll down the page and click 'Save blocks' to save your changes.
That’s it! The Facebook widget now shows up in Drupal!
How to embed a Facebook widget on Joomla
Here, we will show you two different methods:
- Add a Facebook widget to all Joomla pages
- Add a Facebook widget to a single Joomla page
1. Add a Facebook widget to all Joomla pages
Joomla website developers can use Modules to display widgets on all pages. For example, you might want to display Facebook posts above the footer on every page.
In the Joomla management, click 'Extensions' and select 'Modules'.
Then click the 'New' button.
From the list, select 'Custom'.
Then click the 'Code' button in the toolbar.
A window opens. Copy and paste the Instagram feed embed code from Flockler to the field and click 'Insert'.
Give a title for the Module and select the position from the right. Here you might need your website developer's help to ensure the Module shows up on all pages and that the selected position is not in use for another purpose.
Finally, click 'Save & Close', and the Facebook feed is embedded on your Joomla website.
2. Add a Facebook widget to a single Joomla page
In the Joomla management, click 'Content', select 'Articles', and then click 'Add New Article'.
Add a title for your post in the article editor, and then click the 'Code' button in the toolbar.
A window opens with a field for the embed code. Go to Flockler’s Display tab and copy and paste the Facebook feed embed code into the field. Then click 'Insert'.
Then click 'Save & Close'. If you like, you can add the page to the site menu from Joomla’s menu editing tools.
And finally, a Facebook widget shows up on the Joomla page!
No comments:
Post a Comment