スーダラブルース

雑多な日々のぶるーす(音楽・映画・本など)です!前のブログから引越し中

はてなブログ リアルタイムにページを見ているユーザー数を表示 Real Time User

このブログでは、現在の閲覧してくれてるユーザー数を表示させています。

 グーグルアナリティクスのリアルタイム機能の数を表示させるようなイメージです。

これです〜。これ簡単に実装できます!

f:id:isao2:20190129165511p:plain

 

こちらのReal Time UserというJavaScriptプラグインを使っています!

Real Time Users | by Contrast

 

実装も簡単です!

 

まずは実装したい場所にこちらのHTMLを書きます。

HTML

<div class="realtimeuserscounter realtimeuserscounter--styled"></div>

そして、HTMLより後にこちらのJavaScriptを記述。

<script src="https://realtimeusers.bycontrast.co/realtimeusers.js"></script>

以上で、実装完了です!

あら、簡単^^

後は各自お好きにcssをカスタマイズしてください。

ちなみに私は

counter
<div id="counter">
  <p>今見てる人の数です</p>
  <div class="realtimeuserscounter realtimeuserscounter--styled"></div>
</div>

<script src="https://realtimeusers.bycontrast.co/realtimeusers.js"></script>
<style> #counter {    position: fixed;    z-index: 9999;    left: 5px;    bottom: 4px;    color: #000;    background: yellow;    font-weight: bold;    text-align: center;    border-radius: 10px;    width: 100px;    padding: 10px;    font-size: 13px; } </style>

 

としてます。 

 

ではでは〜