気になる備忘録

VPSやWordPressの設定記録、ゲームや趣味から時事評論まで気になる事を書き残す

WordPress

ツイートをサイドバーに表示してみる

wordpress-logo-002

投稿日:

プラグインが必要だと思って後回しにしてたけど、実はtwitter公式サイトでウィジェットのコードを発行するだけでよかった模様。

機能追加などで作成方法がよく変わるみたいなので、意味があるかどうか不明だけど
2016年12月11日現在での作成方法をメモとして残しておく。

スポンサードリンク

twitter公式サイトでコードの作成

1.ツイッター公式サイトの自分のページの設定画面を開く

2.メニューからウィジェット選択⇒新規作成⇒プロフィールを選択

161211_ss4161211_ss5

又は、
https://publish.twitter.com/
へ直接アクセス

3.自分のツイッターURLを入力

%e7%84%a1%e9%a1%8c

4.オプションの選択

今回はタイムラインを表示させたいので、Embedded Timeline を選択。

この時点で、下にコードが表示されるが まだコードをコピーせず
set customization options. を選択して詳細オプションの設定をする。

161211_ss2

5.詳細オプションの設定

161211_ss3

  • 詳細設定は上から順に、
  • 表示サイズ
  • 表示カラー
  • 言語
  • おすすめユーザー欄に表示してもいいかどうか
    (チェックを入れると表示しない)

以上の中で、Height だけは入力することを推奨
入力しないと、ものすごく長いタイムラインが表示されます。

入力したら、Update を押す。

6.表示されてるコードをコピーする

WordPressでウィジェットの設定

表示させたい場所へ、テキストウィジェットを配置し、内容の部分にコードを貼り付ければ完了!!

実に簡単でした。

追加でカスタマイズ

twitterウィジェットの標準背景は白or黒 しか設定できないのですが、手動オプションを設定することで、外観のカスタマイズが可能です。

コンパクトなツイートのリストの周囲に表示される枠を制御するには、data-chrome属性を設定します。外観を表す各要素のトークンをスペースで区切って指定します。

noheader タイムラインのヘッダーを非表示にします。Twitterのアトリビューションやソースタイムラインへのリンクなど、Twitterの表示要件は、実装するサイト側で独自に追加する必要があります。
nofooter タイムラインのフッターとツイートコンポーザーのリンクを非表示にします (選択したタイプのタイムラインウィジェットに含まれている場合)。
noborders ウィジェット領域を囲む境界線やツイートの区切り線など、ウィジェット内の境界線をすべてなくします。
noscrollbar メインタイムラインのスクロールバーを非表示にします (表示される場合)。標準のユーザーインターフェースコンポーネントを非表示にすると、ウェブサイトのアクセシビリティに影響する可能性があるので注意してください。
transparent ウィジェット背景を透明にします。

引用( https://dev.twitter.com/ja/web/embedded-timelines )

との事なので、現在のページデザインにあわせる為に、背景色を透視化してみました。

コードに

data-chrome=”transparent”

を挿入するだけでOK。

 

ツイッターウィジェット内のボタン類が見難いという、若干の問題点はありますが とりあえず満足

スポンサードリンク

広告

広告

-WordPress


comment

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

関連記事

wordpress-logo-002

プラグインを2つ追加

1.ソースコード等を記事上に表示するプラグイン 昨日の、ファイルアップロード制限を上げる記事を書く際に 他のブログでよく見るコマンドとか設定ファイルの内容を表示する [crayon-5ba72d5f3 …

wordpress-logo-002

カテゴリーの順番を並び替える

カテゴリーが増えてきたので、並び順を整理しようと。他のブログでは普通にあったので、どこかにあるだろうと、カテゴリーに関するメニューをあれこれ触ってみたけど・・・ どうやらWordPressの標準機能に …

wordpress-logo-002

RSSを利用して、ブログの更新状況を表示

ブログ工房のHPに、このブログの更新情報を載せるように設定。 今後作成するブログも同様にリスト化して表示する予定なんだけど・・・どうしてもデザインがダサくて悲しい。 ほんとセンス無いんだよなぁ。 CS …

no image

色々デザインを変えてみた

↑記事タイトルをこんな感じに ↓見出しをこんな感じに スポンサードリンク h2タグ見出し h3タグ見出し サイドウィジェットをこんな感じに。 デザインサイトを見てたら、グラデーション見本のページにたど …

wordpress-logo-001

ブログ表示に障害発生中⇒解決

表示できず、サーバーに負荷が掛かるのを回避する為に 表示可能なテーマでの仮表示中です。 その為、デザインや色々と崩れてます。 5月11日 14:20 頃、無事回復しました。 やはり、プラグインのアプデ …

検索

管理人のシルビアです。
広島県在住。
熱しやすく冷めやすい慎重派。
興味のある事はトコトン調べてから行動。始める前に冷める事も・・・