Laravel 10 - Social share links
Laravel 10 - Social share links
In this tutorial, we'll discuss how to share blogs or posts on social media using the Laravel Share package, which simplifies social sharing integration.
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 you through adding social media sharing functionality to a Laravel 10 application using the Laravel Social Share package. You’ll start by creating or opening a Laravel project, then installing the required dependencies. After that, you’ll install the Social Share package, publish its configuration, and set up a controller to generate dynamic sharing links for platforms like Facebook, Twitter, LinkedIn, and WhatsApp. You'll also define a route, create a Blade view to display your blog content, and integrate social share buttons using Font Awesome and Bootstrap. Finally, you’ll run your Laravel app and verify that the social sharing links work as expected. By the end of this guide, you’ll have a working example of social sharing in Laravel. This setup not only adds functionality but also boosts user interaction and traffic potential. It’s a simple yet effective way to amplify your content’s reach across major social networks.
Step # 1 : Set Up a New Laravel Project (or Use an Existing One).
To begin, you can either start with a new Laravel 10 project or continue with an existing one. If you have Laravel installed globally, use the command below.
laravel new social
Alternatively, if you're not using the global installer, create the project with Composer.
composer create-project laravel/laravel --prefer-dist social
This step sets up a fresh Laravel 10 project named social, providing a clean environment to implement social media sharing features.
Step # 2 : Navigate to the Project Directory and Run Vite.
Open your terminal (e.g., Git Bash or CMD) and move into the root folder of your Laravel project.
cd c:xampp/htdocs/social
Once inside the project, install the necessary frontend dependencies and start the Vite development server.
npm install && npm run dev
Keep this terminal window open for Vite to continue running. Open a new terminal tab or window to execute other Laravel commands.
Step # 3 : Install the Social Share Package.
To enable social sharing functionality, install the Laravel Social Share package using Composer.
composer require jorenvanhocht/laravel-share
This package provides a simple way to generate shareable links for popular social platforms like Facebook, Twitter, LinkedIn, and WhatsApp. It handles link generation behind the scenes, so you can easily integrate social sharing buttons into your Laravel views without writing platform-specific logic.
Step # 4 : Publish the Package Configuration.
Run the following Artisan command to publish the configuration files for the Social Share package.
php artisan vendor:publish --provider="Jorenvh\Share\Providers\ShareServiceProvider"
Publishing the configuration file allows you to customize how sharing links are generated. This includes setting default options and modifying available social platforms. The published file will appear in your config directory, giving you full control over how the package behaves in your Laravel application.
Step # 5 : Generate a Controller and Add Sharing Logic.
Create a new controller by running the following command.
php artisan make:controller SocialController
Then, open app/Http/Controllers/SocialController.php 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('Extra linkedin summary can be passed here')
->whatsapp()
->getRawLinks();
return view('social-share', [
'blog' => $blog,
'links' => $links,
]);
}
}
The controller handles the logic for generating social media share links using the Share facade. It creates platform-specific URLs based on your blog post and sends them to the view, where you can easily display them as share buttons. This keeps your sharing logic clean and easy to maintain. You can also extend this logic to handle dynamic post data from a database or apply conditional sharing rules. It’s a flexible setup that adapts well to blogs, news articles, or product pages.
Step # 6 : Define the Route.
First, import the controller at the top of your web.php file.
use App\Http\Controllers\SocialController;
Then, register the route.
Route::get('/social', [SocialController::class, 'index']);
This route connects the /social URL to the index method of SocialController, making it accessible in the browser. When someone visits this URL, the controller will generate the share links and pass them to the view.
Step # 7 : Create the View File.
Inside the resources/views directory, create a Blade file named social-share.blade.php. Paste the following code to display the blog content and sharing buttons.
<!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 Shotcut</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-body">
<h1 class="card-title">Blog Post</h1>
<p class="card-text">{{ $blog }}</p>
<h3>Share this post:</h3>
<div class="mt-3">
<a href="{{ $links['facebook'] }}" class="btn btn-primary" target="_blank">
<i class="fab fa-facebook"></i> Share on Facebook
</a>
<a href="{{ $links['twitter'] }}" class="btn btn-info" target="_blank">
<i class="fab fa-twitter"></i> Share on Twitter
</a>
<a href="{{ $links['linkedin'] }}" class="btn btn-secondary" target="_blank">
<i class="fab fa-linkedin"></i> Share on LinkedIn
</a>
<a href="{{ $links['whatsapp'] }}" class="btn btn-success" target="_blank">
<i class="fab fa-whatsapp"></i> Share on WhatsApp
</a>
</div>
</div>
</div>
</div>
</body>
</html>
This Blade view renders a basic blog post along with social media share buttons using Bootstrap and Font Awesome. The dynamic links passed from the controller are used here to generate platform-specific share URLs, allowing users to share the content with a single click.
Step # 8 : Run and Preview the Social Share Page.
Start the Laravel development server.
php artisan serve
Once it's running, open your browser and visit: http://127.0.0.1:8000/social.
You should see the blog content along with working share buttons for Facebook, Twitter, LinkedIn, and WhatsApp, confirming everything is set up correctly. You can now share your content across platforms directly from your Laravel app with a single click.
Conclusion
By following this guide, you've successfully integrated social media sharing into your Laravel application using the Laravel Social Share package. You've created a new controller, configured shareable links for major platforms like Facebook, Twitter, LinkedIn, and WhatsApp, and built a responsive Blade view to display and test the functionality. This setup allows you to enhance user engagement by making it easy for visitors to share your content across multiple platforms.
For more advanced customization, you can explore the package's documentation to tweak icon styles, support more networks, or integrate dynamic post data. This feature is especially useful for blog posts, product pages, or promotional content where wider reach matters.
For more advanced customization, you can explore the package's documentation to tweak icon styles, support more networks, or integrate dynamic post data. This feature is especially useful for blog posts, product pages, or promotional content where wider reach matters.
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