Laravel 9 Add Facebook Like & Share Post Button Example

by

Laravel Add Facebook Like & Share Button Example; In this tutorial you will learn How to Integrate Facebook Like & Share Post Buttos in Laravel 9 application. Adding a Facebook like and share post button can do the trick and exponentially increase the visibility of your piece of work. Its very easy to adding facebook like and share button in a blog post laravel application using facebook javascript SDK.

In laravel 9 or other laravel versions you can easily integrate and implement facebook like share buttons. let’s see the step by step easy coding example for facebook like share button in laravel application.

How to Add Facebook Like and Share Post Button in Laravel

In this convenient guide, we will share how to add Facebook Like and Share Button in a Blog post in the Laravel application using the Facebook JavaScript SDK.

  • Step 1: Download Laravel App
  • Step 2: Add Database Details
  • Step 3: Create Model and Migrations
  • Step 4: Add Fake Records with Tinker
  • Step 5: Create Controller
  • Step 6: Add Routes
  • Step 7: Integrate Facebook Like and Share Button in Posts
  • Step 8: Start Laravel App

Install Laravel Project

First at all install a fresh laravel project using running the following command.

composer create-project --prefer-dist laravel/laravel laravel-like-share

Add Database Credentials

Update your database credentials in your .env file.

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

Generate Model and Run Migrations

Create a model and migration file using the given PHP artisan command.

php artisan make:model Post -m

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

database\migrations\2021_06_28_023957_create_posts_table.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title')->nullable();
            $table->longText('description')->nullable();
            $table->timestamps();
        });
    }

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

Add fillable property in Post.php Model file.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = [
      'title', 'description'
    ];
}

Now, run the migration command to generate a new table in the database.

php artisan migrate

Add Fake Records using Tinker

Next, we will generate a factory file that allows us to generate fake records in the laravel app and execute the provided command.

php artisan make:factory PostFactory --model=Post

Get into the database\factories\PostFactory.php, define the faker properties associated with fake records:

<?php

namespace Database\Factories;

use App\Models\Post;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;

class PostFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Post::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,
        ];
    }
}

Run the follow command to create dummy records.

php artisan tinker
Post::factory()->count(50)->create()

Create Controller

In this step, you will create a new controller; in this file, we will add the logic to fetch records from the database and pass it to the view template.

php artisan make:controller PostController

Above command generated new post controller, thereafter get into the app\Http\Controllers\PostController.php and update with the given code.

<?php

namespace App\Http\Controllers;

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


class PostController extends Controller
{
    public function index()
    {
        $posts = Post::all();
        return view('posts', compact('posts'));
    }
}

Make Routes

In this step, define the route which will interact with the controller and fetch the result from the database. Head over to routes/web.php add place the recommended code.

<?php

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

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/

Route::get('/posts', [PostController::class, 'index']);

Integrate Facebook Like and Share Button

Create posts.php, get post data and display into the bootstrap cards, most importantly define the Facebook JavaScript SDK to add the share and like buttons in laravel, insert the given code in resources/views/posts.blade.php file.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Add Facebook Like and Share Buttons in Laravel</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($posts as $posts )
            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">{{$post->title}}</h5>
                    <p class="card-text">{{$post->description}}</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>

You may get the JavaScript SDK from Facebook developer dashboard, go there and grab the like and share button code for your laravel site.

Start Laravel App

The like and share buttons have been added to laravel, run the laravel development server.

php artisan serve
http://127.0.0.1:8000/posts

So the Facebook Like and Share button in the Laravel application is succesfully completed now. Any question feel free to add in comment section.

Leave a Comment