ブログにLINE風チャットを貼付ける「Spot.IM」の使い方

LINE風チャット画面をブログに実装する

spotim01-nasciii

前陣速攻型LINEユーザー、いの(@nasciii_com)です。

スマホユーザーの大半が使っているであろうLINE。どうせならブログにもLINEを付けちゃいましょう。

そんなわけでLINEっぽいチャット画面をブログに実装できる「Spot.IM」というサービスを紹介。

SNSに順応したチャットブログパーツ

spotimSpot.IM

Spot.IMは自動で吐かれるコードをコピペするだけで自分のブログ上にチャットを設置できる、そんなサービスです。

以下、英語の紹介動画だがシンプルなUIは伝わると思う。

この手のブログパーツは昔からあるんだけど、SNSと連携って新しい。

spotim001-nasciii

面倒な会員登録は不要でFacebook、Twitter、Google+のいずれかのアカウントでログインすれば、「Spot」と呼ばれるコミニュティをつくることができる。これはチャットルームのようなもので、LINEをイメージしてもらえると分かりやすい。

設置されたSpotに書き込む場合も上記のアカウントのどれかに登録している必要があります。

spotim002-nasciii

例えばTwitterなら自分のアカウントにログインし、連携アプリとしてSpot.IMを認証するだけだ。

Spot.IMの使い方(Spotの作り方)

Spot_IM-shot1-nasciii

上はCreate New Spotの画面。簡単なのでどんどん入力していこう。

まずはSpotの名前、次にブログに合ったカテゴリー、言語に日本語を追加。

Spot_IM-shot2-nasciii

自分のプロフィール画像などをアップロードしてSpotのアイコンにする。これがブログに貼付けた際に、TOP画面に表示されることになる。

アイコンの表示位置は左下か右下のどちらかを選択。バーやボタンのカラーを選択し、最後に「Save and generate code」をクリック。

Spot_IM-shot03-nasciii

あとは<body>タグの中に、コピーしたコードを貼付けて更新するだけ。<body>タグが見つかれなければ、header.phpの中を探してみよう。

spotim02

ページを更新すると左端(もしくは右端)に丸いアイコンが表示されているはず。目障りじゃないからいいね。

リアルタイムのコミュニティ空間をつくることができる「Spot.IM」をぜひ一度。

 

ひとこと
Ino(@nasciii_com)は思います。
 「It’s Free. Really.」マジで無料のやつなので試しに導入して損はなし。
s_nas