Sharing content on social media is a crucial feature in modern web applications, enabling users to easily distribute information across platforms. Laravel 11 offers a seamless way to integrate social media sharing, whether through third-party packages or custom-built solutions.

In this guide, we'll walk you through implementing social media sharing functionality in your Laravel 11 application, ensuring a smooth and efficient user experience.

Step 1: Install Laravel 11

Ensure that you have Laravel 11 installed in your project. If you haven’t installed Laravel yet, use the following command:

composer create-project --prefer-dist laravel/laravel social-media-share

Navigate to your project directory:

cd social-media-share

Step 2: Install and Configure the Share Buttons Package

To integrate social media sharing in your Laravel 11 application, you can use the kudashevs/laravel-share-buttons package. This package simplifies adding share buttons for various platforms like Facebook, Twitter, LinkedIn, and more.

1. Install the Package

Run the following command to install the package via Composer:

composer require kudashevs/laravel-share-buttons

2. Register the Service Provider (If Needed)

Laravel 11 supports package auto-discovery, so this step is usually not required. However, if you're using an older Laravel version or have disabled auto-discovery, you need to manually register the service provider.

Open config/app.php and add the following line under the providers array:

'providers' => [
    Kudashevs\ShareButtons\Providers\ShareButtonsServiceProvider::class,
],

3. Publish Configuration Files and Assets

To customize the package settings and ensure all necessary files are available, run the following command:

php artisan vendor:publish --provider="Kudashevs\ShareButtons\Providers\ShareButtonsServiceProvider"

This will generate a configuration file (usually in config/sharebuttons.php), allowing you to modify settings such as available platforms, button styles, and more.

Step 3: Install and Configure Frontend Dependencies

To ensure the share buttons function properly, you need to install the necessary frontend dependencies and configure your assets.

1. Install Frontend Dependencies

Run the following command to install the required Node.js packages:

npm install

After installing the dependencies, compile your assets using:

npm run dev

This command will build your frontend assets for development. If you are preparing for production, use:

npm run build

2. Import Required Files

Open resources/js/app.js and include the necessary imports:

import './bootstrap';
import './share-buttons.js';
import '../css/share-buttons.css';

• ./bootstrap.js ensures Laravel's frontend dependencies (like Axios and Alpine.js) are properly initialized.
• ./share-buttons.js should contain your custom logic for handling social media sharing interactions.
• ../css/share-buttons.css is where you can define custom styles for your share buttons.

3. Include Assets in Blade Template

In your Blade view file (e.g., resources/views/layouts/app.blade.php or another appropriate template), ensure you load the compiled assets using Vite:

@vite(['resources/js/app.js'])

This ensures that your JavaScript and CSS files are properly loaded in the browser.

Step 4: Create a Blade Component

Generate a new Blade component using Artisan:

php artisan make:component Share

Modify the generated component located at app/View/Components/Share.php:

<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class Share extends Component
{
    public $shareComponent;

    public function __construct()
    {
        $currentUrl = url()->current();
        $this->shareComponent = \ShareButtons::page($currentUrl, 'Share with your friends to learn something new')
            ->facebook()
            ->twitter()
            ->linkedin()
            ->telegram()
            ->whatsapp()
            ->reddit()
            ->hackernews()
            ->vkontakte()
            ->pinterest()
            ->pocket()
            ->evernote()
            ->skype()
            ->xing()
            ->copylink()
            ->mailto()
            ->render();
    }

    public function render(): View|Closure|string
    {
        return view('components.share');
    }
}

Next, create the Blade component view file at resources/views/components/share.blade.php:

<div>
    {!! $shareComponent !!}
</div>

Step 5: Add Social Media Share Buttons to Your Blade Template

In resources/views/welcome.blade.php, add the following code:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Social Share</title>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    @vite(['resources/js/app.js'])
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: #fff;
        }
        .container-box {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 40px;
            width: 90%;
            max-width: 500px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .share-buttons {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container-box">
        <h1 class="mb-3">Welcome to Social Media Share</h1>
        <p class="mb-4">Easily share content with your favorite social platforms.</p>
        <div class="share-buttons">
            <x-share />
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 6: Test the Social Media Sharing

Start your Laravel application:

php artisan serve

Visit http://127.0.0.1:8000 and verify if the share buttons are functioning correctly.

Conclusion

Integrating social media sharing in Laravel 11 is simple using the laravel-share-buttons package. This tutorial covered the installation, implementation, and customization. You can enhance the feature by adding more social networks or refining the UI.

Happy coding!