シェアボタンをつくろう！2

こんにちは。なかにしです。

前回に続き、シェアボタンの解説をしていきます。

パターン②　自分で作成したボタンにシェア機能をくっつける
前提： OGPについて
共通のOGP設定
Twitter
LINE
Facebook
さいごに

パターン②　自分で作成したボタンにシェア機能をくっつける

せっかくシェアボタンを自作するなら、できること全部やろう！

ということで今回はただシェアするだけでなく
「画像添付」した状況でシェアをさせてみたいと思います。

前提： OGPについて

画像添付をさせるためには「OGP」を理解する必要があります。

▽OGPとは

OGPとは、Open Graph Protcol の略で、FacebookやTwitterなどのSNSでシェアした際に、Webページのタイトルや概要、イメージ画像、URL含めた詳細情報を正しく伝えるためのHTML要素のことです。
https://seolaboratory.jp/64252/#:~:text=OGP%E8%A8%AD%E5%AE%9A%E3%81%A7%E3%81%AF%E3%80%81%20OGP%E3%81%AE,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%82%82%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%99%E3%80%82

ざっくりの流れとしては、

①OGP設定でウェブサイトに画像を持たせる
②シェアボタンを押す
③アプリ(Twitter等)に移動した際に画像を添付する

です！

共通のOGP設定

OGPはFacebook社が始めたものですが、
TwitterやLINEもOGPに対応していますので、共通の設定が可能です。

▽完成系はこちらです。

<!DOCTYPE html>
<html lang="ja">

  <!-- OGP設定の宣言 -->
  <head prefix="og: https://ogp.me/ns#">

    <!-- OGP設定 -->
    <meta property="og:title" content="なかにしが日頃の技術をまとめています。" />
    <meta property="og:description" content="エンジニアである「なかにし」が日頃使用した技術をまとめているブログです。" />
    <meta property="og:image" content="https://nakanishi-s.blog/sample/onsen.jpg" />

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カスタムシェアボタン</title>
  </head>

  <body>
  </body>
</html>

上から順に説明していきます！
可変部分は「content=””」の部分です！

▽html or headタグに以下を追加します。

prefix="og: https://ogp.me/ns#"

今からOGP設定をするよ！っておまじないです。

▽Titleの設定

<meta property="og:title" content="なかにしが日頃の技術をまとめています。" />

content=””の中にシェアする際のタイトルを設定します。

▽Descriptionの設定

<meta property="og:description" content="エンジニアである「なかにし」が日頃使用した技術をまとめているブログです。" />

content=””の中に自分がシェアする際の説明文を設定します。

▽画像の設定

<meta property="og:image" content="https://nakanishi-s.blog/sample/onsen.jpg" />

content=””の中に自分がシェアする際に添付する画像を設定します。
※http or https から始まる絶対パスで指定します。

Twitter

▽TwitterのみHead内に以下を追記します。

<meta name="twitter:card" content="summary_large_image">

content=””の中は「Summary Card」「Summary Card with Large Image」「Player Card」「App Card」の4種類のどれかを指定します。

Summary Cardは普通サイズ、
Summary Card with Large Imageは大きめの画像が添付されます。

Player Cardは動画用、
App Cardはアプリ用に使います。

OGPとTwitter Card の設定ができていれば、
どんな風に表示されるか、イメージ画像の確認ができます。

「OGP 設定確認」などで調べれば出てきます。
OGP確認ツールやラッコツールズあたりが見やすいです。
※確認前にサーバーに上げる必要があります。

▽「Summary」「Summary Large」のイメージ

あとはシェア機能を付けたいものを用意し、以下のコードで囲みます。

<a href="https://twitter.com/share?url={シェアしたいURL}target="_blank" data-show-count="false">
     //ここにシェア機能を付けたいものを入れる
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

url={シェアしたいURL}にURLを設定します。

Twitterの場合は「ツイート時の本文」「ハッシュタグ」を追加で設定することができます。

本文は「&text={追加したいテキスト}」
ハッシュタグは「&hashtags={追加したいハッシュタグ}」で設定します。

ちなみに改行は「%0a」です。

aタグの間にボタンや画像を入れると、それにシェア機能が付きます。

▽完成版はこちら

<!DOCTYPE html>
<html lang="ja">

  <!-- OGP設定の宣言 -->

  <head prefix="og: https://ogp.me/ns#">

    <!-- OGP設定 -->
    <meta property="og:title" content="なかにしが日頃の技術をまとめています。" />
    <meta property="og:description" content="エンジニアである「なかにし」が日頃使用した技術をまとめているブログです。" />
    <meta property="og:image" content="https://nakanishi-s.blog/sample/onsen.jpg" />

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カスタムシェアボタン</title>
  </head>

  <body>

    <!-- Twitter -->
    <a href="https://twitter.com/share?url=https://nakanishi-s.blog&text=なかにしの技術ブログをみんなに拡散しよう！%0a&hashtags=なかにし" target="_blank"
      data-show-count="false">
      <button>シェア！！</button>
    </a>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

  </body>
</html>

LINE

シェア機能を付けたいものを用意し、以下のコードで囲みます。

<a class="link_to_sns" href="https://social-plugins.line.me/lineit/share?url={シェアしたいURL}"
      target="_blank" rel="nofollow noopener noreferrer">
     // ここにシェア機能を付けたいものを入れる
</a>
<script type="text/javascript">LineIt.loadButton();</script>

url={シェアしたいURL}にURLを設定します。

aタグの間にボタンや画像を入れると、それにシェア機能が付きます。

▽完成系がこちら

<!DOCTYPE html>
<html lang="ja">

  <!-- OGP設定の宣言 -->

  <head prefix="og: https://ogp.me/ns#">

    <!-- OGP設定 -->
    <meta property="og:title" content="なかにしが日頃の技術をまとめています。" />
    <meta property="og:description" content="エンジニアである「なかにし」が日頃使用した技術をまとめているブログです。" />
    <meta property="og:image" content="https://nakanishi-s.blog/sample/onsen.jpg" />

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カスタムシェアボタン</title>
  </head>

  <body>

    <!-- LINE -->
    <a class="link_to_sns" href="https://social-plugins.line.me/lineit/share?url=https://nakanishi-s.blog"
      target="_blank" rel="nofollow noopener noreferrer">
      <button>シェア!!</button>
    </a>
    <script type="text/javascript">LineIt.loadButton();</script>

  </body>
</html>

Facebook

シェア機能を付けたいものを用意し、以下のコードで囲みます。

<a href="http://www.facebook.com/share.php?u={シェアしたいURL}" rel="nofollow noopener" target="_blank">
  // ここにシェア機能を付けたいものを入れる
</a>

u = {シェアしたいURL}にURLを設定します。

aタグの間にボタンや画像を入れると、それにシェア機能が付きます。

▽完成系がこちら

<!DOCTYPE html>
<html lang="ja">

  <!-- OGP設定の宣言 -->

  <head prefix="og: https://ogp.me/ns#">

    <!-- OGP設定 -->
    <meta property="og:title" content="なかにしが日頃の技術をまとめています。" />
    <meta property="og:description" content="エンジニアである「なかにし」が日頃使用した技術をまとめているブログです。" />
    <meta property="og:image" content="https://nakanishi-s.blog/sample/onsen.jpg" />

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カスタムシェアボタン</title>
  </head>

  <body>
    <!-- Facebook -->
    <a href="http://www.facebook.com/share.php?u=https://nakanishi-s.blog" rel="nofollow noopener" target="_blank">
      <button>シェア！</button></a>
  </body>

</html>