001

今回はみなさんご存知のSNS『Twitter』のタイムラインウィジェットをカスタマイズしよう!っていうお話です。
現在デザインが変更されましたが、方法は同じです!

Twitterタイムラインウィジェットとは?

スクリーンショット 7Twitterウィジェットとはこれのことですw

スマホでご覧の方は知らないかもしれませんが、PCでご覧お方はサイドバーにあると思います。
最近、Bot関連を整理しなんですが、まぁ、それは良くて、僕の個人アカウントのタイムラインは、よく見るようなタイムラインだと思います。ですが、『MUSIC NOW』 すなわち、僕が聞いている曲を垂れ流しているアカウントがあるのですが、それの表示は少し違います。

スクリーンショット 8


WordPressの時にプラグインを使っていたのですが、HTMLでもできたので紹介します。 

ウィジェットを作る!

ここで普通にTwitterウィジェットを作ります。
スクリーンショット_9
僕のオススメとして、黄色はONの方がいいと思います。なぜなら、返信や個人的な話がタイムラインに出てしまうと相手のプライバシーの関係もありますので。
画像はURLでもわからないのでビュジュアルで捉えられた方あいいと思うのでね。


緑の『後から変更可』とありますが、このような設定を全てHTMLで全てするので変にここではいじらない方がいいかもしれません。

必ず『カスタマイズ機能を無効にする』はOFFにしておいてください!
 できましたら、『ウィジェットを作成』を押してください。そうすると、プレビューの下にHTMLが表示されますので、コピーしましょう。
僕の場合だとこうなってます。
<a class="twitter-timeline" href="https://twitter.com/Y20010920T" data-widget-id="698567456864890880">@Y20010920Tさんのツイート</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" data-widget-id="ウィジェットID" href="https://twitter.com/intent/user?user_id=ユーザーID" data-user-id="ユーザーID">
これだけ短くなります。
する必要はないのですがこの方が下降するときに探しやすいでしょう。

ウィジェットIDとは

ウィジェットIDとはウィジェット毎に振られるIDです。
HTML上では
 <a class="twitter-timeline" href="https://twitter.com/Y20010920T" data-widget-id="698567456864890880">@Y20010920Tさんのツイート</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> 
黄色区なっているところです。こちらがウィジェットIDになります。
それ以外にもWeb上で見ることができますので、各ウィジェットページに行ってください。 
スクリーンショット_4


ユーザーIDとは?

ユーザーIDとは、ユーザー毎に振られるIDの事です。
ですが、このIDは『@Y20010920T』(以後スクリーンネーム)というIDではありません。
スクリーンネームは変更することが可能ですが、ユーザーIDは退会しない限りIDを変えることはできません。 

取得は、Syncerさまを使わせていただきます。
Twitter IDチェッカー
https://syncer.jp/twitter-screenname-userid-converter
スクリーンショット 5

こちらでスクリーンネームを入力するとユーザーIDを取得することが可能です。
sfd

こんなプログラミングが組めるようになりたい。。。

カスタマイズ

では本題のカスタマイズに入りましょう。

横幅調整

デフォルトでカスタマイズできますが、この記事通りにやった人はカスタマイズしてないでしょう。
 <a class="twitter-timeline" data-widget-id="ウィジェットID" href="https://twitter.com/intent/user?user_id=ユーザーID" width="サイズ" data-user-id="ユーザーID">
 サイズの単位は『px』です。

ヘッダー消去

ヘッダーとはこのことです。
スクリーンショット_7
どうすればいいかというと
 <a class="twitter-timeline" data-widget-id="ウィジェットID" href="https://twitter.com/intent/user?user_id=ユーザーID" data-chrome="noheader" data-user-id="ユーザーID">
赤いところを追加すればOKです。

フッター消去

フッターとはこのことです。
スクリーンショット_7
どうすればいいかというと
<a class="twitter-timeline" data-widget-id="ウィジェットID" href="https://twitter.com/intent/user?user_id=ユーザーID" data-chrome="nofooter" data-user-id="ユーザーID">
赤いところを追加すればOKです。

境界線消去

境界線とはこのことです。
スクリーンショット_7
どうすればいいかというと
<a class="twitter-timeline" data-widget-id="ウィジェットID" href="https://twitter.com/intent/user?user_id=ユーザーID" data-chrome="noborders" data-user-id="ユーザーID"> 
赤いところを追加すればOKです。

スクロールバー消去(スクロール禁止)

スクロールバーとはこのことです。
スクリーンショット_7
(突然スクロールバーが現れたのはお気になさらずw)
<a class="twitter-timeline" data-widget-id="ウィジェットID" href="https://twitter.com/intent/user?user_id=ユーザーID" data-chrome="noscrollbar" data-user-id="ユーザーID"> 
赤いところを追加すればOKです。

背景消去

背景を消すことができます。
現在は背景が白いので、大半の場合大丈夫だと思いますが、背景を色を変えている方や写真にしている方は設定しましょう。
 <a class="twitter-timeline" data-widget-id="ウィジェットID" href="https://twitter.com/intent/user?user_id=ユーザーID" data-chrome="transparent" data-user-id="ユーザーID"> 
赤い部分を追加してください。

境界線色を変更

境界線の色を変えてみるとこのような色になります。
70d5f0c7
コードは
 <a class="twitter-timeline" data-widget-id="ウィジェットID" href="https://twitter.com/intent/user?user_id=ユーザーID" data-border-color="カラーコード" data-user-id="ユーザーID"> 
からコードには、『HTML カラーコード』 『RGB数値』を使用します。
聞きなれない言葉ですが簡単です。『#』から始まる数値ですね。
サイトで簡単に取得できますので安心してください。
HTMLカラーコード
http://html-color-codes.info/japanese/
スクリーンショット 8
HTMLカラーコード


写真・画像から取得したい場合は、またもやSyncerさまのサイトを利用させていただきます。
イメージカラーピッカー Ver2
https://syncer.jp/image-color-checker
スクリーンショット 9
rg
『画像の色一覧』でTOPにあるものが画像の主体だと言えるでしょう。

この二つがあればほぼ無敵です。

表示数を設定

表示数をしているることができます。
僕中では一番必要だと思います。『NOW MUSIC』 で使いますからねw
スクリーンショット 8
 こういうことができます。
 <a class="twitter-timeline" data-widget-id="ウィジェットID" href="https://twitter.com/intent/user?user_id=ユーザーID" data-tweet-limit="表示つぶやき数" data-user-id="ユーザーID"> 
 表示つぶやき数は数字です。そして、新たなつぶやきがあっても更新しない限り表示されません。

最後に

今回は少し長くなってしまいましたねw
ですが僕自身これを知ってかなり見やすくなったので良かったと思います。
昔はオススメユーザーなどの設定もできたんですが、今も出来るのかな?でも、返信ボタンが見当たらないのでどうなるんでしょう。

では!また!