Integrating Social Media Share Buttons with Laravel

How to Integrating Social Media Share Buttons with Laravel:

Step 1: Installing Latest Laravel Application
Step 2: Adding jorenvanhocht/laravel-share Package
Step 3: Configure Service Provider
Step 4: Creating Controller
Step 5: Creating Routes
Step 6: Adding Share Buttons to Views
Step 7: Testing

Step 1: Installing Latest Laravel Application

Before creating your first Laravel project, you should ensure that your local machine has PHP and Composer installed. If you are developing on macOS, PHP and Composer can be installed via Homebrew. In addition, we recommend installing Node and NPM.

After you have installed PHP and Composer, you may create a new Laravel project via the Composer create-project command:

composer create-project laravel/laravel share-btn-app

Or, you may create new Laravel projects by globally installing the Laravel installer via Composer:

composer global require laravel/installer 
laravel new share-btn-app

After the project has been created, start Laravel’s local development server using the Laravel’s Artisan CLI serve command:

cd share-btn-app
php artisan serve

Step 2: Adding jorenvanhocht/laravel-share Package

Available services

Facebook
Twitter
Linkedin
WhatsApp
Reddit
Telegram

In this section, we will be adding the jorenvanhocht/laravel-share package to our project. You can install the package via composer:

composer require jorenvanhocht/laravel-share

Step 3: Configure Service Provider

This section will guide you through the steps for configuring jorenvanhocht/laravel-share to work with a service provider. If you don’t use auto-discovery, add the ServiceProvider to the providers array in config/app.php

// config/app.php
'providers' => [
    Jorenvh\Share\Providers\ShareServiceProvider::class,
];

And optionally add the facade in config/app.php

// config/app.php
'aliases' => [
    'Share' => Jorenvh\Share\ShareFacade::class,
];

Publish the package config & resource files.

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

You might need to republish the config file when updating to a newer version of Laravel Share

This will publish the laravel-share.php config file to your config folder, share.js in public/js/ and laravel-share.php in your resources/lang/vendor/en/ folder.

Step 4: Creating Controller

In this section, we will be creating a controller that handles social share button. To create a controller run the following line in terminal.

php artisan make:controller SocialShareButtonsController

app/Http/Controllers/SocialShareButtonsController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SocialShareButtonsController extends Controller
{
    public function ShareWidget()
    {
        $shareComponent = \Share::page(
            'http://laraveltuts.com/',
            'Learn laravel with LaravelTuts.com!',
        )
        ->facebook()
        ->twitter()
        ->linkedin()
        ->telegram()
        ->whatsapp()        
        ->reddit();
        
        return view('welcome', compact('shareComponent'));
    }
    
}

Step 5: Creating Routes

Now we need to add a new route for the above controller which we create. So open route/web.php and add the new route as shown.

route/web.php

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

Step 6: Adding Share Buttons to Views

Now we want to display a share button to our views. We are going to add the following code to add social share button to view.

resources/views/welcome.blade.php

<!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 - LaravelTuts.com</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>

Step 7: Testing

Now everything is done. we can now test our application by running the following command in terminal.

Start Laravel’s local development server using the Laravel’s Artisan CLI serve command:

php artisan serve

open the following link in any web browser to test the project.

http://127.0.0.1:8000/share

Conclusion:

This concludes our tutorial on Integrating Social Media Share Buttons with Laravel. We hope you found it helpful. If you did, please share this article with your friends or family and leave us a comment to let us know what you think and stay tuned for more tutorials. If you like the tutorial please subscribe our youtube channel and follow us on social network facebook and instagram.