オリジナルデザインのSNSシェアボタンを付ける

｜2024/10/01
SNSシェアボタン

【2020/10/25 追記】

  • Pinterest ボタンのコードを追加しました。
  • リンクコピーボタンも Font Awesome アイコンにしました。
  • 角型デザインボタンのCSSは削除しました。

【2021/05/10 追記】

  • JavaScript 化した改造版コードを公開しました。宜しければこちらもお試しください。
ファビコンふじろじっく
サムネイル
オリジナル SNS シェアボタン 【JavaScript 版】(2021/05/14: コードをアップデートしました)
ふじろじっくオリジナルSNSボタンのコードをJavaScript化してみた
https://fujilogic.blogspot.com/2021/05/SNS-share-buttons-JavaScript.html


CONTENTS

スクリプトコードの設置

テーマ編集は必ず予めバックアップを取ってから行って下さい。

スクショは Contempo テーマのものを貼っています。

①Font Awesome アイコン準備

Font Awesome (ver.5x)のアイコンを使用するため、まだ導入されてない場合はテーマ編集画面(HTML)にて以下のタグを </head> の上に設置してください。

<link href='//use.fontawesome.com/releases/v5.14.0/css/all.css' rel='stylesheet' type='text/css'/>

②コードの設置

以下のHTMLコードを <data:post.body/> (2箇所あるうちの下側の方) の直下に設置するとシェアボタンが記事の下部(コメント欄の上辺り)に、上に置くと記事上部(記事タイトルの下辺り)に表示されます。

<!-- SNS Share Buttons -->
           <b:if cond='data:view.isPost'>
<div class='sns-share-buttons-title'>この記事をシェアする</div>
   <ul class='sns-share-buttons'>
      <!--Twitter-->
      <li class='tweet'>
          <a expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url + "&amp;text=" + data:post.title + " %7C " + data:blog.title + ""' rel='nofollow noopener' target='_blank' title='ツイートする'>
            <i class='fab fa-twitter'/>
         </a>
      </li>
      <!--Facebook-->
      <li class='facebook'>
         <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=330,width=600&apos;);return false;' rel='nofollow noopener' target='_blank' title='シェアする'>
           <i class='fab fa-facebook-f'/>
         </a>
      </li>
      <!--はてな-->
      <li class='hatena'>
         <a expr:href='"https://b.hatena.ne.jp/entry/panel/?url=" + data:post.url' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600&apos;);return false;' rel='nofollow noopener' target='_blank' title='はてなブックマークに登録'>
          <span style='font-weight:bold;font-family:verdana;line-height:22px'>B!</span>
         </a>
      </li>
      <!--pocket-->
      <li class='pocket'>
         <a expr:href='"https://getpocket.com/edit?url=" + data:post.url' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' rel='nofollow noopener' target='_blank' title='Pocketに保存'>
           <i class='fab fa-get-pocket'/>
         </a>
      </li>
      <!--LINE-->
      <li class='line'>
         <a expr:href='"https://social-plugins.line.me/lineit/share?url=" + data:post.url' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=520,width=600&apos;);return false;' rel='nofollow noopener' target='_blank' title='LINEで送る'>
            <i class='fab fa-line'/>
         </a>
      </li>
      <!--Pinterest-->
      <li class='pinterest'>
         <a data-pin-custom='true' data-pin-do='buttonBookmark' data-pin-lang='ja' expr:href='&quot;https://jp.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl' title='ピン保存する'><i class='fab fa-pinterest-p'/></a>
        <script async='async' defer='defer' src='//assets.pinterest.com/js/pinit.js'/>
      </li>
      <!--COPY LINK-->
      <li class='copylink'>
<a class='copy_btn' style='cursor:pointer' title='タイトルとURLをコピーする'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<script src='//cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js'/>
<script>
//<![CDATA[
const clipboard=new ClipboardJS(".copy_btn");window.addEventListener('DOMContentLoaded', function(){$(".copy_btn").click(function(){$(this).attr("data-clipboard-text",document.title+" "+location.href).css("cursor","text").css("cursor","text").css("line-height","12px").css("background","#ccc").css("transform","none").css("box-shadow","none").text("COPIED").attr("title","コピーしました")})})
//]]>
</script>
      </li>
   </ul>
</b:if>

<data:post.body/> の下に置いた場合

HTML

コードについて

  • リンクコピーには jQuery を使用しますが、既に導入済みの場合はタグを削除してもOKです。

    • リンクコピーのアイコンは Font Awesome を CSS疑似要素で表示しています。(コピー機能が効かなくなる不具合回避のため)
    コピーボタンを押した後はこのように変化します。→ コピーボタン

  • Vaster2, ZELO, QooQ 等、既にオリジナルのSNSボタンが実装されているテーマの場合は、当該の HTML や CSSコードを探して丸ごと入れ替えて下さい。

CSS でデザイン調整

以下のコードを、テーマ編集(HTML)にて ]]></b:skin> の上に追記します。

※テーマによってはアイコンの位置がずれたり、デザインが崩れる場合がありますので、適宜微調整して下さい。

.sns-share-buttons {
    width: 100%;
    margin: 1em 0;
    text-align: center;
    list-style: none;
    padding-left:0!important;
}
.sns-share-buttons li {
    display: inline-block;
    width: 43px;
    height: 43px;
    margin: 3px;
    padding: 0!important;
    border-radius: 25px;
    vertical-align: middle;
    line-height:1em;
}
.sns-share-buttons li a {
    font-size: 1.5em;
    display: block;
    padding-top: 10px;
    text-align: center;
    box-shadow: 2px 2px 8px -2px #aaa;
    text-decoration: none;
    color: #fff!important;
    border-radius: 25px;
    height: 33px;
    transition: .3s;
}
.sns-share-buttons li a:hover {
    text-decoration: none!important;
    transform: translateY(-3px);
    cursor: pointer;
}
.sns-share-buttons .tweet a {
    background: deepskyblue;
}
.sns-share-buttons .facebook a {
    background: royalblue;
}
.sns-share-buttons .hatena a {
    background: dodgerblue;
}
.sns-share-buttons .pocket a {
    background: coral;
}
.sns-share-buttons .line a {
    background: limegreen;
}
.sns-share-buttons .pinterest a {
    background: tomato;
}
.sns-share-buttons .pinterest a:hover {
    cursor: pointer;
}
.sns-share-buttons .copylink a {
    font-family: arial;
    background: plum;
    font-size: 8px;
    color: #333!important;
}
.copylink a::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0ea" "\A";
    font-weight: 900;
    font-size: 22px;
    line-height: 1em;
    color: #fff!important;
}
.sns-share-buttons-title {
    margin: 2em auto 1em;
    font-weight: bold;
    text-align: center;
}

2019/09/19 追記: QooQ 向けの設置手順記事を書きました。

QooQユーザーの方、よろしければご参考に。

ファビコンふじろじっく
サムネイル
【QooQ】オリジナルSNSシェアボタンの設置
オリジナル SNS シェアボタンの設置手順～QooQ編
https://fujilogic.blogspot.com/2019/09/original-snssharebutton-for-qooq.html

参考にさせて頂いた記事

基本的なコードで参考にさせていただいたこちらのブログ(アリスト戦記)は閉鎖されたそうです。

ファビコンクロージング
就職することになりました！！のスクリーンショット
就職することになりました！！
関東圏で勤務中のシステムエンジニアのＩＴ系ブログです。
https://blog.aristo-solutions.net/2021/03/blog-post.html

コピーボタンはこちらを参考にさせていただきました。

ファビコン影織文庫
サムネイル
コピペで使える！ブログ記事タイトルとリンクをワンタップでコピーするボタン実装
https://www.kageori.com/2018/05/blog-post_11.html