Integrating Social Media Share Buttons with Laravel

Integrating Social Media Share Buttons with Laravel
Share this:

Social media is a powerful channel for reaching prospects and customers. It’s also a great way to get feedback on your products or services.

But, it’s not enough to just have a social media presence. You need to be able to promote your content in order to reach the audience you want. And the best way to do that is by adding social media share buttons on your website or blog posts.

In this article, we’ll cover why integrating social media share buttons is important, what are the best practices for successful implementation and how you can add them in Laravel.

We are using jorenvanhocht/laravel-share package for this project.

jorenvanhocht/laravel-share – Share links exist on almost every page in every project, creating the code for these share links over and over again can be a pain in the ass. With Laravel Share you can generate these links in just seconds in a way tailored for 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

jorenvanhocht/laravel-share – Share links exist on almost every page in every project, creating the code for these share links over and over again can be a pain in the ass. With Laravel Share you can generate these links in just seconds in a way tailored for Laravel.

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
Integrating Social Media Share Buttons with Laravel
Integrating Social Media Share Buttons with Laravel

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.

Share this:

One thought on “Integrating Social Media Share Buttons with Laravel

Leave a Reply