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
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.



CC0
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
Using Python on Windows
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
Login window freezes when making VNC connection from Windows to Mac
On This Day: Atomic Bomb Dropped on Nagasaki
UAV/UGV Autonomous Cooperation
UNESCO: `Do you know AI or AI knows you better? Thinking Ethics of AI'
Toward AI-embedded Society where AI is Not Recognized as AI
AI support for Ethical AI Design
Culture as the base of our country: Prof. Inose
AI (Artificial Intelligence) and Philosophy
The University of Tokyo Academic Archives Portal - UTokyo Digital Collections
What an old AI researcher thinks after watching the movie "Green Book" - about Racism, Discrimination, and AI (Artificial Intelligence)
AI ELSI Award
Difference between Science and Engineering
Koichi Hori Top page
Civilization, Culture, Science, and Technology
Koichi Hori
What is Artificial Intelligence?