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

2019/05/09

ウィジェット デザイン



テーマ編集は必ず予めバックアップを取ってから行って下さい。
スクショは Contempo テーマのものを貼っています。

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

スクリプトコードの設置


①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/>  の下に設置するとシェアボタンが記事の下部(コメント欄の上辺り)に、上に置くと記事上部(記事タイトルの下辺り)に表示されます。

<!--SNS Share Buttons-->
           <b:if cond='data:view.isPost'>
<div style='margin:2em auto 1em;font-weight:bold;text-align:center'>この記事をシェアする</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:1em'>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=500,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[
var clipboard = new ClipboardJS('.copy_btn');
$(function(){
  var title = $('title').text();
  var url = location.href;
  $('.copy_btn').click(function(){
    $(this)
      .attr('data-clipboard-text', title + ' ' + url)
      .css("cursor","text")
      .css("line-height","12px")
      .css("background","#ccc")
      .css("transform","none")
      .css("box-shadow","none")
      .text("COPIED");
  });
});
//]]>
</script>
      </li>
   </ul>
</b:if>

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

コードについて

  • リンクコピーには jQuery を使用しますが、既に導入済みの場合はタグを削除してもOKです。
    リンクコピーのアイコンは Font Awesome を CSS疑似要素で表示しています。(コピー機能が効かなくなる不具合回避のため)
    コピーボタンを押した後はこのように変化します。→
  • Vaster2, ZELO, QooQ 等、既にオリジナルのSNSボタンが実装されているテーマの場合は、当該の HTML や CSSコードを探して丸ごと入れ替えて下さい。

2019/09/19 追記

QooQ 向けの設置手順記事を書きました。
QooQユーザーの方、よろしければご参考に。

image
【QooQ】オリジナルSNSシェアボタンの設置
オリジナル SNS シェアボタンの設置手順~QooQ編
https://fujilogic.blogspot.com/2019/09/original-snssharebutton-for-qooq.html



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);
}
.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;
}


参考にさせて頂いた記事

image
Bloggerに自作のSNS共有ボタンを設置する
関東圏で勤務中のシステムエンジニアのIT系ブログです。
https://blog.aristo-solutions.net/2018/07/bloggersns_24.html

image
コピペで使える!ブログ記事タイトルとリンクをワンタップでコピーするボタン実装
https://www.kageori.com/2018/05/blog-post_11.html