サイト制作に関するメモ書き

HOME > その他 > Twitterのタイムラインを埋め込む

Twitterのタイムラインを埋め込む

Twitterのタイムラインをページ内に埋め込んでみます。

ユーザータイムライン

Twitterにログイン後、ウィジェット設定ページにアクセスし、右上の新規作成 > プロフィールをクリックします。

各項目入力してウィジェットを作成します。

embed-a-twitter-timeline01

埋め込みたいユーザーのURLを入力して、右側の矢印をクリックします。

embed-a-twitter-timeline02

Embedded Timelineを選択します。

embed-a-twitter-timeline03

下部に埋め込みタブが表示されるので、コピーして埋め込みたいページに貼り付けます。

embed-a-twitter-timeline04

以下のような埋め込みタグになります。

<a class="twitter-timeline" href="https://twitter.com/cly7796net">Tweets by cly7796net</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

ユーザータイムライン埋め込みのデモページ
 

検索結果タイムライン

ウィジェット設定ページ右上の新規作成 > 検索をクリックします。

embed-a-twitter-timeline05

検索クエリに表示したい検索文字列を指定して、残りの設定項目を設定します。
設定が完了したら、ウェジットを作成をクリックします。

embed-a-twitter-timeline06

画面右下に埋め込みタグが表示されました。

embed-a-twitter-timeline07

以下のような埋め込みタグになります。

<a class="twitter-timeline"  href="https://twitter.com/hashtag/%E6%B4%B2%E5%B4%8E%E8%A5%BF" data-widget-id="777064933750026240">#洲崎西 のツイート</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>

検索結果タイムラインのデモページ
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP