EDIT

オリジナル SNS シェアボタン 【JavaScript 版】(2021/05/14: コードをアップデートしました)

｜2023/09/06 ｜10
アイキャッチ

元々ツイート用のブックマークレットとして使っていた JavaScript コードをシェアボタン用に改造してみました。JavaScript 化することにより、ツイート時の不具合が解消されています。Twitter 以外の SNS のコードもついでに JavaScript 化させてありますが機能的な変化は特にないですw
既に当ブログで紹介しているシェアボタンコードを使われている環境では、CSSはそのまま転用可能で、HTML コードを入れ替えるだけで使えます。

QooQ 用カスタマイズ記事

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

QooQ 以外のテーマ用記事

ファビコンふじろじっく
サムネイル
オリジナルデザインのSNSシェアボタンを付ける
ふじろじっく仕様のかわいい丸型デザインです。リンクコピー機能も付いてます。
https://fujilogic.blogspot.com/2019/05/original-sns-sharebuttons.html

旧コードとの違い

  • Twitterでのシェアの時、記事タイトルに半角の # や & や % や | が含まれていてもバグりません。
    ちなみに公式テーマ以外のツイートボタンでは # や & が含まれると、それ以降の文字列が消えてしまい、% や | が含まれるとエラーになってツイート不能になってしまいます。
  • シェアウインドウが画面の中央にポップアップ表示されます。
    Twitter 以外の機能的な変化はこれだけです(^^;

注意点

QooQ のように SNS ボタンが上下にある場合、上側の方しか機能しなくなります。

素人考えで単純に <a class='tweet_btn' title='ツイートする'> にして getElementById を getElementsByclassName に変えたらいけるんじゃね？と思いついてやってみたものの、上手くいきませんでした。JavaScript って難しいね(~_~;)…JSに詳しい方はご自身で改良してみてくださいw
私と同じくそんなの無理！という方は、この記事の手順を参考に片一方のシェアボタンタグを無効にしてください。

2021/05/14追記: コードをアップデートしました

カスタマイズでいつもお世話になっている Fuma さんに、コメントで改善方法を教えて頂きました！ありがとうございますm(_ _)m
早速試してみた所、上下のボタン共に問題なく機能することを確認しましたので、コードも改善版にアップデートしておきました。

カスタマイズ手順

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。

① Font Awesome アイコン準備

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

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

② HTML コードの設定

Pinterest とコピーリンクのコードは旧コードのまま弄ってません。
jQuery を導入済みの場合は Copy Link の所にあるタグは削除しても大丈夫です。

HTML コードの設置位置

QooQ の場合は <div class='single-share'> ～ </div> の部分を丸ごと下記のコードと入れ替えます。
QooQ 以外のテーマの場合は <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 id='tweet_btn' onclick='popup1()' title='ツイートする'>
        <i class='fab fa-twitter'/>
        </a>
    <script>
      //<![CDATA[
            function popup1() {var w=550,h=550;window.open("https://twitter.com/intent/tweet?url="+encodeURIComponent(location.href)+"&text="+encodeURIComponent(document.title),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")};
            //]]>
    </script>
  </li>
  <!--Facebook-->
  <li class='facebook'>
    <a id='fb_btn' onclick='popup2()' title='シェアする'>
        <i class='fab fa-facebook-f'/>
        </a>
    <script>
      //<![CDATA[
            function popup2() {var w=550,h=420;window.open("https://www.facebook.com/sharer.php?u="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")};
            //]]>
    </script>
  </li>
  <!--はてな-->
  <li class='hatena'>
    <a id='hatena_btn' onclick='popup3()' title='はてなブックマークに登録'>
        <span style='font-weight:bold;font-family:verdana;line-height:22px'>B!</span>
        </a>
    <script>
      //<![CDATA[
            function popup3() {var w=550,h=420;window.open("https://b.hatena.ne.jp/entry/panel/?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")};
            //]]>
    </script>
  </li>
  <!--Pocket-->
  <li class='pocket'>
    <a id='pocket_btn' onclick='popup4()' title='Pocketに保存'>
        <i class='fab fa-get-pocket'/>
        </a>
    <script>
      //<![CDATA[
            function popup4() {var w=550,h=420;window.open("https://getpocket.com/edit?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")};
            //]]>
    </script>
  </li>
  <!--LINE-->
  <li class='line'>
    <a id='line_btn' onclick='popup5()' title='LINEで送る'>
        <i class='fab fa-line'/>
        </a>
    <script>
      //<![CDATA[
            function popup5() {var w=550,h=420;window.open("https://social-plugins.line.me/lineit/share?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")};
            //]]>
    </script>
  </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='font-weight:bold;line-height:1em' title='タイトルとURLをコピーする' />
    <script src='//ajax.googleapis.com/ajax/libs/jquery/3.6.0/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("transform","none").text("COPIED").attr("title","コピーしました")})})
            //]]>
    </script>
  </li>
</ul>
</b:if>

③ CSS コードの設定

既に当ブログで紹介しているシェアボタンコードを使われている環境では CSS の追加・変更は不要です。

CSS コードの設置位置

QooQ は /* SNSボタン */ 以下のコードを下記のコードと入れ替えます。
QooQ 以外のテーマの場合は ]]></b:skin> の上辺りにコピペしてください。

QooQ 以外のテーマ(Emporio や Essential 等)でボタンが丸でなく縦長になってしまう場合は、
.sns-share-buttons li a の height の値を 33px に変えてみてください。

/* SNSボタン */
.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: 43px; /*QooQ以外で縦長になる場合は 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 .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;
}

最後に

もし何かしら不具合があったり、ご質問等がありましたら、お気軽にコメントでお知らせください。
また、複数のシェアボタンでも機能する方法が分かる方、教えて下さいw