October 20, 2021

Thêm chức năng chia sẻ mạng xã hội trong Laravel 8

Bạn có một bài viết hay và được nhiều người để ý đến, người đọc sẽ muốn chia sẻ bài viết của bạn, tuy nhiên thay vì phải copy lên các trang mạng xã hội thì tôi sẽ hướng dẫn bạn thêm các nút chia sẻ của các mạng nổi tiếng như Facebook, Instagram, Twitter…

Ở đây chúng ta sử dụng package có tên là Laravel Share, nó sẽ giúp bạn tự động tạo ra các nút chia sẻ giúp tăng tương tác của bài viết tốt nhất lên các mạng xã hội. Tôi sử dụng nó ở phiên bản Laravel 8, bắt đầu thôi

Cài đặt Package

Sử dụng composer để cài đặt

composer require jorenvanhocht/laravel-share

Cài đặt file cấu hình

  • Mở file config/app.php
  • Thêm đoạn sau  Jorenvh\Share\Providers\ShareServiceProvider::class trong 'providers' –
'providers' => [
      ....
      ....
      ....  
      Jorenvh\Share\Providers\ShareServiceProvider::class,
];
  • Thêm tiếp 'Share' => Jorenvh\Share\ShareFacade::class trong 'aliases' –
'aliases' => [
     .... 
     .... 
     .... 
     'Share' => Jorenvh\Share\ShareFacade::class,
];

Publish package

Chạy command sau để xuất bản

php artisan vendor:publish --provider="Jorenvh\Share\Providers\ShareServiceProvider"

Thêm route

  • Mở file routes/web.php
  • Khởi tạo route –
    • / – Hiển thị view index.

Code như sau

<?php

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

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

Tạo Controller

php artisan make:controller PageController
  • Mở file app/Http/Controllers/PageController.php
  • Tạo 1 method có tên là index

index() – Tạo link chia sẻ sử dụng Share::page() và gán vào biến $shareButtons1. Tương tự, tạo thêm cho các link khác và các biến tương tự.

Sau đó truyền các biến vào file view index

Completed Code

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PageController extends Controller
{
         public function index(){

               // Share button 1
               $shareButtons1 = \Share::page(
                     'https://korakora.org/them-chuc-nang-chia-se-mang-xa-hoi-trong-laravel-8/'
               )
               ->facebook()
               ->twitter()
               ->linkedin()
               ->telegram()
               ->whatsapp() 
               ->reddit();

               // Share button 2
               $shareButtons2 = \Share::page(
                     'https://korakora.org/them-chuc-nang-chia-se-mang-xa-hoi-trong-laravel-8/'
               )
               ->facebook()
               ->twitter()
               ->linkedin()
               ->telegram();

               // Share button 3
               $shareButtons3 = \Share::page(
                      'https://korakora.org/them-chuc-nang-chia-se-mang-xa-hoi-trong-laravel-8/'
               )
               ->facebook()
               ->twitter()
               ->linkedin()
               ->telegram()
               ->whatsapp() 
               ->reddit();

               // Load index view
               return view('index')
                     ->with('shareButtons1',$shareButtons1 )
                     ->with('shareButtons2',$shareButtons2 )
                     ->with('shareButtons3',$shareButtons3 );
         }
}

View

Trong thư mục resources/views/ tạo file index.blade.php

Sử dụng Bootstrap, font awesome, jQuery, và file js/share.js

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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"/>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Share JS -->
<script src="{{ asset('js/share.js') }}"></script>

Để hiển thị chức năng share social ta sử dụng –

{!! $shareButtons1 !!}

Completed Code

<!DOCTYPE html>
<html>
<head>
     <title>Add social share button in Laravel 8 with Laravel Share</title>

     <!-- Meta -->
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <!-- CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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"/>

     <!-- jQuery -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

     <!-- Share JS -->
     <script src="{{ asset('js/share.js') }}"></script>

     <style>
     #social-links ul{
          padding-left: 0;
     }
     #social-links ul li {
          display: inline-block;
     } 
     #social-links ul li a {
          padding: 6px;
          border: 1px solid #ccc;
          border-radius: 5px;
          margin: 1px;
          font-size: 25px;
     }
     #social-links .fa-facebook{
           color: #0d6efd;
     }
     #social-links .fa-twitter{
           color: deepskyblue;
     }
     #social-links .fa-linkedin{
           color: #0e76a8;
     }
     #social-links .fa-whatsapp{
          color: #25D366
     }
     #social-links .fa-reddit{
          color: #FF4500;;
     }
     #social-links .fa-telegram{
          color: #0088cc;
     }
     </style>
</head>
<body>

    <div class='container'>

         <!-- Post 1 -->
         <div class='row mt-5'>
               <h2>Korakora.org website chia sẻ kinh nghiệm lập trình</h2>

               <p>With pagination, it is easier to display a huge list of data on the page.</p>

               <p>You can create pagination with and without AJAX.</p>

               <p>There are many jQuery plugins are available for adding pagination. One of them is DataTables.</p>

               <p>In this tutorial, I show how you can add Datatables AJAX pagination without the Laravel package in Laravel 8.</p>

               <!-- Social Share buttons 1 -->
               <div class="social-btn-sp">
                     {!! $shareButtons1 !!}
               </div> 
          </div>

          <!-- Post 2 -->
          <div class='row mt-5'>
                 <h2>How to make Autocomplete search using jQuery UI in Laravel 8</h2>

                 <p>jQuery UI has different types of widgets available, one of them is autocomplete.</p>

                 <p>Data is loaded according to the input after initialize autocomplete on a textbox. User can select an option from the suggestion list.</p>

                 <p>In this tutorial, I show how you can make autocomplete search using jQuery UI in Laravel 8.</p>

                 <!-- Social Share buttons 2 -->
                 <div class="social-btn-sp">
                        {!! $shareButtons2 !!}
                 </div>
           </div>

           <!-- Post 3 -->
           <div class='row mt-5 mb-5'>
                 <h2>How to upload multiple files with Vue.js and PHP</h2>

                 <p>Instead of adding multiple file elements, you can use a single file element for allowing the user to upload more than one file.</p>

                 <p>Using the FormData object to pass the selected files to the PHP for upload.</p>

                 <p>In this tutorial, I show how you can upload multiple files using Vue.js and PHP.</p>

                 <!-- Social Share buttons 3 -->
                 <div class="social-btn-sp">
                      {!! $shareButtons3 !!}
                 </div>
           </div>

     </div>
</body>
</html>

Kết luận

Trong ví dụ, tôi đã sửa các liên kết nhưng bạn có thể đặt chúng động.

Tùy chỉnh thiết kế bằng cách sử dụng CSS và số lượng biểu tượng xã hội có thể nhìn thấy bằng bộ điều khiển.

Sử dụng gói Laravel Share, bạn có thể chia sẻ các liên kết đến –

  • Facebook
  • Twitter
  • LinkedIn
  • WhatsApp
  • Reddit
  • Telegram

Tìm hiểu thêm các chức năng tại đây .

Korakora

Chia sẻ kiến thức cho mọi người là niềm vui của mình

View all posts by Korakora →

Leave a Reply

Your email address will not be published. Required fields are marked *

icons8-exercise-96 challenges-icon chat-active-icon