How to Embed a Facebook Video in WordPress: A Step-by-Step Guide

Home » Snippets » How to Embed a Facebook Video in WordPress: A Step-by-Step Guide
0

Created with:

Visibility: 

public

Creator: WPTurbo Team

Customize with WPTurbo AI
X

Add Snippet To Project

New Project
Add To Existing Project

In this day and age, multimedia content is everything on the internet. One of the most engaging forms of multimedia that website owners use frequently is video. If you’re managing a WordPress site, you’re in luck because WordPress has made it incredibly easy to embed videos from various platforms – including Facebook. In this article, we’ll show you how to embed a Facebook video in WordPress, and take you through the process step-by-step.

					function wpturbo_embed_facebook_video( $content ) {
    global $post;
    if ( has_shortcode( $post->post_content, 'facebook_video' ) ) {
        // Replace [facebook_video] with Facebook video embed code
        $content = str_replace( '[facebook_video]', '<div class="fb-video"><iframe src="https://www.facebook.com/video.php?v=VIDEO_ID"></iframe></div>', $content );
    }
    return $content;
}
add_filter( 'the_content', 'wpturbo_embed_facebook_video' );
``` 

This code replaces the `[facebook_video]` shortcode in the post content with the Facebook video embed code. To use it, simply replace `VIDEO_ID` with the actual ID of your Facebook video.
				

The code snippet presented above shows how to embed a Facebook video in WordPress using a shortcode. With this code, you can easily replace a shortcode, [facebook_video], with the Facebook video embed code, and display your video on your WordPress website.

At first, we declare the function wpturbo_embed_facebook_video(). This function uses a conditional statement to check if the post content has the [facebook_video] shortcode. If yes, it replaces it with the Facebook video embed code.

if ( has_shortcode( $post->post_content, 'facebook_video' ) ) {
    // Replace [facebook_video] with Facebook video embed code
    $content = str_replace( '[facebook_video]', '<div class="fb-video"><iframe src="https://www.facebook.com/video.php?v=VIDEO_ID"></iframe></div>', $content );
}

After that, we replace a shortcode with an iframe HTML element. The iframe element defines the Facebook video URL as a source. The fb-video class is responsible for styling the container in which the video will be displayed.

Let’s see how the above code works. Suppose we have a post containing the [facebook_video] shortcode, which looks like this:

Here is a video from Facebook: [facebook_video]

Upon adding the code snippet to our WordPress website, the shortcode will be replaced with the Facebook video embed code. The above code will now look like this:

Here is a video from Facebook:
<div class="fb-video"><iframe src="https://www.facebook.com/video.php?v=VIDEO_ID"></iframe></div>

Replace VIDEO_ID with the actual ID of your Facebook video before using the code above.

Finally, the add_filter() hook is used to pass the post content through the wpturbo_embed_facebook_video() function. This ensures that whenever the post content is rendered, the shortcode is replaced with the Facebook video embed code.

Register an account to save your snippets or go Pro to get more features.