Laravel 10 Social Media Share Buttons Integration Tutorial

Last Updated on by in Laravel

In this tutorial, we are going to integrate social media share buttons into a Laravel application using the jorenvanhocht/laravel-share package.

This package simplifies the process of adding social sharing buttons for popular platforms like Facebook, Twitter, LinkedIn, Telegram, WhatsApp, and Reddit, making it easy for users to share content directly from your application.

To get started, we’ll walk through setting up the laravel share package, implementing a SocialShareButtonsController class, and using the package’s Share facade to create a share widget. The widget will allow users to share a specific URL with a custom message across multiple social media platforms.

By the end of this tutorial, you’ll have a comprehensive understanding of how to use the laravel-share package to add social sharing buttons to your Laravel application.

Let’s dive in and start integrating social media sharing into your application!

How to Integrate Social Share Button in Laravel 10

  • Step 1: Download Laravel App
  • Step 2: Add Laravel Share Package
  • Step 3: Register Laravel Share
  • Step 4: Set Up New Controller
  • Step 5: Create Route
  • Step 6: Add Social Media Share Buttons in View
  • Step 7: Start Application

Download Laravel App

Let us start by creating a new laravel app; use provided command, you may change the project name as per your choice.

composer create-project --prefer-dist laravel/laravel laravel-demo
cd laravel-demo

Add Laravel Share Package

In your view, bring up the console screen, next type the suggested command, after that hit enter to start installing the laravel share library.

composer require jorenvanhocht/laravel-share

Register Laravel Share

In order to take complete advantage of the package, make sure to register the ServiceProvider and the facade, respectively, in the config/app.php file.

<?php
  return [
    'providers' => [
        ...
        ...        
        Jorenvh\Share\Providers\ShareServiceProvider::class,
    ];
    'aliases' => [
        ...
        ...                
        'Share' => Jorenvh\Share\ShareFacade::class,
    ];
  ];

Head over to the console window again and bother to publish the package config & resource files.

php artisan vendor:publish --provider="Jorenvh\Share\Providers\ShareServiceProvider"

Remember, if you update to the latest version of laravel, then make sure to republish the config file again.

Set Up New Controller

Generate a controller file; here, you will define the functions to add the social media share buttons and loading the view template to show the share buttons in the browser.

php artisan make:controller SocialShareButtonsController

Update the code inside the app/Http/Controllers/SocialShareButtonsController.php file.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SocialShareButtonsController extends Controller
{
    public function ShareWidget()
    {
        $shareComponent = \Share::page(
            'https://www.positronx.io/create-autocomplete-search-in-laravel-with-typeahead-js/',
            'Your share text comes here',
        )
        ->facebook()
        ->twitter()
        ->linkedin()
        ->telegram()
        ->whatsapp()        
        ->reddit();
        
        return view('posts', compact('shareComponent'));
    }
    
}

Create Route

Eventually, you need a route to be added in the route/web.php; it helps to integrate the social share button on every page.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SocialShareButtonsController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('/social-media-share', [SocialShareButtonsController::class,'ShareWidget']);

Add Social Media Share Buttons in View

Now, head over to resources/views inside here create post.blade.php file, in this file you have to import the bootstrap css, font-awesome links also add the {!! $shareComponent !!} variable to show the social share buttons in laravel.

Update code in resources/views/posts.blade.php file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Implement Social Share Button in Laravel</title>
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
        <style>
            div#social-links {
                margin: 0 auto;
                max-width: 500px;
            }
            div#social-links ul li {
                display: inline-block;
            }          
            div#social-links ul li a {
                padding: 20px;
                border: 1px solid #ccc;
                margin: 1px;
                font-size: 30px;
                color: #222;
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <div class="container mt-4">
            <h2 class="mb-5 text-center">Laravel Social Share Buttons Example</h2>
            {!! $shareComponent !!}
        </div>
    </body>
</html>

Start Application

Every piece has been placed at its place, finally invoke the laravel development server and view the app on the browser using the below url.

php artisan serve
http://127.0.0.1:8000/social-media-share

Laravel Social Share

Conclusion

Adding social media share buttons to your Laravel application is a straightforward process with the help of the jorenvanhocht/laravel-share package. By following this tutorial, you have successfully set up a share widget that allows users to share content on various social media platforms. This feature will enhance the user experience and expand the reach of your application.

Remember to test your share widget to ensure everything works smoothly across different social media platforms. Keep experimenting with customization options to create a unique sharing experience for your users. Happy coding!

Age calculator tool

🎂✨ Discover your age in detail and with countdown to your next birthday with fun facts! 🎈🎉

Calculate your age now!
Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.