How to add Social Share Buttons in Laravel
Hello Developers,
In this demonstration, you will see how to add social share buttons to your Laravel project. It's very necessary to share any content across the web community. The process is described below:
First Step: Install a package named
jorenvanhocht/laravel-share
First of all, we need to install jorenvanhocht/laravel-share composer package. To add the package run the below command in the terminal:
composer require jorenvanhocht/laravel-share
After that, you need to publish the configuration file. Run the below command in the terminal:
php artisan vendor:publish --provider="Jorenvh\Share\Providers\ShareServiceProvider"
Second Step: Creating the route
To create the route add the below line in the web.php file.
route/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SocialShareController;
Route::get('social-share', [SocialShareController::class, 'index']);
Third Step: Creating the controller
app/Http/Controllers/ SocialShareController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class SocialShareController extends Controller
{
public function index()
{
$shareButtons = \Share::page(
'https://www.codebucket.net',
'Your share text comes here',
)
->facebook()
->twitter()
->linkedin()
->telegram()
->whatsapp()
->reddit();
$posts = Post::get();
return view('socialshare', compact('shareButtons', 'posts'));
}
}
Fourth Step: Creting the view file
Then you need to add the view file in the resource/views folder
resources/views/socialshare.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 - ItSolutionStuff.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>
.social-btn-sp #social-links {
margin: 0 auto;
max-width: 500px;
}
.social-btn-sp #social-links ul li {
display: inline-block;
}
.social-btn-sp #social-links ul li a {
padding: 15px;
border: 1px solid #ccc;
margin: 1px;
font-size: 30px;
}
table #social-links{
display: inline-table;
}
table #social-links ul li{
display: inline;
}
table #social-links ul li a{
padding: 5px;
border: 1px solid #ccc;
margin: 1px;
font-size: 15px;
background: #e3e3ea;
}
</style>
</head>
<body>
<div class="container mt-4">
<h2 class="mb-5 text-center">Laravel Social Share Buttons Example - CodeBucket.Net</h2>
<div class="social-btn-sp">
{!! $shareButtons !!}
</div>
<table class="table">
<tr>
<th>List Of Posts</th>
</tr>
@foreach($posts as $post)
<tr>
<td>
{{ $post->title }}
{!! Share::page(url('/post/'. $post->slug))->facebook()->twitter()->whatsapp() !!}
</td>
</tr>
@endforeach
</table>
</div>
</body>
</html>
Hope this might help you in your journey of development.
Read More: How to prevent browser back button after user logout in Laravel?
K. M. Shawkat Zamil
Senior Software Engineer
I am a Senior Software Engineer in a reputed company in Bangladesh. I am a big fan of Laravel, PHP Programming, MSSQL Server, MySql, JavaScript, and lots more. I love to help people who are especially eager to learn. I believe in patience and motivation.