Twitterのタイムラインをサイトに埋め込む方法 – コードをユーザー毎に変化させるには?

この記事は約3分で読めます。
スポンサーリンク

当サイトには広告が含まれています。

Twitterのタイムラインをサイトに埋め込むのには、Twitetrにログインした状態で、

x.com

にアクセスして、ウィジェットを作成する必要がある。

ウィジェット

すると、以下のようなコードが得られる。

<a class="twitter-timeline" href="https://twitter.com/user" data-widget-id="000000000000000000">@userさんのツイート</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>

「user」というユーザーのタイムラインを表示するものだが、別のユーザーの場合はどうするか?

コードの中で「user」とあるのは1行目の2箇所なので、コードの「user」となっている部分を、以下のようにするなどして変化させるとOKなように思われる。

<a class="twitter-timeline" href="https://twitter.com/<?PHP print $user ; ?>" data-widget-id="000000000000000000">@<?PHP print $user ; ?>さんのツイート</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>

が、data-widget-idも変化させないと、ユーザーが切り替わらない!

そのdata-widget-idを得るためには、ウィジェットを作成する必要がある。

つまり、ユーザー毎にウィジェットを作成する必要があり(data-widget-idとユーザーが1対1ということ)、非常に面倒というか、現実的ではない。

以前のコードではコードの改変だけでOKであり、また、ログインの上ウィジェットを作成などしなくても意図したコードを得ることができたが(=コード作成者はTwitterのアカウントすら不要)、今はできなくなっている。

関連:Embedded User Timeline

関連:公式Twitterウィジェットの設定を自動生成するJavaScriptを書いた

タイトルとURLをコピーしました