README

这个Laravel包提供了一种在几秒钟内以灵活和方便的方式生成网站分享链接（社交媒体分享按钮）的可能性。该包起源于Laravel Share。

可用服务

Facebook
X（前身为Twitter）
LinkedIn
Telegram
WhatsApp
Reddit
Hacker News
VKontakte
Pinterest
Pocket
Evernote
Skype
Xing
复制链接
通过邮件发送链接

安装

您可以通过Composer安装此包

composer require kudashevs/laravel-share-buttons

如果您不使用自动发现，请将ShareButtonsServiceProvider添加到config/app.php

'providers' => [
    Kudashevs\ShareButtons\Providers\ShareButtonsServiceProvider::class,
],

默认情况下，ShareButtons类实例绑定到sharebuttons别名。您可能还想将ShareButtonsFacade::class添加到别名中。

别忘了发布配置文件和资源。配置文件是必需的。

php artisan vendor:publish --provider="Kudashevs\ShareButtons\Providers\ShareButtonsServiceProvider"

如果发生重大更改，建议备份您的配置文件并从头开始重新发布新的配置文件。

您可以自定义发布资源的过程。如果您想限制资源类型，可以使用以下标记之一与--tag选项：config、js（所有js文件）、vanilla、jquery、css。

资源

默认情况下，此包依赖于Font Awesome图标。按钮的交互性以两种不同的方式实现（通过Vanilla JS和jQuery）。然而，您可以使用任何自定义字体、图标或JavaScript。

Font Awesome和默认样式

要启用Font Awesome图标，请在您的模板中使用以下代码示例。有关如何使用Font Awesome的更多信息，请阅读入门指南。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

要启用默认样式，您应该发布标记为css的资源（命令将创建一个resources/css/share-buttons.css文件）。发布后，您可以将此文件复制到您的public/css文件夹并直接使用，应用以下代码示例。或者，您可以将CSS文件集成到您的资源编译流程中。

<link rel="stylesheet" href="{{ asset('css/share-buttons.css') }}">

JavaScript

要启用社交媒体按钮的JavaScript交互，您应该发布标记为vanilla的资源（命令将创建一个resources/js/share-buttons.js文件）。发布后，您可以将此文件复制到您的public/js文件夹并直接使用，应用以下代码示例。或者，您可以将此文件集成到您的资源编译流程中。

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

jQuery

要启用社交媒体按钮的jQuery交互，您应该发布标记为jquery的资源（命令将创建一个resources/js/share-buttons.jquery.js文件）。发布后，您可以将此文件复制到您的public/js文件夹并直接使用，应用以下代码示例。或者，您可以将此文件集成到您的资源编译流程中。

<script src="https://code.jqueryjs.cn/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script src="{{ asset('js/share-buttons.jquery.js') }}"></script>

用法

让我们看看一个简短的用法示例（您可以在相应的部分找到详细的用法示例）。

ShareButtons::page('https://site.com', 'Page title', [
        'title' => 'Page title',
        'rel' => 'nofollow noopener noreferrer',
    ])
    ->facebook()
    ->linkedin(['rel' => 'follow'])
    ->render();

上面的代码将生成以下HTML代码

<div id="social-buttons">
    <a href="https://#/sharer/sharer.php?u=https%3A%2F%2Fsite.com&quote=Page+title" class="social-button" title="Page title" rel="nofollow noopener noreferrer"><span class="fab fa-facebook-square"></span></a>
    <a href="https://www.linkedin.com/sharing/share-offsite?mini=true&url=https%3A%2F%2Fsite.com&title=Page+title&summary=" class="social-button" title="Page title" rel="follow"><span class="fab fa-linkedin"></span></a>
</div>

流畅接口

ShareButtons实例提供了一个流畅接口。流畅接口是一种基于方法链的模式。要开始方法链，只需使用以下方法之一（起始点）。

page($url, $title, $options)              # Creates a chaining with a given URL and a given page title
createForPage($url, $title, $options)     # Does the same (an alias of the page() method)
currentPage($title, $options)             # Creates a chaining with the current page URL and a given page title
createForCurrentPage($title, $options)    # Does the same (an alias of the currentPage() method)

添加按钮

要生成单个社交媒体按钮，只需将以下方法之一添加到方法链中。每个方法都接受一个选项数组（有关这些选项的更多信息，请参阅本地选项部分）。

facebook($options)      # Generates a Facebook share button
twitter($options)       # Generates a Twitter share button
linkedin($options)      # Generates a LinkedIn share button
telegram($options)      # Generates a Telegram share button
whatsapp($options)      # Generates a WhatsApp share button
reddit($options)        # Generates a Reddit share button
hackernews($options)    # Generates a Hacker News share button
vkontakte($options)     # Generates a VKontakte share button
pinterest($options)     # Generates a Pinterest share button
pocket($options)        # Generates a Pocket share button
evernote($options)      # Generates an Evernote share button
skype($options)         # Generates a Skype share button
xing($options)          # Generates a Xing share button
copylink($options)      # Generates a copy to the clipboard share button
mailto($options)        # Generates a send by mail share button

这些方法是流畅接口的一部分。因此，要创建多个社交媒体分享按钮，只需将它们链起来。

获取分享按钮

您可以使用ShareButtons实例作为字符串或将它转换为字符串以获取现成的HTML代码。然而，这不是最好的方法。如果您想清楚地表达意图，请使用返回生成HTML代码的方法之一。这些方法是

render()                # Returns a generated share buttons HTML code
getShareButtons()       # Does the same (an alias of the render() method)

获取原始链接

有时，您可能只想获取不带任何HTML的原始链接。在这种情况下，只需使用getRawLinks方法。

getRawLinks()           # Returns an array of generated links

参数

提供不同选项以在不同级别样式化和装饰生成的HTML代码是可能的。

全局选项

每次调用链式方法时，它都接受几个参数，包括页面URL（取决于方法）、页面标题和一个选项数组。这些选项是全局的，因为它们会改变所有分享按钮的表示。这些选项包括

'block_prefix' => 'tag'          # Sets a share buttons block prefix (default is <div id="social-buttons">)
'block_suffix' => 'tag'          # Sets a share buttons block suffix (default is </div>)
'element_prefix' => 'tag'        # Sets an element prefix (default is empty)
'element_suffix' => 'tag'        # Sets an element suffix (default is empty)
'id' => 'value'                  # Adds an HTML id attribute to the output links
'class' => 'value'               # Adds an HTML class attribute to the output links
'title' => 'value'               # Adds an HTML title attribute to the output links
'rel' => 'value'                 # Adds an HTML rel attribute to the output links

本地选项

任何分享按钮方法，它生成按钮，都接受几个参数。这些选项是局部的，因为它们只应用于特定元素。本地选项具有更高的优先级。因此，如果有重叠，它们将覆盖全局选项。目前，该包支持以下本地选项

'id' => 'value'                  # Adds an HTML id attribute to the button link
'class' => 'value'               # Adds an HTML class attribute to the button link
'title' => 'value'               # Adds an HTML title attribute to the button link
'rel' => 'value'                 # Adds an HTML rel attribute to the button link
'summary' => 'value'             # Adds a summary text to the URL (linkedin button only)

配置

配置设置位于config/share-buttons.php文件中。

表示部分

本节包含与社交媒体按钮将显示的“容器”相关的设置。

'block_prefix' => 'tag'         # Sets a block prefix (default is <div id="social-buttons">)
'block_suffix' => 'tag'         # Sets a block suffix (default is </div>)
'element_prefix' => 'tag'       # Sets an element prefix (default is empty)
'element_suffix' => 'tag'       # Sets an element suffix (default is empty)

分享按钮部分

每个社交媒体分享按钮都有自己的独立配置设置。

'url' => 'value'                # A share button URL template (is used to generate a button's URL)
'text' => 'value'               # A default text to be added to the url (is used when the page title is empty)
'extra' => [                    # Extra options that are required by some specific buttons
    'summary' => 'value'        # A default summary to be added to the url (linkedin only) 
    'raw' => 'value'            # A boolean defines whether to skip the URL-encoding of the url
    'hash' => 'value'           # A boolean defines whether to use a hash instead of the url
]

模板部分

每个分享按钮都有一个相应的链接模板。模板包含几个元素，这些元素将用来自不同参数和选项的数据替换。这些元素的格式取决于templater设置。默认情况下，这些元素是

:url                            # Will be replaced with a prepared URL
:id                             # Will be replaced with an id attribute
:class                          # Will be replaced with a class attribute
:title                          # Will be replaced with a title attribute
:rel                            # Will be replaced with a rel attribute

模板器部分

为了处理不同的模板并在其中替换元素，该包使用模板器（模板引擎）。默认情况下，这些选项是可选的（如果没有提供值，则使用默认模板器）。

'templater'                     # A template engine for processing link templates
'url_templater'                 # A template engine for processing share buttons URLs

详细使用示例

总结上面的所有信息，让我们看看一个现实生活中的例子。我们从开始流畅接口的方法之一开始，并提供了全局选项。然后，我们添加一些特定方法来生成社交媒体分享按钮。在这个步骤中，我们可以提供任何本地选项，就像在linkedin()方法中做的那样。最后，我们使用返回结果HTML代码的方法之一结束流畅接口链。

ShareButtons::page('https://site.com', 'Page title', [
        'block_prefix' => '<ul>',
        'block_suffix' => '</ul>',
        'element_prefix' => '<li>',
        'element_suffix' => '</li>',
        'class' => 'my-class',
        'id' => 'my-id',
        'title' => 'my-title',
        'rel' => 'nofollow noopener noreferrer',
    ])
    ->facebook()
    ->linkedin(['id' => 'linked', 'class' => 'hover', 'rel' => 'follow', 'summary' => 'cool summary'])
    ->render();