スポンサーリンク

スポンサーリンク

ブログ WordPress SNS

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

2018年4月14日

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

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

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

 

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

 

スポンサーリンク

 
 

タイムラインの種類

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のサイドバーに埋め込む方法を紹介します。

サイドバーに埋め込む

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

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

 

プラグイン『Twitter』を利用して埋め込む

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

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

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


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

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

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

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

 
 

最後に

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

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

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
Blog People ⇒ Blog People

お問い合わせはこちら Contact

 

おすすめ

おすすめ

-ブログ, WordPress, SNS

Scroll Up

Copyright© きらり☆彡 , 2018 All Rights Reserved Powered by STINGER.