Laravel 9 Social Share Buttons Integration Tutorial

Laravel 9 Social Share Buttons Integration Tutorial

Last Updated: 30 Nov, 2022

Dear friends, greetings. In this tutorial, we will learn how to add social share button in laravel 9 application using jorenvanhocht/laravel-share package. Social media is the best way of sharing content to your audience.

How to Add Social Media Share Button in Laravel 9?

Dear friends, follow the below given steps to add social media share button in laravel app:

  • Step 1: Create Fresh Laravel Application
  • Step 2: Install orenvanhocht/laravel-share Package
  • Step 3: Register ShareServiceProvider
  • Step 4: Create Controller
  • Step 5: Add Route
  • Step 6: Create View (Blade) File
  • Step 7: Start Laravel Application

Now, lets go through step by step and see how we can acheive our goal.

Step 1: Create Fresh Laravel Application

First of all, lets install a fresh laravel application. Open your terminal and run the following command:

composer create-project laravel/laravel blog

Step 2: Install orenvanhocht/laravel-share Package

Next, install the share package using following command:

composer require jorenvanhocht/laravel-share

Step 3: Register ShareServiceProvider

Next, open config/app.php file and register ShareServiceProvider to it as follows:

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

    'aliases' => [
        ...
        ...                
        'Share' => Jorenvh\Share\ShareFacade::class,
    ];
];

Next, publish the package configuration and resource files by using below command:

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

Step 4: Create Controller

Next, create a controller and define function in it to add social media share button and load the view page to show the sharing buttons.

php artisan make:controller SocialMediaShareButtonController

Copy the below given code and paste into the app/Http/Controllers/SocialMediaShareButtonController.php file.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class SocialMediaShareButtonController extends Controller
{
    public function index()
    {
        $share_buttons = \Share::page(
            'https://www.w3techpoint.com/laravel/how-to-add-social-share-button-in-laravel-app',
            'How to Add Social Media Share Button in Laravel App?'
        )
        ->facebook()
        ->twitter()
        ->linkedin()
        ->whatsapp()
        ->telegram()
        ->reddit();

        $view_data['share_buttons'] = $share_buttons;
        
        return view('post')->with($view_data);
    }
}

Step 5: Add Route

Next, open routes/web.php and add below given code in it:

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SocialMediaShareButtonController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/social-media-shares', [SocialMediaShareButtonController::class, 'index']);

Step 6: Create View (Blade) File

Next, create post.blade.php file inside resources/views directory. Inside this blade file, you need to import bootstrap and font-awesome file links and also add the {!! $share_buttons !!} variable to show up the social media share buttons. Open the resources/views/post.blade.php and copy the below given code in it:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Add Social Media Share Button in Laravel App - W3TechPoint</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <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: 10px 20px;
            border: 1px solid #ccc;
            margin: 1px;
            font-size: 30px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="container-fluid p-2 py-0 pb-3">
      <div class="row p-0 p-md-2 py-0 py-md-0">
        <div class="col-12">
            <div class="pb-3">
                <h1 class="mb-0 text-dark">Post Title</h1>
                <small class="text-secondary">Last Updated: {{date('d M, Y')}}</small>
              </div>
              <div style="max-width: 100%;">This is my post content.</div>
              <div class="text-success text-center">
                <h5>Thank you! please share it on your social media account.</h5>
                <div>{!! $share_buttons !!}</div>
              </div>
        </div>
      </div>
    </div>
</body>
</html>

Step 7: Start Laravel Application

Next, start the laravel application development server using below command:

php artisan serve

Next, open below url in browser and see the result:

http://127.0.0.1:8000/social-media-shares

HAPPY LEARNING :)

Thank You, Please Share.

Recommended Posts