How to Add social share button in Laravel 8 with Laravel Share

   

Add social share button in Laravel 8 with Laravel Share

Laravel Share package lets you dynamically generate social share buttons from popular social networks to increase social media engagement.

These allow website visitors to easily share the content with their social media connections and networks.

In this tutorial, I show how you can add social share links in your Laravel 8 project using Laravel Share package.

Demo Download

1. Install Package

Install the package using composer –

composer require jorenvanhocht/laravel-share

2. Update app.php

  • Open config/app.php file.
  • Add the following Jorenvh\Share\Providers\ShareServiceProvider::class in 'providers' –
'providers' => [
      ....
      ....
      ....  
      Jorenvh\Share\Providers\ShareServiceProvider::class,
];
  • Add the following 'Share' => Jorenvh\Share\ShareFacade::class in 'aliases' –
'aliases' => [
     .... 
     .... 
     .... 
     'Share' => Jorenvh\Share\ShareFacade::class,
];

3. Publish package

Run the command –

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

4. Route

  • Open routes/web.php file.
  • Create a route –
    • / – Load index view.

Completed Code

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PageController;

Route::get('/', [PageController::class, 'index']);

5. Controller

  • Create PageController Controller.
php artisan make:controller PageController
  • Open app/Http/Controllers/PageController.php file.
  • Create 1 method –

index() – Create a share link using Share::page() and assign to $shareButtons1. Similarly, create 2 more links and assign to variables.

Load index view and pass $shareButtons1, $shareButtons2, and $shareButtons3.

Completed Code

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PageController extends Controller
{
         public function index(){

               // Share button 1
               $shareButtons1 = \Share::page(
                     'https://makitweb.com/datatables-ajax-pagination-with-search-and-sort-in-laravel-8/'
               )
               ->facebook()
               ->twitter()
               ->linkedin()
               ->telegram()
               ->whatsapp() 
               ->reddit();

               // Share button 2
               $shareButtons2 = \Share::page(
                     'https://makitweb.com/how-to-make-autocomplete-search-using-jquery-ui-in-laravel-8/'
               )
               ->facebook()
               ->twitter()
               ->linkedin()
               ->telegram();

               // Share button 3
               $shareButtons3 = \Share::page(
                      'https://makitweb.com/how-to-upload-multiple-files-with-vue-js-and-php/'
               )
               ->facebook()
               ->twitter()
               ->linkedin()
               ->telegram()
               ->whatsapp() 
               ->reddit();

               // Load index view
               return view('index')
                     ->with('shareButtons1',$shareButtons1 )
                     ->with('shareButtons2',$shareButtons2 )
                     ->with('shareButtons3',$shareButtons3 );
         }
}

6. View

Createindex.blade.php file in resources/views/ folder.

Include Bootstrap, font-awesome CSS, jQuery, and js/share.js. –

<!-- CSS -->
<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"/>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Share JS -->
<script src="{{ asset('js/share.js') }}"></script>

Added CSS to customize social share links.

Display social share links using –

{!! $shareButtons1 !!}

Similarly, display other 2 – {!! $shareButtons2 !!}, and {!! $shareButtons3 !!}.

Completed Code

<!DOCTYPE html>
<html>
<head>
     <title>Add social share button in Laravel 8 with Laravel Share</title>

     <!-- Meta -->
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <!-- CSS -->
     <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"/>

     <!-- jQuery -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

     <!-- Share JS -->
     <script src="{{ asset('js/share.js') }}"></script>

     <style>
     #social-links ul{
          padding-left: 0;
     }
     #social-links ul li {
          display: inline-block;
     } 
     #social-links ul li a {
          padding: 6px;
          border: 1px solid #ccc;
          border-radius: 5px;
          margin: 1px;
          font-size: 25px;
     }
     #social-links .fa-facebook{
           color: #0d6efd;
     }
     #social-links .fa-twitter{
           color: deepskyblue;
     }
     #social-links .fa-linkedin{
           color: #0e76a8;
     }
     #social-links .fa-whatsapp{
          color: #25D366
     }
     #social-links .fa-reddit{
          color: #FF4500;;
     }
     #social-links .fa-telegram{
          color: #0088cc;
     }
     </style>
</head>
<body>

    <div class='container'>

         <!-- Post 1 -->
         <div class='row mt-5'>
               <h2>Datatables AJAX pagination with Search and Sort in Laravel 8</h2>

               <p>With pagination, it is easier to display a huge list of data on the page.</p>

               <p>You can create pagination with and without AJAX.</p>

               <p>There are many jQuery plugins are available for adding pagination. One of them is DataTables.</p>

               <p>In this tutorial, I show how you can add Datatables AJAX pagination without the Laravel package in Laravel 8.</p>

               <!-- Social Share buttons 1 -->
               <div class="social-btn-sp">
                     {!! $shareButtons1 !!}
               </div> 
          </div>

          <!-- Post 2 -->
          <div class='row mt-5'>
                 <h2>How to make Autocomplete search using jQuery UI in Laravel 8</h2>

                 <p>jQuery UI has different types of widgets available, one of them is autocomplete.</p>

                 <p>Data is loaded according to the input after initialize autocomplete on a textbox. User can select an option from the suggestion list.</p>

                 <p>In this tutorial, I show how you can make autocomplete search using jQuery UI in Laravel 8.</p>

                 <!-- Social Share buttons 2 -->
                 <div class="social-btn-sp">
                        {!! $shareButtons2 !!}
                 </div>
           </div>

           <!-- Post 3 -->
           <div class='row mt-5 mb-5'>
                 <h2>How to upload multiple files with Vue.js and PHP</h2>

                 <p>Instead of adding multiple file elements, you can use a single file element for allowing the user to upload more than one file.</p>

                 <p>Using the FormData object to pass the selected files to the PHP for upload.</p>

                 <p>In this tutorial, I show how you can upload multiple files using Vue.js and PHP.</p>

                 <!-- Social Share buttons 3 -->
                 <div class="social-btn-sp">
                      {!! $shareButtons3 !!}
                 </div>
           </div>

     </div>
</body>
</html>

7. Demo

View Demo

8. Conclusion

In the example, I fixed the links but you can set them dynamically.

Customize the design using CSS and the number of social icons visible using the controller.

Using the Laravel Share package you can share links to –

  • Facebook,
  • Twitter,
  • LinkedIn,
  • WhatsApp,
  • Reddit, and
  • Telegram

Learn more about this from here.

« Newest
Newer Posts
Oldest »
Older Posts

Comments