Mono Works

チラシのすきま

Twitterのウィジェットをサイドメニューに埋め込み

ブログページのサイドメニューにTwitterのウィジェットを埋め込んでみました。ほぼ「おはようございます。」ツイートですが、ご容赦ください。

2016-10-12-twitter-widget00

ウィジェットの作成

ウィジェット作成者でTwitterにログインした状態で、Twitterの設定ページを開き、ウィジェットの新規作成検索をクリック。

2016-10-12-twitter-widget01

検索クエリにタイムラインで表示させたいアカウントなりキーワードを入力して、ウィジェットを作成をクリック

2016-10-12-twitter-widget02

このコードをコピーして~の上にコードが表示されるので、コピペします。

2016-10-12-twitter-widget03

コードは、こんな感じでaタグとscriptタグで構成されます。これを表示させたい場所に貼り付けます。

<a class="twitter-timeline"  href="https://twitter.com/search?q=pporoch" data-widget-id="786193363162714112">pporochに関するツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

ウィジェットのカスタマイズ

ウィジェットをカスタマイズする方法は、こちらに書かれていて、こんな感じにしました。

<a class="twitter-timeline"
  href="https://twitter.com/search?q=pporoch"
  data-widget-id="786193363162714112"
  height="360"
  data-chrome="noheader nofooter noborders">
  pporochに関するツイート
</a>

おしまい。

コメント

コメントなどありましたら、GitHubのディスカッションへお願いします。(書き込みには、GitHubのアカウントが必要です)
執筆者
"ぽぽろんち" @pporoch
pporoch120
Mono Worksの中の人。好きなことをつらつらと書き留めてます。
ギターを始めてから 練習動画をYouTubeにアップしてます。ご笑納ください。
"DQX@ぬここ(UD487-754)、コツメ(NO078-818)"
採用案内