Laravel 11 - Social Media Share Buttons Integration in Laravel 11 Tutorial

Simple steps to Integrating Social Media Share Buttons in Laravel 11.

              Social media is a powerful tool to boost website traffic, offering free promotion. We will create a Social Sharing Button for each page to allow sharing content on every social media platform we activate.

Table Of Content

1 Prerequisites

1.) PHP version of >= 8.2
2.) Composer
3.) Mysql

2 Introduction

In this tutorial, we will integrate Social Media Share Integration in Laravel to create buttons for sharing content on platforms like Facebook, Twitter, WhatsApp, and Viber. To enable this, we will install the jorenvanhocht/laravel-share package, available through composer.

3 Create / Install a Laravel Project

3.1 Install Laravel Project

First, make sure your computer has a composer.
Use the following command to install new Laravel Project.

composer create-project laravel/laravel laravel11-social-share-app

Then, navigate to your project directory:

cd laravel11-social-share-app

3.2 Configure MySql Database

Configure your database in the .env file to store post data:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=social_share
DB_USERNAME=root
DB_PASSWORD=

4 Create Migration

We will create a migration for the posts table using the following command:

    php artisan make:migration create_posts_table

The migration file can be found at database/migrations/. Update the file to create the posts table:

    
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('slug');
            $table->text('description');
            $table->string('image');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('posts');
    }
};

Run the migration:

php artisan migrate

5 Create Model

After creating the posts table, create a Post model at app/Models/Post.php:

    
<?php
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;
    protected $fillable = [
        'name',
        'slug',
        'description',
        'image'
    ];
}

6 Create Factory Class

We will generate dummy data using a factory class:

php artisan make:factory PostFactory --model=Post

Update the database/factories/PostFactory.php file:

    
<?php
namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory;
Illuminate\Support\Str;


/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Post>
 */
class PostFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition(): array
    {
        $title=fake()->name();
        return [
            'name' => $title,
            'slug' => Str::slug($title),
            'description' => fake()->text(),
            'image' => fake()->imageUrl(800,600),
            
        ];
    }
}

Generate dummy data:

php artisan tinker

Post::factory()->count(100)->create()

7 Create Controller (SocialShareButtonsController)

Create a controller to handle Integrating of Social Share Buttons :

php artisan make:controller SocialShareButtonsController

Add the following code to SocialShareButtonsController.php:

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class SocialShareButtonsController extends Controller
{
    public function index()
    {
        $shareButtons = \Share::page(
            'https://www.getsamplecode.com',
            'Your share text comes here',
        )
        ->facebook()
        ->twitter()
        ->linkedin()
        ->telegram()
        ->whatsapp()        
        ->reddit();
        $posts = Post::get();
        return view('socialshare', compact('shareButtons', 'posts'));
    }
}
?>

8 Create view Blade File

Create a socialshare.blade.php view file in the resources/views directory:

    
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Social Media Share Buttons Integration in Laravel 11 || getsamplecode.com</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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;
            }
            .social-btn
            {
                text-align:center
            }
            .social-btn #social-links ul li 
            {
                display: inline-block;
            }          
            .social-btn #social-links ul li a {
                padding: 15px;
                border: 1px solid #ccc;
                margin: 1px;
                font-size: 30px;
            }
             #social-links{
                display: inline-table;
            }
             #social-links ul li{
                display: inline;
            }
             #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">Social Media Share Buttons Laravel 11 - https://getsamplecode.com</h2>
            <div class="social-btn">
                {!! $shareButtons !!}
            </div>
<h1>List Of Posts</h1>
  <hr />
           <div class="row">
                @foreach($posts as $post)
                <div class="col-sm-4 mb-3 product-box">
                            <img src="{!! $post->image !!}" class="card-img-top" alt="{{ $post->name }}" />
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">{{ $post->id }}  {{ $post->name }}</h5>
                                    <p class="card-text">{!! $post->description !!}</p>
                                    <p>{!! Share::page(url('/post/'. $post->slug))->facebook()->twitter()->whatsapp() !!}</p>
                                </div>
                            </div>
                        </div>
                @endforeach
        </div>
        </div>
    </body>
</html>
   

9 Define Routes

Open routes/web.php and add the following code:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SocialShareButtonsController;

Route::get('/', function () {
    return view('welcome');
});
Route::get('social-share', [SocialShareButtonsController::class, 'index']);

10 Folder Structure

11 Run Laravel Server to Test the App

Use the following artisan command to Test the App.

php artisan serve

12 Conclusion

We have successfully implemented Integrating Social Media Share Buttons in Laravel 11.

Tags