Laravel 9 Integrate Social Media Share Button Example

by

Laravel 9 Integrate Social Share Buttong Example; In this tutorial we will sow you how to add share social button in the Laravel application using the exorbitantly handy jorenvanhocht/laravel-share package. Social media is the best part to share content to other audience, so this is the major requirement in blogs.

The social sharing button enhances the chance of free promotion of your content. These buttons are added to every page of your site and provide an eloquent way to share the most useful content of your site with your site visitors.

This example generate Facebook, Twitter, Github, whatsapp, copy link option etc social buttons. Le’ts see  the step by step guide to add social share buttons in laravel apps.

How To Add Social Share Button In Laravel?

Use to follow the following steps to add social share buttons in laravel apps:

  • Step 1: Download Laravel App
  • Step 2: Connect App to Database
  • Step 3: Configure Social Share Button Package
  • Step 4: Make Routes
  • Step 5: Setup Controller
  • Step 6: Create Blade View
  • Step 7: Start Application

Download Laravel App

First at all download a new laravel application using the following command.

composer create-project --prefer-dist laravel/laravel laravel-Social-share

Connect App to Database

Next, open “.env” file and update the database name, username and password in the env file just like below:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Configure Social Share Button 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

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"

Setup your 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 SocialShareController

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

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class SocialShareController extends Controller
{

    public function shareButtons()
    {
        $socialShares = \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('socialShares'));
    }
    
}

Make Routes

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\SocialShareController ;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/

Route::get('/social-shares', [SocialShareController::class,'shareButtons']);

Create View File

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>
            {!! $socialShares!!}
        </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

Open your browser and hit the following url on it:

http://127.0.0.1:8000/social-shares

FInally, Laravel 9 – add social media buttons example is completed now. In this tutorial, you have to learn How to add share social media buttons in laravel apps.

Leave a Comment