Description:
Learn how to embed easily on your website a Facebook page using simple HTML and JavaScript. You will learn how to include the timeline, how to set dimensions for all widgets adjustments, even customize the entire widget according to your preferences.
Blog Content:
Today, in a digital world, linking a company’s website to social media helps boost engagement and connect with people in a real-time. Facebook provides an easy way to add your business page to your website by sharing the freshest posts using its “Page Plugin.” This article walks you through the addition of a Facebook page on your website.
Step 1: Get Facebook Page URL Make sure you have the correct URL for the Facebook page you want to embed. Here, we will embed from the page’s URL https://www.facebook.com/codingindialab/.
Step 2: Adding Embed Code into Website Copy the following code and add it in your web page HTML where you’ll like your Facebook timeline to be visible:
<div class="fb-page"
data-href="https://www.facebook.com/codingindialab"
data-tabs="timeline"
data-width="340"
data-height="500"
data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="true">
</div>
<script async src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0"></script>
Explanation
data-href: This is where you provide the URL of the Facebook page to embed.
data-tabs=”timeline”: This shows the timeline (latest posts) of the Facebook page. You can add tabs such as “events” or “messages” depending on what you’d like to display.
data-width/data-height: You can also size the widget. In this case, the width is set at 340px, and the height at 500px.
data-small-header=”false”: This refers to whether to show small header or not. To make it look compact set it to true.
data-hide-cover=”false”: This parameter indicates whether to show or hide the cover photo of the page.
data-show-facepile=”true”: It shows the picture of those people’s profile who have liked the page.
Step 3. Customise Look Use width and height property in fitting in your design. If you change the width into 500px, you can see an example of a wider widget.
Step 4: Add JavaScript SDK Add the script tag to load the Facebook SDK asynchronously. This won’t have any impact on the speed of your site, loads correctly as a robust embedded page.
How to Add a Facebook Page to Your Website Without Plugins?
Adding your Facebook page directly to your website has never been easier without third-party plugins. The Facebook Page Plugin makes it easy and ensures that visitors to your site will be able to interact directly with your Facebook content on your site.
You’ll be able to place your Facebook timeline on your site without even using sophisticated tools or paid service. All you’ll require is a provided Facebook page embedding code generator and configuration process. That’s the modification of width, height, and much more features such as “Hide Cover Photo” or “Show who likes your page.”
Embed Facebook Feed on Website HTML
Adding a Facebook feed to your site through HTML is very simple. One just needs to copy the embed code for the page and paste it into the place where they’d want the feed to appear. Facebook’s Page Plugin allows you to customize the look of your feed, too. For example, if you just would like to change the size of your feed, you can just update the data-width and data-height attributes in the code.
How to Embed Facebook Page in WordPress?
For users of WordPress, there’s nothing more special than the fact that embedding your Facebook feed doesn’t require you to install additional plugins. You can simply just paste the Facebook embed iframe code in your page or post using the HTML editor directly. It’s a pretty simple case of generating the code using Facebook’s Page Plugin, and once you have obtained it, insert it into your WordPress site to showcase your timeline.
If you want something more lively for adding Facebook feed in WordPress, you might as well also check out W3Schools for the basic guide on HTML.
Video Player Embed Code Generator Facebook
If you want to add the feed from Facebook along with videos from Facebook, the FB embed code generator video player helps. This generator produces personal codes that allow one to show a specific video from your page, thus ensuring it remains there directly on your website for the users.
Facebook Embed Iframe Code
Advanced users can use the Facebook embed iframe method. This provides greater control over how the content is displayed and gives them the power to embed a portion of a Facebook page or video player onto their site.
You can easily embed your Facebook page, feed, or video player on static HTML or dynamic WordPress websites by using the above methods. It makes user engagement good and does not lose visibility of social content across different platforms while integrating with an iframe either using the code generator from Facebook or manually embedding.
Final Thoughts:
Displaying your Facebook page on your website is a fantastic way to demonstrate your social media presence and keep visitors up to date with all the real-time posts. Whether your online presence is that of a business, blogger, or nonprofit, this easy integration will surely improve interactivity and engagement on your site.