@suzu6

主にWEBと解析の技術について書きます。

広く浅くも続ければ深くなるはず。

Nuxtで作ったサイトに軽いSNSシェアボタンを設置した

いくつかのSNSボタンを貼り付けようと思ったが、コピペで済む良さげなものがないため自分で作ってしまいました。

公式のものはスクリプトの読み込みで遅くなったり、デザインがバラバラなため見送った。 シェアできれば良いので、ブックマークやいいねの数は表示は不要。 (数値が上がると嬉しいため、今後表示できるようにするかもしれません)

いろいろと探していたら、作れる気がしたのでNuxt用に作ってみました! Vue.jsでも少しの変更で導入できるかと思います。 早速この記事の上下にも配置してあります。

よろしければシェアおねがします<__>

できたもの

ボタン

Twitter, はてなブックマーク, Pocketの3つを用意しました。

Google+は2019年にサービスが終了します。 facebookとLINEは今後追加して行きたいと思います。

デザインは大きめのボタン風にして、幅がレスポンシブに変化します。 このブログではBulmaをCSSフレームワークとして利用しているおり、アイコンはWebフォントのMaterial Design Iconsです。

利用していないものもありますが、アイコンの宣言を載せておきます。

<!-- Twitter -->
<i class="mdi mdi-twitter"/>
<!-- facebook -->
<i class="mdi mdi-facebook"/>
<!-- google-plus -->
<i class="mdi mdi-google-plus"/>
<!-- Pocket -->
<i class="mdi mdi-pocket"/>
<!-- はてなブックマーク -->
<b>B!</b>
<!-- LINE -->
<b>LINE</b>

はてブとLINEはなかったので強調タグで囲みます。

コード

components/ShareButtons.vue

一つのファイルにまとめてありますが、見やすくするためtemplate, script, styleに分けてあります。

template

<template>
  <section class="section">
    <aside>
      <ul class="social-list">
        <li class="social-list-item">
          <a
            class="social-list-link icon-twitter"
            :href="twitterUrl()"
            target="_blank"
            title="Twitterで共有"
          ><i class="mdi mdi-twitter"/></a>
        </li>
        <li class="social-list-item">
          <a
            class="social-list-link icon-hatebu"
            :href="hatebuUrl()"
            target="_blank"
            :data-hatena-bookmark-title="encodeURIComponent(url)"
            title="このエントリーをはてなブックマークに追加"
          ><b>B!</b></a>
        </li>
        <li class="social-list-item">
          <a
            class="social-list-link icon-pocket"
            :href="pocketUrl()"
            target="_blank"
            title="pocketで共有"
          ><i class="mdi mdi-pocket"/></a>
        </li>
      </ul>
    </aside>
  </section>
</template>

script

<script>
export default {
  name: "ShareButtons",
  props: ["title"],
  data() {
    return {
      url: `https://www.suzu6.net${this.$route.path}`,
      twitter_url: "https://twitter.com/intent/tweet?url={0}&text={1}",
      hatebu_url:
        "http://b.hatena.ne.jp/add?mode=confirm&amp;url={0}&amp;title={1}",
      pocket_url: "http://getpocket.com/edit?url={0}"
    };
  },
  methods: {
    formatByArr(msg) {
      // フォーマット(引数可変(配列)版)
      var args = [];
      for (var i = 1; i < arguments.length; i++) {
        args[i - 1] = arguments[i];
      }
      // URLエンコード
      args = args.map(x => encodeURIComponent(x));
      return msg.replace(/\{(\d+)\}/g, function(m, k) {
        return args[k];
      });
    },
    // それぞれパラメータを埋め込む
    twitterUrl() {
      return this.formatByArr(this.twitter_url, this.url, this.title);
    },
    hatebuUrl() {
      return this.formatByArr(this.hatebu_url, this.url, this.title);
    },
    pocketUrl() {
      return this.formatByArr(this.pocket_url, this.url);
    }
  }
};
</script>

style

<style scoped>
.social-list {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
  margin-bottom: 60px;
}

.social-list-item {
  height: 40px;
  line-height: 40px;
}
.social-list-item {
  flex-grow: 1;
  height: 50px;
  line-height: 50px;
  min-width: 90px;
  text-align: center;
}
.social-list-link.icon-twitter {
  background: #00b0ed;
}
.social-list-link.icon-hatebu {
  background: #008fde;
}
.social-list-link.icon-pocket {
  background: #eb4654;
}
/* .social-list-link.icon-line {
  background: #00c300;
} */
.social-list-link {
  display: block;
  color: #ffffff;
}
a {
  color: inherit;
  text-decoration: none;
}
.content li + li {
  margin-top: 0;
}
</style>

使い方

親コンポーネント

<template>
  <!-- シェアボタンを置きたい位置 -->
  <share-buttons :title="title" />
</template>

<script>
import ShareButtons from "~/components/ShareButtons"

export default {
  components: {
    ShareButtons
  }
}
</script>

コンポートからimportしてShareButtonsを宣言する。 シェアボタンを設置したい位置に<share-buttons>を置く。

親からv-bindでtitleを渡してあげる。 ページのURLはShareButtonsの中で取得することができます。

他にも渡したいパラメータがある場合は、propsを拡張してください。

SNSシェアボタンの公式スタイル

それぞれ、htmlにコピペできるコードをくれる。

ただ、スクリプトの読み込みで遅くなったり、デザインがバラバラなためカスタマイズすることを選んだ。

参考にしたサイトとメモ

Google+, Facebook, Twitter それぞれのシェアリンクを HTML a タグから直接作る方法 | yu8mada

サイトのデザインに合わせてSNSシェアボタンをカスタマイズできるように、リンクだけでシェアできる方法です。 どのようなURLを入れたら良いかまとまっている。 クエリパラメータの解説もあるのでとても参考になった。

URLエンコード用のJavaScriptのみでできるため、シェアの数を表示しない場合はこちらの方法にするとよい。


WebサイトにSNSシェアボタンを設置&効果測定する方法のまとめ

SNSシェアボタンのためのメタタグやogpタグの実装例やGoogleアナリティクスと連携方法が載っている。 まだ、そこまでできていないので参考にして追加していきたい。


文字列のフォーマット(String.Format的な処理)

// 引数を埋め込む関数
formatByArr("url={0}&text={1}", url, text)

JavaScriptでこんな感じに、引数で渡したパラメータを埋め込んで文字列を返してくれる方法です。


Vue Router

Vue.jsのドキュメント。子要素の中でも$route.pathで現在のURLパスが取得できるのは便利。

NuxtだけでなくVueも勉強しないとダメですね。


コピペで簡単!CSSだけで作るSNSボタンデザイン[サンプルコード付]

ボタンのデザインはこのページを参考にした。 ただし、コピペの方ではない。記事の前後にあるボタンを参考にしている。

(おそらく)WordPressのプラグインかテーマのもので、良いまとまり感がある。 アニメーションも取り入れたい。


JavaScript で title と meta description の値を取得する

Nuxtの静的サイトでは使えなかった。

おわりに

ブックマークやいいね数の表示などリッチなことはできないが、URLだけでシェアボタンが機能することがわかった。 今回はNuxt用に作ったが、JavaScriptVue用に軽いものを作っておきたい。

この下に今回制作したボタンがあるので、たくさん押して確かめてみて下さい^^

書籍

Nuxtについての書籍はありますが、個人的には公式のドキュメントやGoogle先生頼りでいいかなと思います。 それよりも、Vueについての理解を深めると捗りますね。

Vue.js入門 基礎から実践アプリケーション開発まで
Posted at 2019.1.7
川口 和也, 喜多 啓介, 野田 陽平, 手島 拓也, 片山 真也
技術評論社