このページは移転しました。
ブログをするならTwitterの活用は必須。
本日は、ブログにTwitterパーツを埋め込む方法を解説します。
- ツイートボタン
- フォローボタン
- ツイート
- タイムライン
「ツイートボタン」と「フォローボタン」は必須。
「ツイート」をブログに貼り付ける方法も覚えておいた方がいいでしょう。
「タイムライン」はサイトが重くなるので使わないという人も多いですが
こういうものもあることは知っておきましょう。
ツイートボタン（シェアボタン）
ツイートボタンというのはこういうのです。
Tweet
このボタンをブログの末尾に置くと、記事を読み終わった読者が感想をツイートしやすくなります。
埋め込みコードの取得方法
ツイートボタンは以下のURLから作ることができます。
（Twitter社の公式ページです）
https://publish.twitter.com
上記のURLにアクセスしたら以下の順にクリックしていきましょう。
1. Twitter Buttons
2. Share Button
3. set customization options
「set customization options」から
ツイートボタンの設定を変更できます。
ボタンのサイズだけはLarge Buttonを選び
その他の部分は変更しないのがおすすめです。
「Do you want to prefill the Tweet text?」
ツイートのテキストを設定できます。
空欄にすれば自動的に「記事のタイトル」がツイートに入ります。
空欄がおすすめ。
「Do you want to set a specific URL in the Tweet?」
ツイートにつけるURLを設定できます。
空欄にすれば自動的に「記事のURL」がツイートに入ります。
空欄がおすすめ。
「Would you like this Tweet to include your screen name?」
ツイートに「＠ユーザー名」を設定できます。
自分のTwitterユーザー名を設定しておくと、誰かがツイートしたときにTwitterで通知を受け取れます。
空欄がおすすめ。
「Would you like to set a hashtag for the Tweet?」
ハッシュタグを設定できます。
空欄がおすすめ。
「Do you want to recommend accounts?」
ツイートボタンを押した人におすすめユーザーを表示できる。
自分のTwitterユーザー名を設定するのがおすすめ。
「How would you like the button displayed?」
ボタンのサイズを選べます。
「Large Button」にチェックを入れるのがおすすめ。
「What language would you like to display this in?」
ボタンの中の文字を「Tweet」にしたり「ツイート」にしたり言語設定が選べます。
「Automatic」なら自動的に読者に合わせた表示をしてくれます。
「Automatic」がおすすめ。
「Opt-out of tailoring Twitter」
Twitterにサイト閲覧のデータを送るかどうか。
「Opt-out」にチェックを入れるとデータを送信しない。
チェックを外すとデータを送信する。
チェックを外すのがおすすめ。
Twitterは誰がどのサイトでツイートボタンを押したかを記録しています。
それらの記録にもとづいて
「このユーザーは車のサイトを良く見る」
「食べ物のサイトを良く見る」
などの傾向を判断します。
そして、「おすすめユーザー」や「Twitter広告」などを表示するときに活用しています。
「Opt-out」のチェックを外してTwitterにデータを送信しておけば、
自分のサイトが閲覧されたという実績がTwitterに伝わります。
上記の画面で「Copy Code」をクリックすると以下のようなコードがコピーされています。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-related="toeicmantenblog" data-show-count="false"> Tweet</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"> </script>
このコードをブログ記事の本文に貼り付けると「ツイート」という青いボタンが表示されます。
ブログの中で好きな位置に貼り付けて使いましょう。
大きいボタン
Tweet
小さいボタン
Tweet
このツイートボタンをクリックすると、
以下のようなツイートを作成する画面が開きます。
ボタンを設置したページの「記事タイトル」と「記事URL」が自動でツイートに埋め込まれます。
（オプションで設定を変更すればトップページのURLを入れたり、定型文を入れたりすることも可能）
このコードは1回だけ取得すればOK。
記事を書くたびに作業をする必要はありません。
コードはメモ帳などのテキストに保存しておいてブログを書くたびに再利用をしましょう。
フォローボタン
フォローボタンというのはこういうのです。
Follow @toeicmantenblog
このボタンを設置すると、ブログを気にいった読者があなたをTwitterでフォローできるようになります。
フォロワーを獲得するとTwitterで記事の更新をお知らせすることで読者がリピーターとなってくれます。
埋め込みコードの取得方法
Twitterのフォローボタンもツイートボタンと同じく以下のURLから作ることができます。
https://publish.twitter.com
上記のURLにアクセスしたら以下の順にクリックしていきましょう。
1. Twitter Buttons
2. Follow Button
ここで、「@username」を入力する画面が登場します。
@usernameというのはTwitterのプロフィール画面で名前の下に出てくる「@○○○○」
のような部分です。
これを入力して「Preview」ボタンを押しましょう。
「set customization options」を押すと
フォローボタンの設定を変更できます。
「Hide Username」と「Large Button」にチェックを入れ「Update」を押しましょう。
（好みに応じて設定を変更しても大丈夫です）
「Hide Username」
フォローボタンに「＠ユーザーネーム」を表示するかどうか
「Large Button」
ボタンを大きくするかどうか
「Copy Code」ボタンが出てくるのでクリックしましょう。
以下のようなコードがコピーされています。
<a href="https://twitter.com/toeicmantenblog?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-related="toeicmantenblog" data-show-screen-name="false" data-show-count="false"> Follow @toeicmantenblog</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"> </script>
これをブログに貼り付けると下のようなフォローボタンが表示されます。
名前なし、大きいボタン
Follow @toeicmantenblog
名前なし、小さいボタン
Follow @toeicmantenblog
名前あり、大きいボタン
Follow @toeicmantenblog
名前あり、小さいボタン
Follow @toeicmantenblog
「set customization options」でどうチェックを入れるかで上記の4パターンのボタンを選べます。
一番上の「名前なし、大きいボタン」がおすすめです。
ツイート
ツイートをブログに埋め込むと以下のような表示になります。
ブログにツイートを埋め込むと
— まんてん🉐教えるブロガー (@toeicmantenblog) July 20, 2019
ツイートの中の文章は
引用文として扱われる
SEO的に引用文は
そのページのコンテンツとしてはカウントされない
そのため、
ツイートを引用しつつも
重要なことは本文でも改めて述べた方がいい
参考資料として、自分のツイートや他人のツイートをブログに掲載することができます。
埋め込みコードの取得方法
ツイートの埋め込みコードを取得するときは
ブログに貼り付けたいツイートを選んで、ツイートの横にあるボタンから操作を開始します。
以下の順でクリックをしてください。
1. ツイートの右上にあるｖ
2. ツイートを埋め込む
フォローボタンを作った時と同じようなTwitterの埋め込みコード作成用のページに飛びます。
「Copy Code」というボタンがあるのでクリックしてコードをコピーしましょう。
コピーしたコードをブログに貼り付ければツイートを埋め込むことができます。
ブログにツイートを埋め込むと
— まんてん🉐教えるブロガー (@toeicmantenblog) July 20, 2019
ツイートの中の文章は
引用文として扱われる
SEO的に引用文は
そのページのコンテンツとしてはカウントされない
そのため、
ツイートを引用しつつも
重要なことは本文でも改めて述べた方がいい
タイムライン
タイムラインをブログに埋め込むと以下のようになります。
ツイートが単発の発言なのに対して、
タイムラインはあなたの最近の発言を連続して見せることができます。
埋め込みコードの取得方法
Twitterのタイムライン用のブログパーツも以下のURLから作ることができます。
https://publish.twitter.com
「Embeded Timeline」をクリックしましょう。
以下のような画面が開きます。
このとき、別途Twitterで自分のプロフィール画面を開きURLをコピーしましょう。
URLを「Paste a URL」のところに貼り付け「Preview」ボタンを押します。
次に、「set customization options」をクリックし
タイムライン用の設定をカスタマイズしましょう。
Height（px）：高さ
Width（px）：幅
などが設定できます。
HeightとWidthを空欄にしてしまうと
WEBサイト10ページ分くらいのとんでもなく長い表示になってしまいます。
Heightに1000
Widthに300
くらいの数値がおすすめです。
（幅300＝スマホに対応したサイズ、高さ1000＝ツイート2～3個分の長さ）
オプションの設定が終わったら「Copy Code」をクリックします。
以下のようなコードがコピーされます。
<a class="twitter-timeline" data-width="300" data-height="1000" href="https://twitter.com/toeicmantenblog?ref_src=twsrc%5Etfw"> Tweets by toeicmantenblog</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"> </script>
タイムラインの埋め込みコードをブログの好きな所に貼り付けましょう。
一般的にはサイドバーにタイムラインを貼りつける場合が多いです。
タイムラインを本文に貼り付けると以下のような表示になります。
（Height:1000px、Width:300px）
まとめ
本日は、Twitterの埋め込み用コードを作成する方法を見てきました。
取り上げたのは以下の4つ
- ツイートボタン
- フォローボタン
- ツイート
- タイムライン
ツイートはその都度コードを取得する必要がありますが
それ以外の3つは1度の作成でOK。
メモ帳などにコピーしておき、記事を書くときに再利用しましょう。
特に「ツイートボタン」と「フォローボタン」は
すべての記事に設置することをおすすめします。
お知らせ
最後までお読みいただきありがとうございます。
この記事は参考になりましたか？
役に立ったという方はブックマークをお願いします。
読者登録は以下のボタンから
Twitterでこの記事を書いた人をフォローする場合はこちら
Follow @toeicmantenblog
この記事をツイートする場合はこちらからお願いします。
Tweet
