2014年に制作した記事を2015/11に加筆修正
Twitter社が提供しているウィジェットを使って、タイムラインを埋め込む方法です。
基本、コードをコピペするだけで設置できます。
<div class="timeline"> <a class="twitter-timeline" href="https://twitter.com/search?q=%81%96%81%96%81%96%81%96%81%96%81%96" data-chrome="noheader nofooter noborders transparent" width="220" height="302" data-widget-id="******************">＊＊＊＊＊＊に関するツイート</a> </div>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
<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>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
作成したタイムラインのソースをコピーすると上記のようなhtmlのほかにこのようなスクリプトも一緒にコピーされます。
htmlとともに適切な個所にはりつけると、タイムラインが有効になります。特にカスタマイズの必要はありません。
html4やxhtmlのときはscriptタグにtype属性を追加しても問題なく動作します。
.timeline{
max-width: 400px;
height:300px;
height:300px;
padding:1px 1px 1px 4px;
margin:0 auto;
border:solid 1px #c3c3c3;
background:#ffd;
}
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
サンプルではコピペしたソースをclass[timeline]を指定した親タグで囲っていますが、中央寄せにしたり、枠線を付けたりするためです。
サンプルは上記のようなcssになっています。
わざわざウィジェットを作らなくても、apiのパラメーターを設定すればできそうなものですが、どうやらウィジェットの設定を保存しておかないとうまく非表示にならないようです（このあたりは反映のタイミングやキャッシュが原因の可能性もあるので断言できません）。
埋め込みタイムラインは幅や高さ、ボーダーの有無など、ある程度見た目のカスタマイズは可能なものの、data-chrome属性だけではフォントなどの変更はできません。
cssで変更できるといいなーというのが人情ですが、タイムラインのウィジェットのjsが実行されると、html上ではiframeに置き換わってそこにタイムラインを読み込むわけで、iframe内の要素の変更は外側からできないのが難点です。
そこで、iframe内にアクセスしてしまえば、何とかなるんじゃないかなーと考えてくれた人がいるので、下のリンクのwebページを参考にjQueryでアクセスしてみます。
jqueryライブラリはすでに読み込んでいるものとします。
$(window).load(function() {
function changeWidget() {
var twFrame = $('iframe.twitter-timeline');
if (twFrame.length > 0) {
twFrame.contents()
.find('head').append('');
} else {
setTimeout(changeWidget, 500);
}
}
changeWidget();
});
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
サンプルの場合、cssファイルはこんな風になっています。
@charset "utf-8";
html, body, .SandboxRoot, h1, h2, h3, blockquote, p, ol, ul, li, iframe, button{font-family:"メイリオ", Meiryo, sans-serif !important;}
.twitter-timeline{background: none !important;}
a:link, a:visited,.stats span,.byline,.retweet-credit,.no-more-pane,.no-tweets-pane p,.p-geo,.cards-base .byline-user{color:#6c6 !important;}
a:hover, a:active,.p-author a.profile:hover,.p-author a.profile:focus,.retweet-credit .profile:hover,.retweet-credit .profile:focus,.stats strong,.no-tweets-pane .load-tweets,.nsfw{color: #9c0 !important;}
.customisable,.customisable:link,.customisable:visited,.customisable:hover,.customisable:active,.customisable-highlight:hover, a:hover .customisable-highlight, a:focus .customisable-highlight{color: #999 !important;}
.timeline,.p-author .profile .p-name,.cards-base p,.cards-base p a,.timeline-header .summary,.timeline-header .summary a:link,.timeline-header .summary a:visited,.p-author a.profile:hover .p-name,.p-author a.profile:focus .p-name{color: #666 !important;}
.inline-media img{height: auto;}
.timeline-footer,.h-feed{min-height:1px;}
.var-borderless .h-entry.customisable-border{border-top:dotted 1px #aaa !important;}
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
そのほかの設定は、対応するclass名などをfirebagなどで自分で調べて、設定してみてください。
タイムラインのclass名などはtwitter社でたまに変更されたりしています。昨日まで大丈夫だったものが、急にcssが効かなくなったりすることもあるので、ご注意ください。
2015/01からtwitterはIE8以下のサポートを打ち切ったようです。詳しくは「ツイートボタン（twitterウィジェット） [js]」の「IE8以下でtwitterのツイートボタンが表示されない問題」を参照してください。