How to Add Social Media Buttons to Laravel website?
Today, we will learn How to Add Social Media Buttons to the Laravel website. I’d show you about social media share buttons Laravel website. we will look at how to add social media share buttons on the Laravel website for example. if you have any questions about Laravel social share buttons then I will show you a simple example.
In this tutorial, we will use jorenvanhocht/laravel-share composer package. So, Let’s get started with jorenvanhocht/laravel-share example. Here, we use jorenvanhocht/laravel-share composer package to use adding social media sharing buttons on the Laravel website. jorenvanhocht/laravel-share provides a social sharing option for Facebook, telegram, Linkedin, Twitter, Whatsapp, and Reddit.
Step 1: Install jorenvanhocht/laravel-share Package
In the first step, we need to install jorenvanhocht/laravel-share composer package.
composer require jorenvanhocht/laravel-shareAlso read: How to Remove a Package from Laravel using Composer?
Also read: How to Get all Installed Packages With Version in Composer?
jorenvanhocht/laravel-share Package installing successfully, then we need to publish jorenvanhocht/laravel-share configuration file and This command will create config/laravel-share.php and public/js/share.js file.
php artisan vendor:publish --provider="Jorenvh\Share\Providers\ShareServiceProvider"Output
Copied File [\vendor\jorenvanhocht\laravel-share\config\laravel-share.php] To [\config\laravel-share.php]
Copied File [\vendor\jorenvanhocht\laravel-share\public\js\share.js] To [\public\js\share.js]
Copied Directory [\vendor\jorenvanhocht\laravel-share\resources\lang] To [\resources\lang\vendor\laravel-share]
Publishing complete.Step 2: Create Route
Now, we need to create a route for a social share example.
<?php
#routes/web.php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function() {
return view('welcome');
});
Route::get('social-share', [App\Http\Controllers\SocialMediaShareController::class, 'index']);
Step 3: Create Controller
We need to create SocialMediaShareController using the below command and then add the below code on that file:
php artisan make:controller SocialMediaShareControllerAlso read: Difference Between Factory And Seeders In Laravel
<?php
#app/Http/Controllers/SocialMediaShareController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Posts;
class SocialMediaShareController extends Controller
{
public function index()
{
$buttons = \Share::page('https://www.devnote.in', 'Your share text enter here',)->facebook()->telegram()-> twitter()->linkedin()->whatsapp()->reddit();
$posts = Posts::get();
return view('posts.index', compact('buttons', 'posts'));
}
}
Step 4: Create a Blade File
We need to create a blade file for the social share button. so let’s create a posts/index.blade.php file.
resources/views/posts/index.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>How to Add Social Media Buttons in Laravel website - devnote.in</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 #social-links {
margin: 0 auto;
max-width: 40%;
}
#social-links ul {
margin-bottom: 0px;
}
.social-btn #social-links ul li {
display: inline-block;
}
.social-btn #social-links ul li a {
padding: 15px;
border: 1px solid #8b8484;
margin: 1px;
font-size: 20px;
color: #000;
margin-right: 10px;
}
table #social-links {
display: inline-table;
}
table #social-links ul li {
display: inline;
}
table #social-links ul li a {
padding: 5px;
border: 1px solid #8b8484;
margin: 1px;
font-size: 14px;
color: #000;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container mt-4">
<h1 class="mb-5 text-center">Laravel Social Medial Share Buttons Example - devnote.in</h1>
<div class="social-btn">
{!! $buttons !!}
</div>
<table class="table">
<tr>
<th>List Of Posts</th>
</tr>
@foreach($posts as $value)
<tr>
<td>
{{ $value->title }}
{!! Share::page(url('/post/'. $value->slug))->facebook()->telegram()->twitter()->linkedin()->whatsapp()->reddit() !!}
</td>
</tr>
@endforeach
</table>
</div>
</body>
</html>Now we are ready to run our example.
php artisan serveAnd open the below URL on your browser:
http://127.0.0.1:8000/social-shareOutput:
