Add a Like button to your WordPress posts that links directly to the post’s permalink

To add a “Like” button to your WordPress posts that links directly to the post’s permalink on Facebook, you can embed Facebook’s Like Button code in your WordPress theme or use a plugin for more flexibility.

Option 1: Manual Code Addition

Generate the Facebook Like Button Code

Go to the Facebook Like Button Generator.

Enter the URL as https://yourdomain.com/your-post-url. For dynamic posts in WordPress, this will be replaced with the post permalink.

Configure the options (layout, width, etc.).

Copy the generated HTML code.

Add the Code to Your Theme Edit your theme’s single.php or wherever you want the Like button to appear.

<?php
// Get the post permalink dynamically
$post_url = get_permalink();
?>

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0"></script>

<div class="fb-like" 
     data-href="<?php echo esc_url($post_url); ?>" 
     data-width="" 
     data-layout="button_count" 
     data-action="like" 
     data-size="small" 
     data-share="true">
</div>

Save and Test

Save the file and open a post on your WordPress site.

You should see the Like button.

Option 2: Use a Plugin

If you want a more user-friendly solution:

1. Install a plugin like AddToAny Share Buttons or Social Media Share Buttons.
2. Configure the plugin to include a Facebook Like button on your posts.
3. The plugin will automatically handle the dynamic URL and placement.

Option 3: Use a Shortcode

To make it reusable, you can create a shortcode for the Like button. Add the following code to your theme’s functions.php:

function facebook_like_button_shortcode() {
    $post_url = get_permalink();
    return '
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0"></script>
    <div class="fb-like" 
         data-href="' . esc_url($post_url) . '" 
         data-width="" 
         data-layout="button_count" 
         data-action="like" 
         data-size="small" 
         data-share="true">
    </div>';
}
add_shortcode('facebook_like', 'facebook_like_button_shortcode');

To use the shortcode, add [facebook_like] to any post or page.

Customization Options

• Button Layouts: Change the data-layout attribute to standard, box_count, or button_count.
• Include Share Button: Set data-share="true" to include a share option.
• Styling: Use CSS to adjust the appearance of the Like button container.

Would you like help customizing this further or debugging integration issues?