How to Add Facebook Like & Share Post Button in Laravel 9

Have you ever seen the Facebook Like & Share Button on posts you read? Do you even wish to add that in your content pages and share it with a larger audience? If you are making a Laravel 9 application and want to Add Facebook Like & Share Post Button, this tutorial is a must read for you!

In this guide, we will explain you for how to add Facebook Like and Share Button in an article in the Laravel application using the Facebook JavaScript SDK.

Main Steps to Add Facebook Like and Share Post Button

Step 1: Install Laravel Project

Open command line interface, type the command below and press enter to start installing a new Laravel app.

composer create-project --prefer-dist laravel/laravel laravel-demo

Step 2: Add Database Details

To link your application with data, you need to add database files. Firstly, edit your .env file as shown below.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

In case you are using macOS or local MAMP server, you will also need to append UNIX_SOCKET and DB_SOCKET database credentials in your .env file.

UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock

Step 3: Model and Migrations

To add features like the Like and Share button to your blogs posts, create a model and a migration file that will hold relevant data for these.

php artisan make:model Blog -m

In the table, add title and content values, add props in the database/migrations/create_blogs_table.php file.

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateBlogsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('content');            
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('blogs');
    }
}

Similarly, in your model file, define the table props in app/Models/Blog.php file.

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Blog extends Model
{
    use HasFactory;
    protected $fillable = [
        'title',
        'content',
    ];    
}

You may then run the migration command as shown below that generates a new table in the database.

php artisan migrate

Step 4: Add Fake Records with Tinker

Next, you have to generate a factory file that will allow to make fake records in the Laravel app.

php artisan make:factory BlogFactory --model=Blog

Now, get into the database\factories\BlogFactory.php file, and define the faker properties that are associated with fake records.

<?php
namespace Database\Factories;
use App\Models\Blog;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;
class BlogFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Blog::class;
    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'title' => $this->faker->name,
            'url' => Str::slug($this->faker->name),
            'category' => $this->faker->name,
            'description' => $this->faker->text,
        ];
    }
}

Now all set, so we will use the tinker command that will create dummy records.

php artisan tinker

Blog::factory()->count(55)->create()

Step 5: Create Controller

You will now have to create a Controller class, where you may add the function to fetch records from database and pass them to view blade file for preview.

php artisan make:controller BlogController

The command will generate a new blog controller, you may then get into the app\Http\Controllers\BlogController.php file and update it with the given code.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Blog;

class BlogController extends Controller
{
    public function index()
    {
        $blogs = Blog::all();
        return view('index', compact('blogs'));
    }
}

Step 6: Add New Routes

Now we will define the routes which will interact with the controller and retrieve results from the database. Go to the routes/web.php file and add in it the code below.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BlogController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('/', [BlogController::class, 'index']);

Step 7: Integrate Facebook Like and Share Button in Posts

Now comes the main step, where you will integrate the Facebook Like and Share button in your blog posts. You will have to create an index.php file. get post data in it and display in bootstrap cards. Most importantly, you will have to define the Facebook JavaScript SDK here, to add the share and like buttons in Laravel. Add the code below in resources/views/index.blade.php file.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Add Facebook Like and Share Buttons in Laravel - scratchcoding.dev</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
       .container {
           max-width: 600px;
       }
    </style>
</head>
<body>
    <div class="container mt-4">
        @foreach($blogs as $blog)
            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">{{$blog->title}}</h5>
                    <p class="card-text">{{$blog->content}}</p>
                    
                    <div class="likeShareBtnmt-3">
                        <div id="fb-root"></div>
                        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v11.0" nonce="ccaa4s"></script>
                        <div 
                            class="fb-like" 
                            data-layout="standard" 
                            data-action="like" 
                            data-size="large" 
                            data-show-faces="true" 
                            data-href="https://developers.facebook.com/docs/plugins/" 
                            data-share="true">
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</body>
</html>

The JavaScript SDK is available at Facebook Developer dashboard. You can get the Like and Share buttons code from there for your Laravel application. You will have to do the following steps.

Add the URL for your webpage where you want to place the Like button
Customize your Like button
Check a preview for your button
Click on the Get Code, and copy paste the code to your webpage

The image below shows the code for the Like button you can get from the JavaScript SDK.

Step 8: Start Laravel App

That’s it, the required buttons are now added to your Laravel application. You can now start the Laravel development server.

php artisan serve

Lastly, use the URL below or your localhost URL to test the app.

http://127.0.0.1:8000

You may see the Like and Share button added to your posts as shown below.

Implement Facebook Like and Share Buttons in Laravel

Conclusion

To sum up, to implement the Facebook Like and Share button in the Laravel application. Facebook provides us with a simple JavaScript SDK. This helps to build this small feature and integrate it with your Laravel application easily.