今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

現在、リアルタイムにブログを見ているユーザー数を表示するJS!「Real Time User」コピペ簡単。

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

 

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

 

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

f:id:sudara_bluse:20171110230352p:plain

 

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

Real Time Users | by Contrast

 

f:id:sudara_bluse:20171110230322p:plain

 

実装も簡単です!

 

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

HTML

 

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

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

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

以上で、実装完了です!

あら、簡単^^

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

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>

 

としてます。 

 

ではでは〜💕

 

f:id:sudara_bluse:20170930130706p:plain