Koichi Hori

Home About


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
Then follow the instructions.

That's it!

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

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 class="snsbutton">
    code for facebook button here
  <div class="snsbutton">
    code for twitter button here

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.

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.

Related entries (automatically calculated):
css <pre> and <code> for mobile devices
Redirecting URL in Ruby on Rails
Using unicode characters in Windows command line
Unicode decode error "'utf-8' codec can't decode byte 0xfa in position 0: invalid start byte" when using MeCab
Showing the favicon in Google search results
Using Python on Windows
Login window freezes when making VNC connection from Windows to Mac
Mechanical engineers and electrical engineers have different mental models of oscillation
On This Day: Atomic Bomb Dropped on Nagasaki
A small program which extracts rhythmic word sequences such as Tanka(57577) or Haiku(575) from a plain text
UNESCO: `Do you know AI or AI knows you better? Thinking Ethics of AI'
UAV/UGV Autonomous Cooperation
Koichi Hori: Last Lecture
Toward AI-embedded Society where AI is Not Recognized as AI
AI support for Ethical AI Design
What an old AI researcher thinks after watching the movie "Green Book" - about Racism, Discrimination, and AI (Artificial Intelligence)
AI (Artificial Intelligence) and Philosophy
Culture as the base of our country: Prof. Inose
The University of Tokyo Academic Archives Portal - UTokyo Digital Collections
Difference between Science and Engineering
Koichi Hori Top page
Civilization, Culture, Science, and Technology
Koichi Hori
What is Artificial Intelligence?