We will learn in this guide, how to implement social media share buttons on each page of your Laravel application using a handy package, i.e. jorenvanhocht/laravel-share.
Social media share buttons are thoroughly helpful to make your content reach a larger audience, social share icons rapidly increase the quality of a website’s content.
The social sharing button can enhance chances of free promotion for your content. These buttons can be added to each page of a website and provide an eloquent way to share the most important content of a website with your site traffic.
If you are working on a Laravel application, you should know how to integrate social media share button on every page of your application.
To make this tutorial simplistic, use the jorenvanhocht/laravel-share package, and simple download the package via the Composer tool.
This Laravel 8 tutorial on social media share buttons example is totally dependent on the jorenvanhocht/laravel-share package.
It is a PHP-based library that will allow you to generate many different social share links. After you install the package in your project, you can create social share links for Facebook, WhatsApp, LinkedIn, Reddit, Twitter, and Telegram.
Integrate Social Share Button – Laravel 9
- Step 1: Download Laravel App
- Step 2: Add Laravel Share Package
- Step 3: Register Laravel Share
- Step 4: Set Up New Controller
- Step 5: Create Route
- Step 6: Add Social Media Share Buttons in View
- Step 7: Start Application
Download Laravel App
Start by creating a new Laravel app, using the composer command given below and any name for your project.
composer create-project --prefer-dist laravel/laravel laravel-democd laravel-demoAdd Laravel Share Package
In your view, bring up the console screen, and type the given command, then press enter to start installing the Laravel share library.
composer require jorenvanhocht/laravel-shareRegister Laravel Share
To make full advantage of this package, you must register the ServiceProvider and facade, in your config/app.php file.
<?php
return [
'providers' => [
...
...
Jorenvh\Share\Providers\ShareServiceProvider::class,
];
'aliases' => [
...
...
'Share' => Jorenvh\Share\ShareFacade::class,
];
];Move again to the console window and use the command below to publish the package config & resource files.
php artisan vendor:publish --provider="Jorenvh\Share\Providers\ShareServiceProvider"Remember, when you update to the latest version of Laravel, ensure to republish the config file again.
Set Up New Controller
Create a controller file, where, you can define the functions to add social media share buttons and load the view template to show share buttons in your browser.
php artisan make:controller SocialShareButtonsControllerUpdate your code inside app/Http/Controllers/SocialShareButtonsController.php file, as shown below.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SocialShareButtonsController extends Controller
{
public function ShareWidget()
{
$shareComponent = \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('shareComponent'));
}
}Create Route
Next, you need to create a route in the route/web.php file, that helps to integrate social share button on every page.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SocialShareButtonsController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('/social-media-share', [SocialShareButtonsController::class,'ShareWidget']);Add Social Media Share Buttons in View
Now, move to the resources/views directory, and create here the post.blade.php file. You can import bootstrap CSS here, font-awesome links also add the {!! $shareComponent !!} variable to show social share buttons in Laravel.
Update code in resources/views/posts.blade.php file as shown below.
<!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>
{!! $shareComponent !!}
</div>
</body>
</html>Start Application
Since all important things are placed at the right positions, you may now invoke the Laravel development server. Use the artisan command below, and view your app on the browser using the stated URL.
php artisan servehttp://127.0.0.1:8000/social-media-share
Conclusion
To conclude, this guide covers all minute details on how to add social media buttons on each page of your Laravel application.
We used the help of a third-party PHP library (laravel-share) to simplify our work. We have offered you the best solution to add social media share button in Laravel. Hope you liked the tutorial!
