$type=carousel$columns=4$cat=hide$show=home

$hide=page-404-mobile

サイドバーにTwitterのタイムラインウィジェットを設置する方法

Twitterは、ウェブサイトとの連携する機能が豊富に用意されているのが特徴です。Twitterのウィジェットを使用すると記事内やサイドバーにツイートやタイムラインを埋め込むことができます。

本記事では、パソコン画面のサイドバーにTwitterのタイムラインウィジェットを設置する方法を紹介します。

[post_ads]


サイドバーにTwitterのタイムラインウィジェットを設置する方法

Twitter タイムライン ウィジェットの作成

パソコンのブラウザでTwitterのページを表示して、ページの右上のアカウントアイコン(ツイート作成ボタンの左隣)をクリックするとドロップダウンメニューが表示されます。メニュー項目の中の「設定とプライバシー」を選びます。
設定ページの左の項目の中から、[ウィジェット]をクリックすると、ウィジェット作成ページが表示されます。[新規作成]のボタンを押します。
作成するウィジェットの種類を選ぶドロップダウンメニューが表示されます。

現在、以下の5種類のウィジェットが用意されています。
  • プロフィール
  • いいね
  • リスト
  • コレクション
  • 検索
ここでは、プロフィールを選びます。
"What would you like to embed?" (何を埋め込みたいですか?)と言うメッセージが表示されます。その下にある入力欄に埋め込むTwitter プロフィールのURLを入力します。
埋め込みタイムラインかTwitterボタンの選択画面が表示されます。ここでは、埋め込みタイムラインを選びます。
埋め込みタイムラインウィジェットが作成され、コードとプレビューが表示されます。ウィジェットはサイズなどのカスタマイズが可能です。"Set customization options"をクリックします。

カスタマイズ設定できるのは、以下の5項目です。
  • 高さ
  • 明るい or 暗い
  • リンクカラー
  • 言語
設定した項目の内容に応じて、リアルタイムでウィジェットがプレビュー表示されます。

ここでは、高さ550px、幅300pxを設定しました。設定後、[Update]ボタンを押します。
カスタマイズ設定更新後のウィジェットのコードとプレビューが表示されます。[Copy Code]ボタンを押して、コードをコピーします。

Twitter ウィジェットをBloggerのサイドバーに設置する

作成したTwitterウィジェットのコードをサイトに設置します。ここではBloggerでの例を紹介しますが、基本的なやり方はWordPress等、他のCMSでも同じです。

Bloggerの管理メニューからレイアウトを選びます。サイドバーのガジェットエリア内の「ガジェットを追加」をクリックします。
ウィジェットを選択する小ウィンドウが表示されます。「HTML/JavaScript」を選びます。

タイトルを入力(オプション)してコンテンツの欄に作成してコピーしたTwitterウィジェットのコードを貼り付けます。
[保存]ボタンを押すと、ガジェットのウィンドウが閉じて、Bloggerのレイアウトに戻ります。サイドバーに追加したガジェットが表示されます。

ガジェットの配置は、ドラッグアンドドロップで簡単に変更可能です。ここでは、Twitterタイムラインウィジェットをサイドバーの下に移動しています。

作業は以上です。ブログを表示して、サイドバーにTwitterタイムラインウィジェットが表示されているか確認します。

記事での説明は長めですが、実際の作業は比較的簡単です。本記事の内容をYouTubeの動画でも紹介しています。よろしければ、ご覧になって下さい。(本設定の場合は、動画の方が簡単で、分かりやすいかもしれません。)

コメント

BLOGGER

関連記事とスポンサーリンク

Name

AdSense,4,Blogger SEO,11,Blogger ニュース,2,Blogger 活用法,22,Bloggerの基本機能と使い方,12,Bloggerの基本設定,7,MagOne,4,SNS,4,お勧め記事,16,お知らせ,1,その他,1,
ltr
item
Blogger101@ブロギングライフ : サイドバーにTwitterのタイムラインウィジェットを設置する方法
サイドバーにTwitterのタイムラインウィジェットを設置する方法
Twitterは、ウェブサイトとの連携する機能が豊富に用意されているのが特徴です。本記事では、パソコン画面のサイドバーにTwitterのタイムラインウィジェットを設置する方法を紹介します。
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_p0stBXFWQ2xm0RQ4TphIKavmK988fapdDQyVF57VDfoUStGqPskkJn1NNmcYWvsAk0ew6vZ1GeJi6xkhfUuHd05y_wCozd16frCE8Iv28stwcvfbd3p1VNbw1QFTS9A-DFjT8tte16c/s400/Choose+Twitter+setting+from+dropdown+menu.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_p0stBXFWQ2xm0RQ4TphIKavmK988fapdDQyVF57VDfoUStGqPskkJn1NNmcYWvsAk0ew6vZ1GeJi6xkhfUuHd05y_wCozd16frCE8Iv28stwcvfbd3p1VNbw1QFTS9A-DFjT8tte16c/s72-c/Choose+Twitter+setting+from+dropdown+menu.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/01/set-up-twitter-timeline-widget-on-sidebar.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/01/set-up-twitter-timeline-widget-on-sidebar.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む 返信 返信をキャンセル 削除 By Home ページ 投稿 全てを見る 関連記事 ラベル アーカイブ SEARCH 全ての投稿 お探しのページが見つかりませんでした。 ホームに戻る Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy 目次