知識の枝

"All is well"

Twitterのシェアボタンを追加する方法

約240日前 2021年3月31日21:57
デジタル
ホームページ

改訂履歴


2021/3/31 投稿

1. 背景


※スマートフォン未対応です


インターネット上でブラウジングしていると、

 こんなボタンをみかけますよね?

TwitterやInstagramといったSNSへ記事や情報を共有する為のボタンです。

本ブログには今までこういったボタンは設置しておりませんでした。
最近Twitterを始めたので自分で記事を引用できるよう配置してみました。

やり方を調べたので本記事で共有します。


2. ゴール


記事にTwitterのシェアボタンを追加する。


3. 方法


やり方はTwitterのヘルプに書いてあります。
もう少し詳しく説明したいと思います。
Twitter - 自分のウェブサイトにTwitterボタンを追加する方法

上のリンク先に飛ぶと

1. ブラウザでhttps://publish.twitter.com/に移動します。

とあるので、移動しましょう。



おしゃれなページに移動したら下のほうへスクロールし、
Twitter Buttons を選択します。



使いたいボタンを選択する画面が表示されます。
ここでは Share Button を選択しましょう。



あとは出てきたコードをコピーするだけです。





コピーしたコードはこんな感じです。

 <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" 
class="twitter-share-button"
data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このコードをhtmlの任意の場所にそのまま貼り付けるだけでボタンが表示されます。

こんな感じになります。



クリックするとTwitterに移動し、ボタンを押したサイトのURLが引用される形でツイートできるようになります。




4. ボタンのカスタム


ボタンをカスタムすることでツイート内容やハッシュタグを予め設定することが可能です。
カスタムする場合は set customization options をクリックしましょう。



設定項目がいくつか出てきます。



上から順に解説します。

4.1 - 本文の内容変更


Do you want to prefill the Tweet text?

ツイート本文の内容を変更可能です。
ここに入力した文字列がツイートのデフォルト文字列として表示されます。



4.2 - URLの変更


Do you want to set a specific URL in the Tweet?

貼り付けるURLを変更可能です。
ここに入力したURLがツイートのデフォルトURLとして表示されます。



4.3 - ユーザー名の追加


Would you like this Tweet to include your screen name?

引用元がTwitterアカウントを持っている場合はここにユーザー名を入力すると良いでしょう。
ツイート本文に「@ユーザー名」の形で追加されます。



4.4 - ハッシュタグの追加


Would you like to set a hashtag for the Tweet?

ツイート本文に「#ハッシュタグ」の形でハッシュタグを追加可能です。
ハッシュタグが1つの場合は「#」は入力不要です。
複数設定する場合、2つ目以降は「#○○○」として同じボックス内に追加していきましょう。

4.5 - 推奨アカウントの追加


Do you want to recommend accounts?

ここは追加しても特に何も変わらなかったです。
一応設定しておくと、ツイート時におすすめのTwitterユーザーが表示されるようです。

4.6 - ボタンサイズ


How would you like the button displayed?

「Large Button」のチェックを入れるとボタンが大きくなります。

<チェック前>


<チェック後>


4.7 - 言語設定


What language would you like to display this in?

設置されたツイートボタンに表示される言語の設定です。
Automatic の場合はボタンが設置されたページの言語が適用されます。
この記事のページの場合は「ツイート」になります。

例えばこれを English に変更すると、
 このように英語になります。


5. さいごに


意外と簡単にできるので、設置してみて下さい。
お疲れ様でした。