Laravel 8 Facebook Like and Share button integration example

Facebook is one of the best source to reach your audiance. Facebook provides Simple Javascript SDK for like and share button by which user can directly share your website article.

In this article, we will guide you how you can integrate Facebook like and share button into your Laravel application. We will go through step by step from the scratch. The tutorial contains following steps:

• Step 1: Create fresh Laravel application
• Step 2: Configure database into .env file
• Step 3: Import dummy data into database
• Step 4: Create route
• Step 5: Create controller class
• Step 6: Create view file and integrate Facebook

Let's start the tutorial

Step 1: Create fresh Laravel application

In the first step, we will create Laravel application. For that, open the Terminal or CMD and hit the following command.

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

And change the Terminal working directory to project root.

cd facebook

Step 2: Configure database into .env file

After the project is created, open the Laravel project into your favourite IDE. Set the MySQL database credentials into .env file located at root of the directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=facebook
DB_USERNAME=root
DB_PASSWORD=secret

Step 3: Import dummy data into database

We will need some data which we can display over view and share them into Facebook. We have created some dummy articles data to test the application. Copy the following SQL query and import them into your database.

CREATE TABLE `articles` (
  `id` bigint UNSIGNED NOT NULL,
  `title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
  `link` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `body` text COLLATE utf8mb4_unicode_ci,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO `articles` (`id`, `title`, `link`, `body`, `created_at`, `updated_at`) VALUES
(1, 'This is sample title.', 'this-is-sample-title', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ntempor incididunt ut labore et dolore magna aliqua.', '2021-09-21 07:08:48', '2021-09-21 07:08:48'),
(2, 'This is sample another title.', 'this-is-sample-another-title', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ntempor incididunt ut labore et dolore magna aliqua.', '2021-09-27 07:09:06', '2021-09-27 07:09:12'),
(3, 'This is extra sample title.', 'this-is-extra-sample-title', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ntempor incididunt ut labore et dolore magna aliqua.', '2021-10-15 07:09:22', '2021-10-14 07:09:26'),
(4, 'Watch out this text.', 'watch-out-this-text', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ntempor incididunt ut labore et dolore magna aliqua.', '2021-10-22 07:09:49', '2021-10-22 07:09:40'),
(5, 'Find out the current title', 'find-out-the-current-title', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ntempor incididunt ut labore et dolore magna aliqua.', '2021-10-23 07:10:44', '2021-10-23 07:10:48');

Step 4: Create route

Now we have to create a route which will send request to controller class. Open the routes/web.php file and add new route into it.

<?php

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

Route::get('articles', [ArticleController::class, 'index']);

Step 5: Create controller class

As we have created route, we also need to create ArticleController. To create new controller in Laravel, run the below command into Terminal.

php artisan make:controller ArticleController

Open the ArticleController at app/Http/Controllers directory and add index() method into it.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ArticleController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $articles = \DB::table('articles')
            ->get();

        return view('index', compact('articles'));
    }
}

Step 6: Create view file and integrate Facebook

Now we are heading to the core part of the article. We will create a blade view file and add Facebook like and share button on each article. Laravel views are stored at resources/views directory. Create index.blade.php file and add below HTML code into it.

To get Facebook code, signin to Facebook Developer account and configure the button as you want.

Click Get code and copy code. You can simply copy iframe code and put it anywhere into article. Put this code where you want to show button.

In the iframe code, be sure to change href attribute dynamically.

resources/views/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ALL Articles</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container m-5">
        <div class="w-75">
            <h2>ALL Articles</h2>
            @foreach($articles as $article)
                <div class="card my-3">
                    <div class="card-body">
                        <h5 class="card-title">{{ $article->title }}</h5>
                        <p class="card-text">{{ $article->body }}</p>
                        <iframe src="https://www.facebook.com/plugins/like.php?href=http://yoursite.com/article/{{ $article->link }}&width=450&layout=standard&action=like&size=large&share=true&height=35&appId=1234811234" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</body>
</html>

We have integrated Facebook buttons into all article link. Now start the Laravel server using following command:

php artisan serve

And into your browser, go to http://localhost:8000/articles.

Conclusion

We have completed the tutorial. I hope the tutorial will help you on your development.