ブログにTwitterのタイムラインを埋め込む方法

ブログに自分のタイムラインを埋め込むことができます。

前回紹介した「ブログにTwitterの特定のツイートを埋め込む方法」と同様、Word Pressで作成したブログ(ホームページ)だけでなく無料ブログでも埋め込む事ができます。

 
Word Pressのサイドバーにプラグイン『Twitter』を使用して埋め込む方法とプラグインを使用しない方法をご紹介します。

スポンサーリンク

 

 

目 次
1.タイムラインの種類
2.ブログにタイムラインを埋め込む方法
2-1.埋め込むコードを取得する
2-2.表示のカスタマイズ
3.Word Pressのサイドバーに埋め込む方法
3-1.サイドバーに埋め込む方法
3-2.プラグイン『Twitter』を使用して埋め込む方法

※プラグイン『Twitter』を利用してサイドバーに埋め込む場合はコードの取得は必要ありません。『3-2.プラグイン『Twitter』を使用して埋め込む』へ進んでください。
ただし、投稿/固定ページに埋め込む場合はコードを取得する必要があります。

 

Twitterのタイムラインにはいくつか種類があります。

・プロフィール:自分のツイート
・いいね:特定のユーザーがいいねしたすべてのツイート
・リスト:自分が作成または保存した公開リストのツイート
・検索:カスタマイズされた検索結果をリアルタイムで表示

今回は一番上のプロフィールのタイムラインの埋め込み方法を紹介します。

 

まずはコードの取得をするのですが、Twitterのヘルプなどを見ると、[自分のアイコン]をクリックしメニューを開き、[設定とプライバシー]→[ウィジェット]→[新規作成]→タイムラインの選択とあります。
これはパソコンのみのようです。(URLの『mobile.』部分を削除すればタブレットでもPCサイトは見られます。)

スマホ・タブレットの方は下記URLからコードを取得してください。

    Twitter Publish │ https://publish.twitter.com/#
 

[上の自分のアイコン]→[設定とプライバシー]→[ウィジェット]→[新規作成]または上記リンク

右下のアイコンをクリック。(たぶん上の部分が大きく表示されるので下にスクロールすると出てきます。)

ダイアログが出ますので、囲ってある部分に自分のプロフィールのURLを入力して[Preview]をクリック。
《注意》タブレットやスマホの場合、URLが『https://mobile.twitter.com/あなたのアカウント』になっています。
黄色い部分のmobile.は削除してください。

下にプレビューが出ます。
これでいい場合は①のコードを[Code Copy]でコピーしてください。

サイズ/テーマの色/リンクの色を変更する場合は②をクリックしてください。

スポンサーリンク

 

下にプレビューが表示されますので、プレビューをみながら設定してください

③ Hight(px):幅

高さを設定してください。

④ Width(px):高さ

幅を設定してください。

⑤ テーマの色

『Light(白)』か『Dark(濃いグレー)』を設定してください。

⑥ ツイート内のリンクの色

ツイート内のリンクの色を選択してください。

⑦ 表示する言語の選択

表示する言語を選択してください。(『Automatic(自動)』のままでいいと思います。)

設定が完了したら、[Update]をクリックしてよければコードをコピーしてください。

 
これでコードは取得できたので、あとはブログのページやサイドバーに貼り付ければ表示されます。

 

Word Pressのサイドバーに埋め込む方法を紹介します。

Word Press管理画面→[外観]→[ウィジェット]

[テキスト]を表示したいウィジェットに追加し、「テキストエディタ」に切り替える。
下の本文欄にコードを貼り付けて[保存]してください。

 

プラグイン『Twitter』を使うとコードを取得しなくてもタイムラインを埋め込む事ができます。

※プラグインのインストール/設定方法は上記ページをみてください。

 
Word Press管理画面→[外観]→[ウィジェット]


[Twitter Profile]を表示させたいウィジェットに追加して、下記項目の設定を行ってください。

・Twitterのアカウント
・テーマの色:明るい=Light(白)/暗い=Dark(濃いグレー)
・ヘッダーやフッターなど表示したくないものにチェックを入れてください
・幅と高さ(px)を指定してください

設定したら保存してください。

プラグインを使用するとプロフィール以外のタイムライン、フォローボタンなどをサイドバーに簡単に埋め込む事ができます。
(投稿画面/固定ページに埋め込む場合はコードを取得する必要があります。)

 
以上がブログにTwitterのタイムラインを埋め込む方法です。
タイムラインを埋め込めばTwitterアカウントを持っていない人でもツイートを見ることが出来ます。

こちら(きらり☆彡)のTwitterアカウントは主に更新情報しかツイートしていませんが、プライベートアカウントの方では日常的なことをツイートしています♪
プライベートブログ(Crescent Moon http://crescent-moon.site)にタイムラインを設置してありますので覗いてみてください♪

スポンサーリンク

 
★ブログランキングに参加しています。

人気ブログランキング

ブログランキング・にほんブログ村へ
にほんブログ村

返信を残す

メールアドレスが公開されることはありません。