用Laravel Share在Laravel 8中添加社交分享按钮（详细教程）Laravel分享包可以让你动态生成来自流

Laravel分享包可以让你动态生成来自流行的社交网络的社交分享按钮，以提高社会媒体的参与度。

这些允许网站访问者轻松地与他们的社交媒体连接和网络分享内容。

在本教程中，我展示了如何使用Laravel Share包在你的Laravel 8项目中添加社交分享链接。

内容

1.安装包

使用composer安装软件包 -

composer require jorenvanhocht/laravel-share

2.更新app.php

打开config/app.php 文件。
在'providers' 中添加以下Jorenvh\Share\Providers\ShareServiceProvider::class -

'providers' => [
      ....
      ....
      ....  
      Jorenvh\Share\Providers\ShareServiceProvider::class,
];

在'aliases' 中添加以下'Share' => Jorenvh\Share\ShareFacade::class -

'aliases' => [
     .... 
     .... 
     .... 
     'Share' => Jorenvh\Share\ShareFacade::class,
];

3.发布软件包

运行命令-

php artisan vendor:publish --provider=

4.路线

打开routes/web.php 文件。
创建一个路由 -
- / - 加载索引视图。

已完成的代码

<?php

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

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

5.控制器

创建PageController 控制器。

php artisan make:controller PageController

打开app/Http/Controllers/PageController.php 文件。
创建一个方法 - index()

index() -使用Share::page() 创建一个共享链接，并分配给$shareButtons1 。同样，再创建两个链接并分配给变量。

加载index 视图并传递给$shareButtons1,$shareButtons2, 和$shareButtons3 。

完成代码

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PageController extends Controller
{
         public function index(){

               // Share button 1
               $shareButtons1 = \Share::page(
                     'https://makitweb.com/datatables-ajax-pagination-with-search-and-sort-in-laravel-8/'
               )
               ->facebook()
               ->twitter()
               ->linkedin()
               ->telegram()
               ->whatsapp() 
               ->reddit();

               // Share button 2
               $shareButtons2 = \Share::page(
                     'https://makitweb.com/how-to-make-autocomplete-search-using-jquery-ui-in-laravel-8/'
               )
               ->facebook()
               ->twitter()
               ->linkedin()
               ->telegram();

               // Share button 3
               $shareButtons3 = \Share::page(
                      'https://makitweb.com/how-to-upload-multiple-files-with-vue-js-and-php/'
               )
               ->facebook()
               ->twitter()
               ->linkedin()
               ->telegram()
               ->whatsapp() 
               ->reddit();

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

6.视图

在resources/views/ 文件夹中创建index.blade.php 文件。

包括Bootstrap、font-awesome CSS、jQuery和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>

添加CSS来定制社交分享链接。

使用-显示社交分享链接：

{!! $shareButtons1 !!}

同样地，显示其他2 - {! $shareButtons2!!}, 和 {!$ shareButtons3!!}。

完成的代码

<!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>Datatables AJAX pagination with Search and Sort in Laravel 8</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>

7.演示

查看演示

8.总结

在这个例子中，我固定了链接，但你可以动态地设置它们。

使用CSS自定义设计，使用控制器自定义可见的社交图标的数量。

使用Laravel Share包，你可以分享链接到 -

Facebook,
Twitter,
LinkedIn,
WhatsApp,
Reddit, 和
电报

从这里了解更多信息。

用Laravel Share在Laravel 8中添加社交分享按钮（详细教程）

内容

1.安 装包

2.更 新app.php

3.发 布软件包

4.路 线

5.控 制器

6.视 图

7.演 示

8.总 结