ブログ備忘録

【画像有】Twitterをブログに埋め込む方法を記録しました

SNS

ブログとツイッターを連携して使っていると、ブログ内にツイートを埋め込みたい場面って多々ありますよね。

何回かやっているのですが、埋め込み方を忘れてしまい、毎回検索しているので、自分なりにまとめて置くことにしました。

良くやる埋め込みは、次の3種類です。

Twitterの埋め込み
  1. 特定のツイートを埋め込む
  2. タイムラインを埋め込む
  3. フォローして欲しい

操作は簡単なんですが、すぐに忘れてしまうのです。

そりた
そりた
書いておけば忘れても良いわよね!

 

画像をたくさん使って細かく説明しています。ちょっと鬱陶しいなって思ったら、画像無し版がおススメです。

Twitterの特定のツイートを埋め込もう

やりたいことはこちら!

【要約】ツイートの埋め込み方
  1. 埋め込みたいツイートを右上にある矢印をクリック
  2. 「ツイートをサイトに埋め込む」を選択
  3. 表示されたコードを埋め込みたい場所に張り付ける

画像が見たい方は、この先をチェックして一緒にやってみましょう。

 

埋め込みたいツイートを表示

埋め込みたいツイートを表示します。これは自分のツイートでも人のツイートでも同じです。

埋め込みたいツイートの右上にある矢印をクリックして『ツイートをサイトに埋め込む』を選択します。

ツイートをサイトに埋め込む

表示されたコードをコピー

【このツイートをサイトに埋め込む】という画面が立ち上がるので、表示されているコードをコピーします。

このツイートをサイトに埋め込む

 

管理画面で【テキスト】タブを開く

WordPressの管理画面にて、【テキスト】タブを開きます。

テキストタブを開く

 

【テキスト】タブにコピーしたコードを貼り付け

埋め込みたい場所に、コピーしたコードを貼り付けます。

貼り付け

【ビジュアル】タブで表示の確認

【ビジュアル】タブに戻って、正しく表示されていることを確認します

↓これが実際に張り付いたツイートです。

これは簡単ですね!

 

タイムラインをブログに埋め込む

やりたいことはこちら!

私がタイムラインをブログに埋め込みたいと思うのって、次の2つくらいです。

タイムラインにブログを埋め込みたい時
  • サイドバーにタイムラインを表示させたい
  • プロフィールでタイムラインを表示させたい

だから、主に【新しいブログを作った時】と【ブログの見た目を変えるとき】くらいしか出会わない方法。覚えてなどいられませんよね。

そこで、タイムラインをブログに埋め込む方法を記録しておきます。

【要約】タイムラインを埋め込む
  1. タイムライン埋め込み用のページを開く
  2. アカウントを入力して進む
  3. 左側タイムラインを選択してコードをコピー
  4. ブログに貼り付ける

画像が見たい方は、この先をチェックして一緒にやってみましょう。

タイムライン埋め込み用のページを開きます

サイトはこちら ⇒ https://publish.twitter.com/

TwitterIDを入力して【→】をクリックします。

ツイッターID入力

タイムラインを選択

左側のタイムラインを選びます。

左選択

タグのコピー

表示されたタグをコピーするために、【Copy Code】をクリックします。

CopyCode

コピーされました

×を押して画面を閉じましょう

コピーされました

 

タグの貼り付け

WordPressの管理画面にて、【テキスト】タブを表示し、タイムラインを埋め込みたい場所に貼り付けます。

そのままだと、無駄に長くなってしまうので

<a>タグ内でサイズを指定するとスマートです。

※ data-width=”500″ data-height=”500″

こんな風に貼り付けられます。

 

フォローして欲しいとき

やりたいことはこちら!

【要約】フォローしてほしいリンクを表示させる
  1. タイムライン埋め込み用のページを開きます
  2. アカウントを入力して進む
  3. TwitterButtons⇒FollowButtonを選ぶ
  4. ブログに貼り付ける

画像が見たい方は、この先をチェックして一緒にやってみましょう。

途中まで【タイムラインをブログに埋め込む】方法と同じです。

タイムライン埋め込み用のページを開きます

サイトはこちら⇒https://publish.twitter.com/

TwitterIDを入力して【→】をクリックします。

ツイッターID入力

Twitterボタンを選択

右側の『TwitterButtons』を選択します。

右選択

Follow Buttonを選ぶ

FollowButtonを選ぶ

タグのコピー

表示されたタグをコピーするために、【Copy Code】をクリックします。

CopyCode

コピーされました

×を押して画面を閉じましょう

コピーされました

 

タグの貼り付け

WordPressの管理画面にて、【テキスト】タブを表示し、タイムラインを埋め込みたい場所に貼り付けます。

 

んな風に貼り付けられます。

 

おわりに

どうしても忘れてしまうことは、自分なりのマニュアルを作っておくと次回わからなくなった時に便利です。

 

そりた
そりた
ここまで書けば、
さすがにもう忘れないんじゃないの?

 

そう思いたいですけどね。

きっとまた次にツイートを埋め込みたい時にはここを見ているんですよ。
それが40代

 

あなたも、ツイートを埋め込みたい方は、是非参考にしてください。マニュアルを作るのが面倒な方はこちらをブックマークしていただいても・・・喜びます。

 

私がWordPessを勉強し始めたころから、愛用している本はこちらです。