きっかけ
Twitterのタイムラインをウェブサイトに埋め込むことって頻繁にあると思うし、実際たくさん実装してきた。のだが今までは全てサイドバーかフッターに埋め込んでいたゆえ、300〜400px幅で縦が長いというTwitter社の想定通りのサイズ感で何ら問題はなかった。
ところがこの度。
「フッターではなくもっと上の方に表示したい」
という要望が。あいにくサイドバーなしのページだ。
埋め込みタイムラインの問題
というわけでサイトボディの真ん中にデンと幅広で表示させてみた。ら驚いた。
文字がデカい！
（あ、パソコンで見た場合ね。スマホで見たらちょうど良いｗ）
なんじゃこら。。
css当てて調整するか。とクラス名やら何やら該当箇所のを調べてcssを書いてみた。が。。これ埋め込みタイムラインってiframeなのでフレームの外のcssなんか読んでくれないのだよな。。。
解決方法
調べ倒して紆余曲折、なんとかなった。。
まる1日かかったが(´；ω；｀)
javascriptを用意
結論としては、javascript（jQuery）で、中に必要なcssを全部書いた<style>タグをiframeの中のhtmlにappendする、という方法で実現できた。
参考にした神サイト、、というかjavascriptはまるまるこちらのサイトからいただいた。おおきに！
function changeTwitterWidgetDesign(){
var $twitter_widget = $('iframe.twitter-timeline');
var $twitter_widget_contents = $twitter_widget.contents();
if (
$twitter_widget.length > 0 &&
$twitter_widget[0].contentWindow.document.body.innerHTML !== ""
) {
$twitter_widget_contents
.find('head')
.append(
'<link href="style.css" rel="stylesheet" type="text/css">'
);
} else {
setTimeout(function () {
changeTwitterWidgetDesign();
}, 350);
}
}
changeTwitterWidgetDesign();注意点としてWordPressのお約束で2行目の$はjQueryに書き換えるべし。
そして11行目の.append()の中身12行目を<style></style>で挟んだcssにする。というのも当方の環境ではstyle.cssをうまく読み込んでくれなかったので直接書き込まざるを得なかった。もちろんこのままにして外部cssが読めたらそれでOK。
下の例は、Twitterタイムラインの各投稿の本文を1remサイズ、行送りを1.6remに変更する例だ。
function changeTwitterWidgetDesign() {
var $twitter_widget = jQuery("iframe.twitter-timeline");
var $twitter_widget_contents = $twitter_widget.contents();
if (
$twitter_widget.length > 0 &&
$twitter_widget[0].contentWindow.document.body.innerHTML !== ""
) {
$twitter_widget_contents
.find("head")
.append(
"<style>.SandboxRoot .timeline-Widget .timeline-Tweet-text{font-size:1rem;line-height:1.6rem}</style>>"
);
} else {
setTimeout(function () {
changeTwitterWidgetDesign();
}, 350);
}
}
changeTwitterWidgetDesign();最初はもっと長い長〜いcssを放り込んでみたのだがVSCodeに怒られたのでほどほどの長さのcssに調整した。
ちなみにこのコードの素晴らしいところは、Twitterのiframeが読み込み終わるまで待ってからappendするところ。この手続きをすっ飛ばしてただappendするだけのコードを紹介してるサイトもあったのだがというか最初はそれでずっと試していたらページをリロードするたびに目的のcssが反映していたりしてなかったりと不安定極まりなかった。この不安定な原因を調べるのに半日以上費やしたし。。。
javascriptをサイトに組み込む
用意できたこのjavascriptファイルを目的のサイトのサーバーの然るべき場所にアップロードしてHTML読み込み時に認識させればOK。この辺の情報はググれば丁寧な解説がいくらでも出てくるが念の為メモを残す。
WordPressならテーマのfunctions.php（子テーマのね）に下記enqueueを記述。
function my_scripts_method()
{
wp_enqueue_script('twitter-script', get_theme_file_uri('/js/twitter-design-script.js'), array('jquery'), filemtime(get_theme_file_path('/js/twitter-design-script.js')), true);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
HTMLに書き込むなら</body>の直前に下記を記述。
<script type="text/javascript" src="/js/twitter-design-script.js" id="twitter-script-js"></script>いずれもパスとファイル名は必要に応じ適宜変更のこと。
解決した埋め込みタイムライン表示
おかげさまで現在は元気に最適なフォントサイズのタイムラインが埋め込めてゴキゲンだ。
Tweets by JPEmbUA_anzen願わくば、今後Twitterさんの仕様が変わらないでいてほしい。。。
↑の埋め込まれたタイムラインの表示がおかしなことになってたら仕様が変わったということね。
ポチップ
コメント