自动生成twitter、facebook、whatsapp等等分享图标 Sharingbuttons

分享一个好用的第三方分享图标工具,支持主流外国网站

github:click me

使用方法

打开网址 https://sharingbuttons.io/
按照自己想要的分享按钮，生成代码和css，然后复制到网站里面就可以了

自己写的一个简单的php分享类

<?php
//share url twitter facebook
$share_class = new \app\common\lib\common\ShareHtml([
    'facebook','twitter','email','copy_link'
]);
$share_class->_set_share_text('分享标题');
$share_class->_set_share_url('http://test.html');

echo $share_class->show();

代码

<?php

namespace app\common\lib\common;

class ShareHtml {

    protected $share_allow = [
        'facebook','twitter','email','copy_link'
    ];

    protected $share_url;

    protected $share_text;

    public function __construct($share_allow = []) {
        $this->share_allow = $share_allow;
    }

    public function _set_share_url($share_url = '') {
        $this->share_url = $share_url;
        return $this;
    }

    public function _set_share_text($share_text = '') {
        $this->share_text = $share_text;
        return $this;
    }

    public function create_facebook() {
        $html = <<<str
<a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u={$this->share_url}" target="_blank" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg>
    </div>
  </div>
</a>
str;
        return $html;
    }

    public function create_twitter() {
        $html = <<<str
<a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text={$this->share_text}&url={$this->share_url}" target="_blank" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg>
    </div>
  </div>
</a>
str;
        return $html;
    }

    public function create_email() {
        $html = <<<str
<a class="resp-sharing-button__link"  href="mailto:?subject={$this->share_text}&body={$this->share_url}" target="_self" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg>
    </div>
  </div>
</a>
str;
        return $html;
    }

    public function create_copy_link() {
        $html = <<<str
<a class="resp-sharing-button__link a-copy-link" title="copy-link" href="javascript:void(0);" rel="noopener" aria-label="">
    <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.851 11.923c-.179-.641-.521-1.246-1.025-1.749-1.562-1.562-4.095-1.563-5.657 0l-4.998 4.998c-1.562 1.563-1.563 4.095 0 5.657 1.562 1.563 4.096 1.561 5.656 0l3.842-3.841.333.009c.404 0 .802-.04 1.189-.117l-4.657 4.656c-.975.976-2.255 1.464-3.535 1.464-1.28 0-2.56-.488-3.535-1.464-1.952-1.951-1.952-5.12 0-7.071l4.998-4.998c.975-.976 2.256-1.464 3.536-1.464 1.279 0 2.56.488 3.535 1.464.493.493.861 1.063 1.105 1.672l-.787.784zm-5.703.147c.178.643.521 1.25 1.026 1.756 1.562 1.563 4.096 1.561 5.656 0l4.999-4.998c1.563-1.562 1.563-4.095 0-5.657-1.562-1.562-4.095-1.563-5.657 0l-3.841 3.841-.333-.009c-.404 0-.802.04-1.189.117l4.656-4.656c.975-.976 2.256-1.464 3.536-1.464 1.279 0 2.56.488 3.535 1.464 1.951 1.951 1.951 5.119 0 7.071l-4.999 4.998c-.975.976-2.255 1.464-3.535 1.464-1.28 0-2.56-.488-3.535-1.464-.494-.495-.863-1.067-1.107-1.678l.788-.785z"/></svg>
    </div>
    </div>
</a>
str;
        return $html;
    }

    public function show()  {

        $share_str = '';

        foreach ($this->share_allow as $value) {
            $class = 'create_'.$value;
            $share_str .= $this->$class();

        }

        $html = <<<str
<div class="share-wrap">
    {$share_str}
</div>
str;

        return $html;
    }

}

copy link 图标代码

//copy link
$('.a-copy-link').on('click',function () {
    copyToClipboard('http://www.test.com');
    alert('copy success');
});

function copyToClipboard(text) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(text).select();
    document.execCommand("copy");
    $temp.remove();
}