Aligning Facebook button and Twitter button

(Diary of an Old AI Researcher who is still Programming)

6 March 2019

I have put Facebook Like buttons and Twitter Tweet buttons (social plugins) on my web pages.

It was easy.
Go to
https://developers.facebook.com/docs/plugins/like-button/,
and
https://help.twitter.com/en/using-twitter/add-twitter-share-button.
Then follow the instructions.

That's it!

My facebook button and twitter button started to work without crucial problems.

However,
the alignment of the buttons was in disorder.
Moreover, different browsers showed different disorder.


I searched on the internet and have found many solutions to this problem.

The simplest solution is to float the buttons to left in one <div> element.

Here is my code.

In the html file,

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

And, in the css file,

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

This simple code is now working with no problems, as you see on this page.


However, I wasted pretty much time before this code started to work, because I forgot to reset the cashe on the browsers when I tested my new code.
We should note that the update of the css file is not immediately reflected on the browser even if we reload the web page, because of the cashe.
We should force the browser to reset the cashe when we test the new css file.


P.S.
Uh, to avoid the cashe problem, we can put query letters after the css file name. For example,
<link rel="stylesheet" href="koichihori.css?201903062000">
If we update the query letters, the browser loads the css file without using the cashe.

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.