ブログBLOG

  1. HOME
  2. ブログ
  3. 備忘録

BLOG備忘録

wordpressにソーシャルボタンを設置

メディカのホームページの中では、2つのカテゴリでWordPress(CMS)を使用しています。
WEB屋の戯言:http://medica-web.jp/cms/blog/
医院のホームページ活用術:http://medica-web.jp/cms/column/

前々から、「Evernote用のボタン追加してよ」「Facebookでシェアしやすいようにして」と言われていたのですが、放置しておりました。(ごめんなさい)
そこで、ふと思い立って、ソーシャルボタンを追加してみました。
ソーシャルボタンの追加に使ったのは、WordPressプラグイン「WP Social Bookmarking Light」です。

弊社でお手伝いさせていただいている先生のWPにも入れているのですが、導入はとっても簡単。

・管理画面→プラグイン→「WP Social Bookmarking Light」を検索→インストール→設定から表示サービス選択
これだけでOKです。

この記事の上部のソーシャルボタンは、特に表示のためのカスタマイズもせずに使っています。

ソーシャルでの情報共有の際に、便利に使っていただけるといいな、と思います。

携帯サイトでGoogleMapを表示

最近、携帯サイトのご依頼が多くなってきました。
そこで悩んだのが、地図の埋め込み。

結論から言えば、唯一無料で商用利用ができるGoogle Mapを利用しています。

携帯サイトで地図を見る…といえば、

  • イラストレータで独自に作った地図を埋め込む
  • Google Mapp、YahooのAPIを使って表示する
  • MapFan、NaviTimeへリンクを貼って連動させる

…等、様々な方法があります。

ただ、

  • Illustratorで地図を作るには予算(時間)がない
  • Yahooは商用利用不可
  • MapFan、NaviTimeは、利用者さんが有料サービスに入ってないと意味がない

という理由から、消去法でGoogle Mapになったのです(笑)

Google Mapを選んだ理由

  • 商用で無料利用できる
  • 静的画像が出力されるので見る人にパケ代の心配をさせないで済む
  • Googleはサービス対応が早いので、今後の便利を考えて。

これが大きな理由です。

デメリットとしては、一日に読み込むことができるのは1000ユニーク画像という制限があることですが、医療機関で、携帯サイトに1日1000人以上の方が地図を見ることはありえないので、実質的には全く問題なし。

手軽にGoogle Mapを作成できるサービス

Google Static Maps API

Google Static Maps API では、Google マップの画像を自分の Web ページに埋め込むことができます。JavaScript や動的なページの読み込みは必要ありません。

ということで、パケ放題のようなサービスに入っていない携帯ユーザーさんにも安心できる地図を選択しました。
http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html

住所などから位置を特定して、サイズ・色味などを細かく指定。
その後は、出力されているリンクの最後にある
APIキーの入力と、sensorパラメータの変更をすればOK!

ちなみに、sensorパラメータとは、
GPSなどを利用して地図画像を取得したいときに利用されるものです。
通常は「sensor=false」(オフにしておく)で問題ないでしょう。

Google MAPS APIキーを取得する

APIキーの取得についてはコチラ。
http://code.google.com/intl/ja/apis/maps/signup.html

おまけ:QRコードの自動生成

タイトルも入れられますし、色も変えられて便利なので、
私はよく↓のサイトを利用させていただいています。
QRのススメ http://qr.quel.jp/try.php

日本の携帯は、docomo、au、softbankにウィルコム、イー・モバイルと5キャリアある上に、キャリア毎に細かく対応できる基準が異なります。
さらにiPhoneやAndroid携帯などスマートフォンも多くなっていますので、
作成するのに本当に神経を使いますね…。

Google AJAX Feed APIで、外部サイトをホームページに表示

ホームページとブログを両方運用している時、
トップページにブログの更新情報が自動掲載されたら良いと思いませんか?

以前は表示されるまでに数時間~数日のタイムラグがあったgoogleのRSS表示ですが、最近は本当にすぐに掲載されるようになりました。

導入の詳しい方法は、色々なサイトで詳しく述べられているので、
ここでは、表示方法のカスタマイズについてメモ的に掲載します。

私は新着情報の更新などは、下記のように作ることが多いので、
それに合わせて、ブログも日付&タイトルのデータを取得したい
<dl>
<dt>2009年12月11日</dt>
<dd>内容を記載します</dd>
</dl>

—————————————————–

google.load(“feeds”, “1”);
function initialize() {
//読み込むフィードのURLを指定
var feed = new google.feeds.Feed(“読み込むフィードのURLを指定”);

//読み込むフィードの数を指定
feed.setNumEntries(5);

feed.load(function(result) {
if (!result.error) {
var container = document.getElementById(“feed”);

for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var date = new Date(entry.publishedDate); //各HTML要素を生成 var div = document.createElement("div"); var dl = document.createElement("dl"); var dt = document.createElement("dt"); var dd = document.createElement("dd"); var a = document.createElement("a"); //記事のタイトルを取得 var entryTitle = entry.title; //記事のパーマリンクの値を取得 var entryLink = entry.link; //[2009年12月11日]の形式で日付を取得 var entryDay = date.toLocaleDateString(); //dt要素内に、content要素をHTMLコードとして挿入 dt.innerHTML=entryDay; dd.appendChild(a); dd.getElementsByTagName("a")[0].setAttribute("target","_blank"); //a要素に対して、link要素の文字列をhref属性の値として設定 dd.getElementsByTagName("a")[0].setAttribute("href",entryLink); //a要素の子要素として、title要素をテキストノードに変換して挿入 dd.getElementsByTagName("a")[0].appendChild(document.createTextNode(entryTitle)); dl.appendChild(dt); dl.appendChild(dd); container.appendChild(dl); } } }); } google.setOnLoadCallback(initialize); ----------------------------------------------------- ※今回、上記コードを作成するにあたりこちらのサイトを参考にさせていただきました。 http://www.ficc.jp/labs/archives/suzuki/google_ajax_feed_api/