Laravel 11 - Social share links
Laravel 11 - 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
This guide explains how to integrate social media sharing in a Laravel project using the jorenvanhocht/laravel-share package. It covers setting up a new Laravel project, installing the package, publishing its configuration, and creating a controller to generate social share links for platforms like Facebook and Twitter. A route and Blade view are added to display the share buttons. Finally, the Laravel development server is started to test the functionality by visiting a local URL.
Step # 1 : Set Up a New Laravel Project or Use an Existing One.
To begin, you can either use an existing Laravel project or create a fresh one. If Laravel is installed globally, you can create a new project using the following command.
laravel new social
Alternatively, if you prefer using Composer, run
composer create-project laravel/laravel --prefer-dist social
During the setup process, select the following options when prompted.
- Starter Kit: Select None if you want a clean Laravel installation without authentication scaffolding.
- Testing Framework: Choose Pest for a modern, expressive testing experience.
- Database: Set MySQL as the default database driver.
- Migrations: Type yes to automatically run default migrations and set up database tables.
This will create a fresh Laravel project named social. If you used the laravel new command, Laravel will be downloaded and configured instantly; if you used Composer, it will install Laravel and its dependencies in the social directory. The result is a clean Laravel installation without any starter kits, configured with Pest as the testing framework, MySQL as the database, and default migrations already applied.
Step # 2 : Access the project.
Open a terminal (such as Git Bash, Command Prompt, or Terminal) and navigate to the root directory of your Laravel project. For example, if your project is located in xampp/htdocs, use the following command in Git Bash.
cd c:xampp/htdocs/social
This command moves you into the main folder of your Laravel project, where you'll run all Artisan commands and manage your application’s files. Make sure you're in this directory before running any setup or development commands.
Step # 3 : Install Laravel Social Share Package.
To add social sharing functionality to your Laravel project, install the Laravel Share package by running the following command.
composer require jorenvanhocht/laravel-share
This command will download and register the jorenvanhocht/laravel-share package in your Laravel project. It enables you to easily create social media share links for platforms like Facebook, Twitter, LinkedIn, WhatsApp, and more. After installation, you'll be able to use convenient Blade components to display share buttons on your website.
Step # 4 : Publish the configuration.
After installing the Laravel Share package, you need to publish its configuration file using the following Artisan command.
php artisan vendor:publish --provider="Jorenvh\Share\Providers\ShareServiceProvider"
This command copies the package’s configuration file into your Laravel project's config directory. The config file allows you to customize default settings for social share links, such as services, formatting, and behavior. It's an important step if you plan to tweak how sharing works in your application.
Step # 5 : Create a Controller.
Generate a new controller named SocialController by running the following command.
php artisan make:controller SocialController
Once the controller is created, open the app/Http/Controllers/SocialController.php 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,
]);
}
}
This controller defines an index() method that creates social share links for a given URL using the Laravel Share package. The Share::page() method sets up share links for platforms like Facebook, Twitter, LinkedIn, and WhatsApp.
Step # 6 : Create a Route.
To display the social share buttons, define a route that points to the index method of your SocialController. First, make sure to import the controller at the top of your routes/web.php file.
use App\Http\Controllers\SocialController;
Then, add the following route.
Route::get('/social', [SocialController::class, 'index']);
This route will handle GET requests to /social and return the view containing your social share buttons. When you visit http://localhost:8000/social, it will trigger the index method and load the associated Blade view with the share links.
Step # 7 : Create a view.
Now create a Blade view file to display your blog content along with social share buttons. Inside the resources/views directory, create a new file named social-share.blade.php (full path: resources/views/social-share.blade.php) and add the following code to it for testing purposes.
<!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 view displays a sample blog post along with social media share buttons for Facebook, Twitter, LinkedIn, and WhatsApp. The layout uses Bootstrap 4 and Font Awesome for styling and icons. When users click a button, the corresponding platform will open in a new tab with a pre-filled share link.
Step # 8 : It's Time to Test.
To test your social sharing functionality, start the Laravel development server by running the following command.
php artisan serve
Once the server is running, access the following URL in your browser to view the social share buttons.
127.0.0.1:8000/social
You should now see the social share buttons for Facebook, LinkedIn, and other platforms like Twitter and WhatsApp.
Facebook :
LinkedIn :
This step ensures that your social share functionality is working as expected. If everything is set up correctly, you’ll be able to see the share buttons and test them on different social media platforms.
Conclusion
By following this guide, you've successfully integrated social media sharing functionality into your Laravel application using the jorenvanhocht/laravel-share package. Your project now allows users to share content easily across platforms like Facebook, Twitter, LinkedIn, and WhatsApp. All necessary components, including the controller, route, and view, are set up, providing a seamless experience for social sharing. You can further customize the functionality by modifying the controller or adding more social platforms to the share links.
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