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

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

今回はシェアボタンを作っていきます！

シェアボタンとは
シェアボタンの種類
シェアボタンの作り方
パターン①　公式のボタン作成機能を使う
パターン②　自分で作成したボタンにシェア機能をくっつける
さいごに

シェアボタンとは

Twitter や Line などでシェアするときに使うボタンです。
押すとアプリに飛んで、ツイートや共有ができます。

▽こんなのです。

ワードプレスだと自動で作ってくれるものが多いので、
今回は自作する方向けに書きます。

シェアボタンの種類

シェアボタンはSNSアプリが出しているシェア機能と自作のボタンをつなぐものです。

つまり、SNSアプリがシェア機能を出していない場合、シェアボタンは作れません。

▽2022年11月時点でのシェア機能の有無について調べました。

[シェア機能あり]
・Twitter
・Line
・Facebook
・はてなブックマーク
・Pocket
・Feedly など

[シェア機能なし]
・Instagram
・TikTok　など

インスタや TikTok がシェア機能を提供していないのは意外でした。

今回は特に需要のありそうな
「Twitter」「Line」「Facebook」のシェアボタンを作ります。

シェアボタンの作り方

作り方は2種類あります。

①公式が出しているシェアボタン作成機能を使う
②自分で作成したボタンにシェア機能をくっつける

①の方が圧倒的に楽ですが、ある程度ボタンの形が決まってしまいます。
②は自分で作ったボタンや好きな画像でもシェアができますが、ちょっと手間です。

それぞれ説明していきます。

パターン①　公式のボタン作成機能を使う

公式がシェアボタン作成機能を提供しています。

▽それぞれのURL
・Twitter
・Line
・Facebook

それぞれのやり方をご紹介します！

※シェアボタンはサーバー経由じゃないと表示されないみたいです。
Windowsの方はXAMPP、Macの方はMAMPなどを使用してご覧下さい。

▽Twitter

▽HTMLを作って
先ほど取得したコードを body内にはります！

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

  <head>
    <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>
    <!-- ツイッターのシェアボタン -->
    <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
      data-url="https://nakanishi-s.jp" data-show-count="false">Tweet</a>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </body>

</html>

▽先ほど作成したボタンが表示されました！
ボタンを押すとTwitterアプリが開き、シェアができます。

▽Line

▽HTMLを作り、
先ほど取得したコードを body内にはります！

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

  <head>
    <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のシェアボタン -->
    <div class="line-it-button" data-lang="ja" data-type="share-b" data-env="REAL" data-url="https://nakanishi-s.jp"
      data-color="default" data-size="large" data-count="true" data-ver="3" style="display: none;"></div>
    <script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async"
      defer="defer"></script>
  </body>

</html>

▽先ほど作成したボタンが表示されました！
ボタンを押すとLineアプリが開き、シェアができます。

▽Facebook

▽HTMLを作り、
先ほど取得したコードを body内にはります！

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

  <head>
    <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のシェアボタンの設定 -->
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v15.0"
      nonce="kz4VmNM6"></script>

    <!-- facebookのシェアボタンの本体 -->
    <div class="fb-share-button" data-href="https://nakanishi-s.jp" data-layout="button" data-size="small"><a
        target="_blank"
        href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fnakanishi-s.jp%2F&src=sdkpreparse"
        class="fb-xfbml-parse-ignore">シェアする</a></div>
  </body>

</html>

▽先ほど作成したボタンが表示されました！
ボタンを押すとFacebookアプリが開き、シェアができます。