SNSシェアボタンを作る方法

icon icon by Icons8

ブログなどによくあるSNSへのシェアボタンをページに追加したくなりました。各種SNSシェアボタンの具体的なカスタマイズ例も含めて書いていきます。

まず最初に注意点

シェアするURLやテキスト、ハッシュタグは以下のサイトを使ってエンコードしてください。エンコードしないと文字化けなどを引き起こす可能性があります。

https://tech-unlimited.com/urlencode.html

Twitterのシェアボタン

<a href="https://twitter.com/intent/tweet?text={text}&url={url}&hashtags={hashtags}?" onclick="window.open(this.href,'TWwindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;">ボタンに表示されるテキスト</a>
  • {text} :シェアするテキストを入力してください
  • {url} :シェアするURLを入力してください
  • {hashtags} :シェアするハッシュタグを入力してください、複数ある場合はカンマで区切ってください

カスタマイズしてみます

  • class名は twitter-share-button
  • シェアするテキストは こんにちは
    • エンコードすると %E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF
  • シェアするURLは https://kimulog.com/
    • エンコードすると https%3A%2F%2Fkimulog.com%2F
  • シェアするハッシュタグは blog と share
    • エンコードすると blog と share
  • ボタンに表示されるテキストは Twitter
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF&url=https%3A%2F%2Fkimulog.com%2F&hashtags=blog,share?" onclick="window.open(this.href,'TWwindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;">Twitter</a>

CSSは以下のように指定しました。

.twitter-share-button {
    width: 600px;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    background-color: #1da1f2;
}

完成形

Facebookのシェアボタン

<a href="http://www.facebook.com/share.php?u={url}" onclick="window.open(this.href,'FBwindow','width=650, height=450, menubar=no, toolbar=no, scrollbars=yes');return false;">ボタンに表示されるテキスト</a>
  • {url} :シェアするURLを入力してください

カスタマイズしてみます

  • class名は facebook-share-button
  • シェアするURLは https://kimulog.com/
    • エンコードすると https%3A%2F%2Fkimulog.com%2F
  • ボタンに表示されるテキストは Facebook
<a class="facebook-share-button" href="http://www.facebook.com/share.php?u=https%3A%2F%2Fkimulog.com%2F" onclick="window.open(this.href,'FBwindow','width=650, height=450, menubar=no, toolbar=no, scrollbars=yes');return false;">Facebook</a>

CSSは以下のように指定しました。

.facebook-share-button {
    width: 100px;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    background-color: #3b5998;
}

完成形

Pocketのシェアボタン

<a href="http://getpocket.com/edit?url={url}&title={title}" onclick="window.open(this.href, 'PCwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">ボタンに表示されるテキスト</a>
  • {url} :シェアするURLを入力してください
  • {title} :シェアするページのタイトルを入力してください

カスタマイズしてみます

  • class名は pocket-share-button
  • シェアするURLは https://kimulog.com/
    • エンコードすると https%3A%2F%2Fkimulog.com%2F
  • シェアするページのタイトルは 木村のブログ
    • エンコードすると %E6%9C%A8%E6%9D%91%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0
  • ボタンに表示されるテキストは Pocket
<a class="pocket-share-button" href="http://getpocket.com/edit?url=https%3A%2F%2Fkimulog.com%2F&title=%E6%9C%A8%E6%9D%91%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0" onclick="window.open(this.href,'PCwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocket</a>

CSSは以下のように指定しました。

.pocket-share-button {
    width: 100px;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    background-color: #ee4056;
}

完成形

noteのシェアボタン

<a href="https://note.mu/intent/post?url={url}&hashtags={hashtags}" target="_blank" rel="noopener">ボタンに表示されるテキスト</a>
  • {url} :シェアするURLを入力してください
  • {hashtags} :シェアするハッシュタグを入力してください、複数ある場合はカンマで区切ってください

カスタマイズしてみます

  • class名は note-share-button
  • シェアするURLは https://kimulog.com/
    • エンコードすると https%3A%2F%2Fkimulog.com%2F
  • シェアするハッシュタグは blog と share
    • エンコードすると blog と share
  • ボタンに表示されるテキストは noteで書く
<a class="note-share-button" href="https://note.mu/intent/post?url=https%3A%2F%2Fkimulog.com%2F&hashtags=blog,share" target="_blank" rel="noopener">noteで書く</a>

CSSは以下のように指定しました。

.note-share-button {
    width: 100px;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    background-color: #2cb696;
}

完成形

まとめ

CSSを変更するとSNSシェアボタンをさまざまなデザインで作ることができます。アイコンと組み合わせるとさらに良いかもしれません。