Laravel 12 - Social Share Integration (Facebook, Twitter, LinkedIn, WhatsApp)
Laravel 12 - Social Share Integration (Facebook, Twitter, LinkedIn, WhatsApp)
In this tutorial, we will integrate social media share buttons in Laravel 12 using the Laravel Share package to share posts on Facebook, Twitter, LinkedIn, and WhatsApp.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this guide, we walk through how to add social media sharing to a Laravel 12 project using the jorenvanhocht/laravel-share package. You’ll learn how to install and configure the package, generate shareable links for platforms like Facebook, Twitter, LinkedIn, and WhatsApp, and display them using a clean Tailwind CSS-based Blade view. The guide also includes creating a controller, defining a route, and testing everything on your local server. By the end, you’ll have modern, responsive social share buttons seamlessly integrated into your Laravel 12 application.
Step # 1 : Create a Fresh Laravel 12 Project.
Let’s begin by setting up a brand-new Laravel 12 application. Make sure the Laravel installer is installed globally on your system. If not, you can install it using the following command.
composer global require laravel/installer
This command gives you quick access to the laravel command-line tool, making it easier to spin up new projects. Once installed, go ahead and create a fresh Laravel 12 project by running.
laravel new social
During the interactive setup, make the following selections.
- For the Starter Kit, choose None since we’re not adding any frontend scaffolding at this stage.
- Select Pest as the testing framework, which is a modern and expressive way to write tests in Laravel.
- Choose MySQL as the database driver, as it’s commonly used and well-supported.
- When asked about running default migrations, select Yes to create the base tables in your database right away.
- Finally, confirm npm install and npm run build so your frontend assets are installed and compiled automatically.
After the setup finishes, you'll have a fresh Laravel 12 application ready to go with Pest configured for testing, MySQL connected as your database, and your frontend assets fully compiled. You're now ready to start building your application.
Step # 2 : Access Your Laravel Project.
Open your preferred terminal this could be Git Bash, Command Prompt, or any terminal you’re comfortable with and navigate to the root directory of your Laravel project. If your project is located inside xampp/htdocs, you can use the following command to move into the project directory.
cd c:xampp/htdocs/social
This command places you inside the main folder of your Laravel application, where you’ll run all Artisan commands and manage the project’s files. Before executing any setup or development commands, always ensure that your terminal is pointed to this root directory..
Step # 3 : Install the Laravel Social Share Package.
To enable social sharing features in your Laravel 12 project, start by installing the Laravel Share package. Run the following command in your terminal.
composer require jorenvanhocht/laravel-share
This will download and register the jorenvanhocht/laravel-share package into your project. It provides an easy way to generate shareable links for platforms like Facebook, Twitter, LinkedIn, WhatsApp, and more. Once installed, you’ll be able to use simple Blade components to add elegant social share buttons to your views making it easy for users to share your content across multiple platforms.
Step # 4 : Publish the Configuration File.
Once the Laravel Share package is installed, the next step is to publish its configuration file. This allows you to customize how social sharing behaves in your project. Run the following Artisan command.
php artisan vendor:publish --provider="Jorenvh\Share\Providers\ShareServiceProvider"
This command will copy the package’s configuration file into your project's config directory. With this file in place, you can easily adjust settings like the default social platforms, formatting of the share links, and other behavior related to sharing. Publishing the config is especially useful if you want full control over how the share buttons function in your application.
Step # 5 : Create a Controller for Social Sharing.
Let’s create a dedicated controller to handle the logic for generating social share links. In your terminal, run the following Artisan command.
php artisan make:controller SocialController
This will generate a new file at app/Http/Controllers/SocialController.php. Open that file and update it with the following code.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Jorenvh\Share\ShareFacade as Share;
class SocialController extends Controller
{
public function index()
{
$blog = "This is a random blog post about Laravel social sharing.";
// Replace this with your actual blog post URL
$links = Share::page('https://www.lipsum.com/', 'Social Share Blog')
->facebook()
->twitter()
->linkedin()
->whatsapp()
->getRawLinks();
return view('social-share', [
'blog' => $blog,
'links' => $links,
]);
}
}
In this controller, the index() method uses the Share::page() function to create social media share links for a given URL and title. It adds sharing options for Facebook, Twitter, LinkedIn, and WhatsApp, then returns them to a Blade view called social-share.
Step # 6 : Define a Route for the Social Share Page.
To display your social share buttons in the browser, you’ll need to set up a route that points to the index() method inside your SocialController. First, open your routes/web.php file and make sure to import the controller at the top.
use App\Http\Controllers\SocialController;
Then, define the route like this.
Route::get('/social', [SocialController::class, 'index']);
This route listens for GET requests to /social and directs them to the index method of your controller. When you visit http://localhost:8000/social in your browser, it will trigger the controller and load the view containing the social share links.
Step # 7 : Create a Blade View for Social Sharing.
Now that your controller and route are set up, let’s create the actual view to display blog post along with the social share buttons. Inside your Laravel project, go to the resources/views directory and create a new file named social-share.blade.php. Then paste the following code into it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Share Example - Code Shortcut</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome (for icons) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-black text-gray-200 min-h-screen flex items-center justify-center">
<div class="w-full max-w-3xl p-4">
<div class="bg-gray-900 shadow-xl rounded-2xl p-6">
<h1 class="text-3xl font-bold mb-4 border-b border-gray-700 pb-2">Blog Post</h1>
<p class="text-lg leading-relaxed mb-6 text-gray-300">{{ $blog }}</p>
<h3 class="text-xl font-semibold mb-3">Share this post:</h3>
<div class="flex flex-wrap gap-3">
<a href="{{ $links['facebook'] }}" target="_blank" class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
<i class="fab fa-facebook-f"></i> Facebook
</a>
<a href="{{ $links['twitter'] }}" target="_blank" class="flex items-center gap-2 bg-sky-500 text-white px-4 py-2 rounded-lg hover:bg-sky-600 transition">
<i class="fab fa-twitter"></i> Twitter
</a>
<a href="{{ $links['linkedin'] }}" target="_blank" class="flex items-center gap-2 bg-blue-800 text-white px-4 py-2 rounded-lg hover:bg-blue-900 transition">
<i class="fab fa-linkedin-in"></i> LinkedIn
</a>
<a href="{{ $links['whatsapp'] }}" target="_blank" class="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">
<i class="fab fa-whatsapp"></i> WhatsApp
</a>
</div>
</div>
</div>
</body>
</html>
This Blade file displays a blog post with share buttons styled using Tailwind CSS and Font Awesome icons. The dark background, hover effects, and responsive layout make it clean and user-friendly. Clicking any button opens the corresponding social platform in a new tab with a pre-filled share link.
Step # 8 : Time to Test the Social Share Buttons.
Now that everything is in place, let’s test the social sharing functionality. Start your Laravel development server by running the following command in your terminal.
php artisan serve
Once the server is up and running, open your browser and visit: http://127.0.0.1:8000/social. You should now see your blog post along with social share buttons for Facebook, Twitter, LinkedIn, and WhatsApp. Click any of the buttons, and it will open the respective platform in a new tab with a pre-filled link ready to share.
Facebook:
LinkedIn:
If everything is set up correctly, the share links should work seamlessly across all supported platforms, confirming that your integration is functioning as expected.
Conclusion
By following this guide, you’ve successfully integrated social media sharing functionality into your Laravel 12 application using the jorenvanhocht/laravel-share package. Your project now includes a fully responsive, Tailwind styled view where users can share content across platforms like Facebook, Twitter, LinkedIn, and WhatsApp. All essential components including the controller, route, and view are in place, making the sharing experience smooth and visually consistent.
For more details, please refer to the jorenvanhocht/laravel-share package documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments