【2021年 保存版】よく使うソーシャルボタン(SNSボタン)の設置ページまとめ
2021年5月16日
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
よく使うソーシャルボタン(SNSボタン)の設置ページまとめてをメモしました。
ソーシャルボタン(SNSボタン)とは?
ブログなどのWebページに設置してあるSNSのボタンです。
ユーザーがクリックするとそのページの情報をそのSNSの他のユーザへシェアしたりすることができます。
ソーシャルボタンの設置ページ
Facebookボタン設定のリンク先
Facebookボタンの使い方
- リンク先へアクセス
- いいね!ボタンを配置するウェブページのURLを設定する
- いいね!ボタンをカスタマイズする
- ボタンのプレビューを確認する
- [コードを取得]をクリック
- コードをコピーしてWebページに貼り付ける
Facebookボタン設定画面
Twitterボタンのリンク先
Twitterの使い方
- リンク先へアクセス
- ドロップダウンを使って、どの種類のコンテンツを使うかを選択
- ポップアップ表示されるHTMLコードをコピー
- コードをコピーしてWebページに貼り付ける
Twitterボタン設定画面
はてなブックマーク
はてなボタンのリンク先
はてなボタン使い方
- リンク先へアクセス
- ボタンのデザインを選択
- ボタンの設定を選択
- ボタンを確認
- コードをコピーしてWebページに貼り付ける
はてなボタン設定画面
LINE
LINEボタンのリンク先
!LINEボタン設定画面](img/post/memo/sns-button-hatena.jpg "Facebookボタン設定画面")
LINEボタンの使い方
- リンク先へアクセス
- URLを設定
- ボタンを設定
- ボタンを確認
- コードをコピーしてWebページに貼り付ける
LINEボタン設定画面
YouTube
YouTubeボタンのリンク先
YouTubeボタンの使い方
- リンク先へアクセス
- チャンネル名または ID:設定
- レイアウト:を選択
- テーマ:を選択
- チャンネル登録者数:を選択
- ボタンを確認
- コードをコピーしてWebページに貼り付ける
YouTubeボタン設定画面
Tumblr
Tumblrボタンのリンク先
Tumblrボタンの使い方
- リンク先へアクセス
- ボタンを選択
- 色を選択
- ボタンを確認
- コードをコピーしてWebページに貼り付ける
Tumblrボタン設定画面
記事Article
もっと見る- article
Dockerの利用していないゴミを掃除しディスクスペースを解放するいくつかのやり方を紹介
- article
Next.js のバンドルサイズを可視化する@next/bundle-analyzer の紹介
- article
VSCodeでTypescriptファイルのimport補完で相対パスではなくエイリアスするための設定
- article
UUIDより短いユニークなIDを生成できるnpmライブラリnanoidの使い方
- article
【解決方法】TypeScript発生したTS2564 エラーの対処
- article
express で IP を取得する際などに利用する req.connection 非推奨(deprecated)の対処