FacebookボタンとTwitterボタンをきちんと並べる

（老いぼれ人工知能研究者のプログラミング日記）

2019年3月6日

このサイトのwebページに、Facebookの「いいね！」ボタンとTwitterのtweetボタンを付けようと思いました。

まずは、簡単でした。
下のページに行って、
https://developers.facebook.com/docs/plugins/like-button/,
and
https://help.twitter.com/en/using-twitter/add-twitter-share-button.
そこに書いてある指示に従うだけです。

とりあえず、うまく行きました。


あー、しかし！
ボタンの位置関係がガタガタになってしまいます。しかもブラウザごとに挙動が異なります。

インターネットで検索したら、解決法がたくさん出てきました。
最も簡単な方法は、一つの<div>要素の中に、複数のボタンをfloatで左づめにしてやることのようです。

こんなコードを書きました。

htmlファイルの中で、

<div>
  <div class="snsbutton">
    code for facebook button here
  </div>
  <div class="snsbutton">
    code for twitter button here
  </div>
</div>

そして、cssファイルの中で、

.snsbutton{float:left; margin-left:3px}

このページをご覧いただいてもわかる通り、この簡単な方法で、うまくいっているようです。


でも、実は、うまくいくまでに、馬鹿馬鹿しく時間を無駄に使ってしまいました。
新しいcssファイルを試す時に、ブラウザのキャッシュをリセットするのを忘れていたのです。
webページをreloadしても、古いcssがキャッシュされたままになって います。
新しいcssファイルを試す時は、ブラウザのキャッシュを強制的にリセットしないと いけませんね。



追記：
おっと、
<link rel="stylesheet" href="koichihori.css?201903062000">
というように、cssファイルの指定にqueryを付加してやるという手もありましたか。query部分を更新すれば、ブラウザがキャッシュを使わずにcssファイルを読み込み直してくれます。

To the extent possible under law, the person who associated CC0 with this work has waived all copyright and related or neighboring rights to this work.