4kaku design

マーケティングを勉強しているWebデザイナーのノート

独立したブログやWebサイトとして使っても便利なa-blog cms。しかし、FacebookやTwitterなどの外部Webサービスとつなげることで利用の幅がぐっと広がります。
今回のエントリーはWebサービスとの連携に必要な「プロパティ設定」について勉強した内容をまとめました。


プロパティ設定には「メタ情報」と「ウェブサービス」の項目があるのですが、メタ情報については以前「a-blog cmsでOGP設定を見直してみた」で触れたので、今回はWebサービスの設定について書きます。

なお、このエントリーの内容は5/9、10に開催される「a-blog cms Training Camp 2014 Spring」のアップルップルセッションの1コーナーとして発表します。


a-blog cms とWebサービスの連携


YahooアプリケーションID


マップといえばデフォルトで搭載されているGoogleマップがおなじみですが、a-blog cms はYahoo!地図にも対応しています。ページのデザインに合わせたモノトーン、カーナビの夜間表示のような暗めの色合いが選べるデザイン、地下街、路線図といったGoogleマップにはない見せ方ができるので、よりサイトにマッチした画面作りが可能になります。
個人的には、(いつ使うかは置いておいて)ミッドナイトレイヤーが気に入ってます。


yahoo map
yahoo map
yahoo map

Twitter アプリケーション


Twitterとの連携で表示できるのは、以下の5つ。ホームタイムライン、ユーザータイムライン、サーチをサンプルページに作成しました。キーワードの指定はモジュールIDでできます。

  • Twitterホームタイムライン(自分のタイムライン)
  • Twitterユーザータイムライン(自分のツイート)
  • Twitterサーチ(特定のワードが含まれたツイート)
  • Twitterリストタイムライン(特定の公開リストのタイムライン)
  • Twitterリストメンバーズ(特定の公開リストのメンバー一覧)

だらだらーっとリストで表示してもつまらないので、「CSSだけで簡単に吹き出しを作成する方法4つ!」を参考に、最新のツイートを「今日のひとこと」として表示できるようにしました。もっと凝った見映えにすれば、ブログパーツとしても使えそうです。

デモページ


Instagram アプリケーション


Instagramとの連携でできるのは「自分の写真」と「自分がLikedした写真」の表示です。

今回はbxsliderと組み合わせたデモを作りました。プログラミングができないとInstagram連携にはjQueryプラグインを使うことが多いと思いますが、なかなか自分の理想の見映えを実装することは難しいです。(このプラグインなら自由自在だよ!という情報をお持ちの方、ご一報ください!)

デモページ


Facebook アプリケーション


Facebookとの連携は、タッチモジュールで活用することができます。

  • 正規リクエストの時のみ表示する
  • 非正規リクエストの時のみ表示する
  • ユーザーがイイネしている時のみ表示する
  • ユーザーがイイネしていない時のみ表示する
  • 表示元のFacebookページの管理者である時のみ表示する
  • 表示元のFacebookページの管理者でない時のみ表示する

引き続き調べるもの

今回は、Yahoo!地図、Twitter、Instagramのサンプルを作成しました。
FacebookとBing検索モジュールも勉強しつつ、便利な使い方をご紹介したいと思います。