How to Build a WordPress Plugin for Facebook Open Graph

Published by AASIM SHAIKH on September 14, 2024

1. What is Facebook Open Graph?

Facebook Open Graph allows web pages to become rich objects in a social graph, enhancing the way your links are displayed when shared on Facebook. Open Graph tags can control the title, description, image, and other aspects of the link preview.

Example Open Graph Meta Tags:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description of your page." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page-url" />

2. Why Use Open Graph Meta Tags?

When you share a page on Facebook, Open Graph tags:

Ensure the correct image, title, and description are shown.
Improve the click-through rate (CTR) of shared links.
Allow more control over how your content is presented.

3. Prerequisites

Before diving into the plugin development, ensure you have:

Basic knowledge of WordPress development.
Access to a WordPress installation for testing.
Familiarity with PHP, HTML, and the WordPress Plugin API.

4. Step 1: Setting Up Your WordPress Plugin

First, let’s set up the basic structure for the plugin.

Create the Plugin Directory:

Navigate to the /wp-content/plugins/ directory of your WordPress installation and create a new folder named fb-open-graph-meta.

/wp-content/plugins/fb-open-graph-meta/

Create the Main Plugin File:

Inside the fb-open-graph-meta folder, create a PHP file named fb-open-graph-meta.php.

touch wp-content/plugins/fb-open-graph-meta/fb-open-graph-meta.php

Add the Plugin Header:

Open the fb-open-graph-meta.php file and add the following header information to make WordPress recognize it as a plugin:

<?php
/*
Plugin Name: Facebook Open Graph Meta
Description: A simple plugin to add Facebook Open Graph meta tags to your WordPress website.
Version: 1.0
Author: Your Name
*/

5. Step 2: Adding Open Graph Meta Tags to Your Plugin

Now, let’s write the code to add Open Graph meta tags to your site’s <head> section. We will hook into WordPress’s wp_head action to insert these tags.

Add the Function to Generate Open Graph Tags:

In your fb-open-graph-meta.php file, add the following function:

function fb_add_open_graph_tags() {
    if (is_single()) {
        global $post;
        $post_url = get_permalink($post->ID);
        $post_title = get_the_title($post->ID);
        $post_description = wp_trim_words(get_the_excerpt($post->ID), 30);
        $post_image = get_the_post_thumbnail_url($post->ID, 'full') ?: 'https://example.com/default-image.jpg';

        echo '<meta property="og:title" content="' . esc_attr($post_title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($post_description) . '" />' . "\n";
        echo '<meta property="og:image" content="' . esc_url($post_image) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url($post_url) . '" />' . "\n";
        echo '<meta property="og:type" content="article" />' . "\n";
    }
}

This function does the following:

Checks if the current page is a single post using is_single().
Retrieves the post’s title, description (excerpt), and URL.
If no featured image is set, a default image is used.
Outputs the Open Graph meta tags in the <head> section.

Hook the Function into the wp_head Action:

To ensure the Open Graph tags are added to the header of your page, hook the function into WordPress’s wp_head action.

add_action('wp_head', 'fb_add_open_graph_tags');

6. Step 3: Customizing Open Graph Meta Tags

While the above code is functional, you might want to make it more customizable by allowing users to add custom Open Graph metadata via the WordPress editor.

Create Meta Boxes for Custom Open Graph Tags:

In your plugin file, create a function to add a meta box in the post editor for Open Graph fields like title, description, and image.

function fb_add_custom_meta_box() {
    add_meta_box(
        'fb_open_graph_meta',
        'Facebook Open Graph',
        'fb_render_meta_box',
        'post',
        'side',
        'high'
    );
}
add_action('add_meta_boxes', 'fb_add_custom_meta_box');

Render the Meta Box:

Now, create the function to render input fields in the meta box for the custom Open Graph title, description, and image URL.

function fb_render_meta_box($post) {
    $og_title = get_post_meta($post->ID, '_fb_og_title', true);
    $og_description = get_post_meta($post->ID, '_fb_og_description', true);
    $og_image = get_post_meta($post->ID, '_fb_og_image', true);

    echo '<label for="fb_og_title">OG Title:</label>';
    echo '<input type="text" id="fb_og_title" name="fb_og_title" value="' . esc_attr($og_title) . '" style="width:100%"><br><br>';

    echo '<label for="fb_og_description">OG Description:</label>';
    echo '<textarea id="fb_og_description" name="fb_og_description" rows="3" style="width:100%">' . esc_textarea($og_description) . '</textarea><br><br>';

    echo '<label for="fb_og_image">OG Image URL:</label>';
    echo '<input type="text" id="fb_og_image" name="fb_og_image" value="' . esc_url($og_image) . '" style="width:100%">';
}

7. Step 4: Testing Your Plugin

Install and Activate the Plugin:
Upload your fb-open-graph-meta folder to the /wp-content/plugins/ directory.
Go to the WordPress admin dashboard and navigate to Plugins > Installed Plugins.
Activate your plugin.
Test the Meta Tags:
Create or edit a post.
Fill out the Open Graph meta fields in the new meta box.
Use the Facebook Sharing Debugger to inspect how your page is displayed.