• 2018-07-24
ウズマスター戦記
ウズマスター戦記 https://www.uzumax.org/2018/07/bloggersns.html

Bloggerに自作のSNS共有ボタンを設置する


Bloggerには元から「共有ボタン機能」が備わっていますが、これが低性能でどうにもイマイチ。。。
そこで私は自作の共有ボタンを設置しています。

このブログの共有ボタンのソースを大公開です。

デフォルト共有ボタンのショボさ


Blogger の共有ボタンのショボさに萎えた人は多いのではないでしょうか。
管理コンソールのレイアウト画面で設定出来るレイアウトはコレですからね。

ブロガーのデフォルトの共有ボタン

これはショボい。
SNS全盛のこの時代は気軽に自分のブログを共有して貰えることは必須です。

ここは面倒ですが自作で乗り切るしかありませんね。

Bloggerらしい実装をしてみよう

SNSボタンを自分で作る時の検索キーワードは「SNS 共有ボタン 自作」ですが、これだと出てくる記事の内容は主にWordPressにボタンを埋め込むというPHPソースになっていることが多いです。

そうでなければ、JavaScriptでパラメータを取得してセットする方式ですが、JavaScriptをゴニョゴニョやるのはプログラマーである私に言わせれば最終手段。
JavaScriptゴニョゴニョ戦術は端末依存でバグを起こす可能性など、信頼性が余り良くありません。
本当にそれ以外では出来ない時だけ使う手です。

せっかくBloggerを使っているんです。
であれば、Bloggerタグを使用したBlogger実装で実現使用ではありませんか。

実装方法

管理コンソールの [テーマ] 画面から [HTMLの編集] に遷移します。

Bloggerのテーマ

BloggerのテーマからHTMLの編集へ

ここで自分のブログの表示したいスイートスポートにBloggerタグを駆使したソースを叩き込むことで実現します。

ソースの方は以下に張るものをコピペして頂ければ良いと思いますが、それをどこに挿入すれば良いかというスイートスポットの方は個人毎に異なります。

そこは各自で頑張ってください。

事前準備:FontAwesome導入

ここで大事なことを一つ。
自作の共有ボタンを作るうえで、どこからツイッターなどの画像を持ってくるかという点ですが。


一般的にはこれはjpgやgifなどの直球画像ではなく、アイコンフォントという技術で実現していることが多いです。

アイコンフォントライブラリは沢山ありますが、ネットで人気の「Font Awesome」を使うことにしました。

以下の感じにソースをHTMLに挿入してFont Awesomeを読み込めるようにして下さい。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

このサンプルはバージョン5.1.1のものです。
Font Awesomeは随時更新されているので、これから導入する人は公式サイトから最新のものを持ってくると良いでしょう。

BloggerHTMLソース公開

では、BloggerのHTML編集に流し込むソースの大公開です。

<style>
div.sns-share-buttons{
    margin-top:0.5em;
    margin-bottom:1em;
    margin-left:auto;
    margin-right:auto;
    width:99%;
}

.sns-share-buttons div{
  text-decoration: none;
  margin-top: 0;
}

.sns-share-buttons ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.sns-share-buttons ul:after {
  display: block;
  clear: both;
  content: &#39;&#39;;
}

.sns-share-buttons li {
  float: left;
  width: 32%;
  margin: 0.1em !important;
  padding: 0 !important;
}
.sns-share-buttons li a {
  font-size: 14px;
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.sns-share-buttons li a:hover {
  opacity: .8;
  text-decoration: none;
}
.sns-share-buttons li a:visited {
  color: #fff;
}

.sns-share-buttons .tweet a {
  background-color: #55acee;
}
.sns-share-buttons .facebook a {
  background-color: #315096;
}
.sns-share-buttons .googleplus a {
  background-color: #dd4b39;
}
.sns-share-buttons .hatena a {
  background-color: #008fde;
}

.sns-share-buttons .line a {
  background-color: #00c300;
}
.sns-share-buttons .pocket a {
  background-color: #EE4256;
}

.sns-share-buttons .icon-hatena{
  font-style: normal;
  font-weight:bold;
}
@media(max-width: 768px) {

  .sns-share-buttons li span {
    display:none;
  }
}
</style>
<div class='sns-share-buttons'>
<div>
   <ul>
      <!--ツイートボタン-->
      <li class='tweet'>
         <a expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;|&quot; + data:blog.title + &quot; &amp;url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'>
            <i class='fab fa-twitter'/><span> tweet</span>
         </a>
      </li>
      <!--Facebookボタン-->
      <li class='facebook'>
         <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title + &quot;|&quot; + data:blog.title' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'>
            <i class='fab fa-facebook-f'/><span> facebook</span>
         </a>
      </li>
      <!--Google+ボタン-->
      <li class='googleplus'>
          <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'>
            <i class='fab fa-google-plus-g'/><span> Google+</span>
          </a>
      </li>
   </ul>
</div>

<div>
   <ul>
      <!--はてなボタン-->
      <li class='hatena'>
        <a expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'>
            <i class='icon-hatena'>B!</i><span> </span><span> はてブ</span>
         </a>
      </li>
      <!--LINEボタン-->
      <li class='line'>
         <a expr:href='&quot;https://line.me/R/msg/text/?mode=confirm&amp;url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'>
            <i class='fab fa-line'/><span> LINE</span>
         </a>
      </li>
      <!--pocketボタン-->
      <li class='pocket'>
         <a expr:href='&quot;https://getpocket.com/edit?url=&quot; + data:post.canonicalUrl + &quot;&amp;&quot; + data:post.title + &quot;|&quot; + data:blog.title' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'>
            <i class='fab fa-get-pocket'/><span> Pocket</span>
         </a>
      </li>
   </ul>
</div>
</div>

ちょっと長くて萎えるかもしれませんが、2018年7月時点ではこのソースで以下の表示を実現しています。

画面サイズに応じて「大きいバージョン」と「小さいバージョン」が自動的に切り替わる「レスポンシブWebデザイン方式」を採用しています。

パソコンで表示していてもブラウザのサイズを小さくすればスマホっぽくなりますので試してみてください。

大きい画面で表示時の自作SNS共有ボタン

小さい画面で表示時の自作SNS共有ボタン

補足

ザッとは上のソースを張るだけで動はずです。

しかしやはり、ブログのデザインは各自違うものですから、微妙な隙間とかは各自で調整するしかありません。

上のソースもある程度の参考、叩き台としては使えますが、やっぱり最後は自分の力が頼りになると思います。

ブログ作りも楽ではありません。

4 件のコメント:

  1. 初めまして。
    こちらの記事を参考に、拙ブログにも簡単にSNSボタンを設置することが出来ました。
    ありがとうございます。
    それにしてもBloggerのデフォルトのシェアボタンってデザインが古すぎますよね(^^;

    返信削除
    返信
    1. お役に立てて良かったです。
      Bloggerって痒いところで手間取らされるんですよね。。。

      削除
  2. こんにちは。
    はてブに関してですが、クリックした時のリンク先が登録画面ではなかったため以下のように修正しました。
    以上ご参考まで。

    <!--はてなボタン-->
    <li class='hatena'>
    <a expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.canonicalUrl'

    ⇩リンク先を以下に変更⇩

    <!--はてなボタン-->
    <li class='hatena'>
    <a expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.canonicalUrl'

    返信削除
    返信
    1. ご連絡ありがとうございます。
      ちょっと本件を調べてみました。こちらの記事をご覧頂ければと思います。

      https://www.uzumax.org/2018/07/blog-post_26.html

      削除

お気軽にコメント下さい。