Add a “Share on Facebook” Button in WordPress Posts

If you want a manual function in WordPress that allows you to share posts on your Facebook Page with a button, you can achieve this using a custom function in your theme’s functions.php file. Here’s how:

Why Add a Facebook Share Button?

Adding a “Share on Facebook” button to your WordPress posts allows visitors to easily share your content with their audience, increasing engagement and traffic to your website.

Method 1: Using a Plugin (Easy Way)

If you want a quick solution without coding, you can use a plugin like AddToAny Share Buttons or Shared Counts.

Steps to Install a Plugin:

1. Log in to your WordPress dashboard.
2. Go to Plugins > Add New.
3. Search for AddToAny Share Buttons or Shared Counts.
4. Click Install Now and then Activate.
5. Go to Settings > AddToAny and configure the button display.
6. Save changes, and the share button will appear on your posts.

Method 2: (recommended): clean markup + CSS class + only on posts

If you prefer a manual approach, you can add a custom Facebook Share button using a simple code snippet.

Steps to Add the Code:

1. Open your WordPress functions.php file (or use a custom plugin for better management).
2. Add the following function:

<?php
// functions.php

/**
 * Append a Facebook share button to post content on single posts.
 */
function custom_facebook_share_button(string $content): string {
    if ( ! is_singular('post') || ! in_the_loop() || ! is_main_query() ) {
        return $content;
    }

    $post_url     = get_permalink();
    $fb_share_url = add_query_arg(
        'u',
        rawurlencode($post_url),
        'https://www.facebook.com/sharer/sharer.php'
    );

    $button_html  = '<div class="cc-fb-share">';
    $button_html .= sprintf(
        '<a class="cc-fb-share__link" href="%s" target="_blank" rel="noopener noreferrer">%s</a>',
        esc_url($fb_share_url),
        esc_html__('Share on Facebook', 'textdomain')
    );
    $button_html .= '</div>';

    return $content . $button_html;
}
add_filter('the_content', 'custom_facebook_share_button');

/**
 * Enqueue minimal CSS for the button.
 */
function cc_fb_share_styles(): void {
    if ( ! is_singular('post') ) {
        return;
    }

    $css = <<<CSS
.cc-fb-share{margin-top:20px}
.cc-fb-share__link{
  display:inline-block;
  background:#1877F2;
  color:#fff;
  padding:10px 15px;
  text-decoration:none;
  border-radius:5px;
  font-weight:700;
}
.cc-fb-share__link:hover{filter:brightness(0.95)}
CSS;

    wp_register_style('cc-fb-share', false);
    wp_enqueue_style('cc-fb-share');
    wp_add_inline_style('cc-fb-share', $css);
}
add_action('wp_enqueue_scripts', 'cc_fb_share_styles');

What This Code Does:

• It checks if the post is a single post (not homepage or archive).
• It generates a Facebook Share URL for the post.
• It appends a styled button at the end of the post.

Method 3: Using a Shortcode (More Flexibility)

If you want to place the button anywhere in your post, you can use a shortcode.

Add this code to functions.php:

<?php
// functions.php

function facebook_share_shortcode($atts = []): string {
    $atts = shortcode_atts(['url' => ''], $atts, 'facebook_share');

    $url = trim((string) $atts['url']);
    if ($url === '') {
        $url = get_permalink(get_queried_object_id());
    }
    if (!$url) {
        return '';
    }

    $fb_share_url = 'https://www.facebook.com/sharer/sharer.php?u=' . rawurlencode($url);

    return '<a href="' . esc_url($fb_share_url) . '" target="_blank" rel="noopener noreferrer" style="background:#1877F2; color:#fff; padding:10px 15px; text-decoration:none; border-radius:5px; font-weight:bold;">📢 Share on Facebook</a>';
}
add_shortcode('facebook_share', 'facebook_share_shortcode');

How to Use the Shortcode:

Simply insert [facebook_share] anywhere in your post where you want the button to appear.

Method 4: Adding a Manual Share Button in Admin Dashboard

If you want a button inside the WordPress admin panel to manually share a post, you can add this to the post edit screen.

Steps:

1. Add the following function to functions.php:

function add_facebook_share_meta_box() {
    add_meta_box('facebook_share', 'Manual Facebook Share', 'facebook_share_meta_box_callback', 'post', 'side', 'high');
}
add_action('add_meta_boxes', 'add_facebook_share_meta_box');

function facebook_share_meta_box_callback($post) {
    $post_url = get_permalink($post->ID);
    $fb_share_url = "https://www.facebook.com/sharer/sharer.php?u=" . urlencode($post_url);
    echo '<a href="' . esc_url($fb_share_url) . '" target="_blank" class="button button-primary">📢 Share on Facebook</a>';
}

What This Does:

• Adds a “Manual Facebook Share” button inside the WordPress post editor.
• Clicking it opens Facebook’s share window for the current post.
• You can customize the caption before posting.

Final Thoughts

This is a manual function that allows you to share posts on Facebook with a simple button:

• Frontend Button: Adds a button below each post for visitors.
• Admin Dashboard Button: Lets admins share posts directly from WordPress.

Conclusion

Adding a Facebook Share button to WordPress posts helps increase visibility and engagement. Whether you use a plugin, custom code, or shortcode, you now have multiple options to make sharing easy for your audience.
Would you like additional features, such as tracking shares or adding other social platforms? 🚀
Let me know if you need any modifications or enhancements! 🚀