Facebookで絵文字入りメッセージを送ってみた

FacebookSNS(ソーシャルネットワークサービス) としてかなり根付いてきた感もありますね。 利用者数は先行する和製SNSの mixi には未だ届かないようですが、 メディア等に取り上げられることで知名度は IT 関係者ならぬ、 一般の方にも少し浸透してきているかも知れません。

浸透しているとは言っても まだまだ主なる利用者は IT関係者やビジネス利用を鑑みた方が多いようで、 画面全体も少々味気ないように個人的には感じています。 そんな画面をほんのちょっと変えてくれそうな情報がありました。 WEB総合情報を発信するサイト arisa.biz の2011年5月2日の記事の 【裏技】facebookで絵文字を使う方法 です。 Facebook の画面を絵文字が彩ってくれるとは、 なかなか面白そうですので早速試してみました。

上記紹介リンク先の案内に従い、 上の如く記述してメッセージを書いて返信ボタンをクリックすると…

投稿日:
カテゴリー: Facebook

Facebookのお知らせメールを設定する

使う方も増えてきた Facebook では利用者皆さんに互いに仲良くして欲しいものですから、 うかうかしていると矢鱈と届く何某かの紹介メールで メールボックスが一杯になってしまいます。 こんなことまでお知らせしてくれなくていいよ! なんて思っていても Facebook はお節介焼きですからちゃんと断らなきゃいけません。 そんな中、新機能の更新の頻繁な Facebook からお知らせメールについてのお知らせが届きました。 Facebookからお届けするメールの量が減ります - 理由をご覧ください という件名で、中身は

こんにちは
Facebookからお送りしている、お知らせメールの量を減らすために、新たな試みを試験的に実施いたします。 本日より、個々のお知らせメールの多くを配信停止とし、代わりに、人気がある記事のダイジェストメールをお届けします。
いつでも 個々のメールを再開 して、元の設定に戻すことができます。
というものです。 いえいえ、お節介焼きさんにじゃんじゃんダイジェストメールを送りつけられたらちょっとたまりません。 そこで設定を元の戻すことにしました。 それには…

投稿日:
カテゴリー: Facebook

ブログからFacebook Comments機能を取り外す

Facebook (フェースブック) の提供する機能 Facebook Comments については本ブログでも今年2011年3月より5月まで定期的に

等の記事を投稿しました。 大変面白い機能の提供であると思い、 本ブログにも昨日、2011年7月2日まで利用していましたが、 様々鑑み取り外すことにしました。

facebookいいね!ボタンの設置法はまぞう版

理由としては

  1. IFRAMEで提供される別ドメインの機能の読み込みに時間が掛かること
  2. 新鮮で活力の有る組織として好ましいことではありますが、しばしばの デザイン、機能等の変更は本ブログに於いては望ましくないこと
  3. 本ブログのアクセスはそれほど多いものではなく、従って書き込みも多くはないこと
  4. Facebook本体との連携が一般的利用者には機能しないこと(以前の記事にコメントがついても把握し辛い)
などが挙げられますが、 当然これらの件を差し引いても採用されるべきサイトも有ります。 実際アクセスの大きなサイトに於いては、 コメント欄の開放はしばしばスパム的な書き込みを多く招く場合が有りますが、 その問題をこの Facebook Comments 機能を採択することで解決した事案も目にしたことがあります。 それぞれのサイトの状況に拠る判断になりますね。

なお、はまぞう(HamaZo)ブログに関してのみになりますが、 上記一連の関連記事の内最後、5月31日では最適化とした埋め込みコードとして

<div id="fbcom">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js
   #appId=APP_ID&xfbml=1">
</script>
<fb:comments href="<%BlogUrl%><%EntryPermalink%>"
   num_posts="3" width="450">
</fb:comments>
</div>
と記述してありますが、 はまぞうブログシステムに於ける赤字部分置換タグでは <%BlogUrl%> の後ろにスラッシュ(/)が、 <%EntryPermalink%> の前にもスラッシュが出力されてしまいますので問題が有ります。 はまぞうブロガー一般にコピー&ペーストで使えるようなコードとすれば 以下が相応しくなるでしょう。

<fb:comments href="<%BlogUrl%>e<%EntryId%>.html"
   num_posts="3" width="450">

此処に謹んでお詫び、訂正させていただきます。

投稿日:
カテゴリー: Facebook

Facebookのビジネス活用はまだ焦らない方が吉

Twitter ホームページやブログなどでITに慣れてきた事業者が 更なる活用を求めた時に2011年の前半の今、目に付きやすいのが Facebook(フェースブック) でしょう。 確かにその威力の大きさは例えばタレントでは レディーガガ 、企業では スターバックスコーヒー の存在があり、日本に於いても ユニクロ や最近では 無印良品 などの企業名がしばしば上げられます。 これら成功例を見るだけで大きな可能性があることは確かです。 しかし同時にこれらの成功例を見たとき、 それに比して自社が成功を収められるかはよくよく思案が必要だと思います。 ユニクロはホームページ上でもしばしばユニークな話題を提供していますし、 無印良品もスマートフォン用のアプリ( 一例 )などで定評があり、 決してソーシャルメディアだけに留まる広報販促活動ではありません。 そして成功者の Facebook 自体の研究に関しても並大抵ではないものと思われます。

SEO(検索エンジン最適化)についての見識には定評のある…

投稿日:
カテゴリー: Facebook

Facebookで知らない友達が三人いたらマズイ意味

Facebookのソーシャルグラフ Twitter でもそうでしたが フォロワー などと言うものが数値として示されると、 その数を増やして自分の影響力の誇示として自慢したいと思うのは 人情としてわからないでもありません。 ところが2011年は先月末の5月26日の Facebook(フェースブック) 関連の情報に ほいほいとFacebookのフレンド申請に応じているとアカウントをのっとられてしまうかもしれない と言う様な記事がありました。 アカウントをのっとられる とは穏やかではありません。

Facebook の認証システムに於いては、 自分のアカウントにログイン出来ない時に 三人の友達の助けを借りれば再びログイン出来る様になっているのです。 では

  1. その三人が同一人物が拵えたダミーのアカウントで
    (このインチキも本当は Facebook 側の早急な対処が必要な筈なんですが…)
    それを自分が友達として認めていたら…
  2. そしてそのダミーアカウントを拵えた人物が自分の振りをして 自分の Facebook にログインしようとしたら…
    (この時点では当然ログイン不可能です)
  3. そしてログインする為に三人分のダミーのアカウントを使えば…
結果は言う迄もない…ですね。

本記事のタイトルの 知らない友達 とは何とも不可思議な言葉、 違和感たっぷり、通常なら考えられない言葉です(笑) これも Facebook と言う 新時代のインターネットサービスの覇者の作り出した時代の鬼っ子でしょう。 そして違和感は矢張り違和感、 其処には落とし穴が待ち構えている様です。

投稿日:
カテゴリー: Facebook

Facebook Comments機能のHamaZoブログへの設置の最適化

話題になること著しいSNSサービス Facebook (フェースブック) が鳴り物入りで提供し始めた機能が Facebook Comments です。 本ブログに於いても

と定期的に記事を投稿しました。

3月8日の記事で設置方法を紹介し、 4月7日の記事でその設置コードを記述していますが、 其の中ではまぞう(HamaZo)ブログシステムのテンプレートから独自に読み取った為に、 一箇所、相応しくない部分があります。 それが

<fb:comments href="rank.hamazo.tv(※)/e<%EntryId%>.html"
    num_posts="3" width="450">
の一行の赤字の部分です。

facebookいいね!ボタンの設置法はまぞう版 実ははまぞう(HamaZo)ブログシステムでは 通常のホームページを記述するHTML以外に独自の記述法が用意されています。 その説明のヘルプも用意されており、それが 置換タグについて と言う頁になります。

相応しくないとしました記述はヘルプ頁では 記事 ID とされています。 これは Facebook にブログ全体についてではなく、 個別記事についての情報を渡したい為の処理です。 しかしこれは記事の判別記号であり、記事そのもののURLではありません。 このことを鑑みてヘルプ頁を見てみれば確り 記事ID.htmlを表示する なる記述が用意されており、その名前も <%EntryPermalink> と固定されたリンクを生ぜしめる個別記事に相応しいものになっています。 またこれのヘルプ頁に表示されるずっと上の方、 上から三番目の欄にはこの記述をされているブログ自身のURLに置き換えられる <%BlogUrl%> も用意されています。 実際にこのブログ記事内で生のHTMLとして <%EntryPermalink> と書いたものがどう置き換えられるか表示してみたものが以下になります。

<%EntryPermalink%>
HTMLファイル名前のスラッシュまで含め見事に変換されている様ですね。

従ってこれ等を採用した Facebook Comments機能埋め込みコードは以下になります。

<div id="fbcom">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js
    #appId=APP_ID&xfbml=1">
</script>
<fb:comments href="<%BlogUrl%><%EntryPermalink%>"
    num_posts="3" width="450">
</fb:comments>
</div>

効果は全く変わるものではありませんが、 立ってる者は親でも使えというか、 存在する記述は意地でも使えというか、 気分的に少しすっきりするかもしれません。 またHamaZoブロガーさんが実際に利用される際には、 ブログURLを変更することなくコピー&ペーストするだけで一手間減らせますので、 此方を紹介した方が便利でしたね。

※ 現在では HamaZoランクチェック!Blog は本ブログ( Acenumber Technical Issues )に統一しました。

投稿日:
カテゴリー: Facebook

Facebook Comments機能の表示幅のカスタマイズ

Facebook Comments機能の表示幅により表示されてしまうスクロールバー はまぞう(HamaZo)ブログのテンプレートには

  1. トップページ
  2. 個別ページ
  3. アーカイブ
の三種類があり、それぞれ異なるレイアウトを適用することが出来ます。 本ブログの2011年3月24日の記事 Facebook Comments機能部分のデザイン修正法 でトップページに最適化したレイアウトを採用した為、 その他のページでは右の図にハイライトする様に、 スクロールバーが表示されてしまいました。 これはFacebookの表示部分がそれを含む表示部分より 広いことに由来しますので今回これを修正しました。

従来はCSSファイルでは以下の設定を適用していました。 赤字の幅設定が問題になっている部分です。

/* facebook comments */
  div#fbcom{
  margin-left:10px;
  padding-left:15px;
  background-color:#f2f2f2;
  width:465px;
  overflow:hidden;
}

今回三種類のテンプレートに於いて幅サイズは二種類です。 従ってスクロールバーを発生せしめる #fbcom を 二種類に分割し、他方を #fbcom2 としました。 前者はトップページに、後者は他二テンプレートに適用します。 その上で幅設定をそれぞれに設定します。 そのCSSファイルに於ける記述が以下になります。

/* facebook comments */
  div#fbcom, div#fbcom2{
  margin-left:10px;
  padding-left:15px;
  background-color:#f2f2f2;
  overflow:hidden;
}
div#fbcom{
  width:465px;
}
div#fbcom2{
  width:450px;
}

これら設定変更に拠って、 どうやら見苦しいスクロールバーの表示は避けられることになりました。

投稿日:
カテゴリー: Facebook

Facebook Comments機能の表示の日本語化

本ブログは2011年3月8日の記事 Facebook Comments機能のブログへの設置方法 に於いて解説した設置法で本ブログに実装し 2011年3月24日の記事 Facebook Comments機能部分のデザイン修正法 で少々見映えを弄った Facebook Comments機能 ですが、よく見れば流石アメリカ産まれのWebサービスだけあって、 当該表示部分は下の図の BEFORE の様に英語になっています。 Facebook Comments機能の日本語化―ビフォーアフター 郷に入れば郷に従えと言います。 此処は日本にて、今回これを図の下の AFTER の様に直してみました。 図ではモザイクが掛かっていますが、 英語表記されていた投稿者名も確り漢字表記に直っています。

この修正はとても簡単です。 24日の記事 Facebook Comments機能部分のデザイン修正法 で紹介した HTML 部分をほんの五文字ほど修正するだけです。 facebook から提供され上記の記事に於いて紹介した付加コードは

<div id="fbcom">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js
    #appId=APP_ID&xfbml=1">
</script>
<fb:comments href="rank.hamazo.tv(※)/e<%EntryId%>.html"
    num_posts="3" width="450">
</fb:comments>
</div>
でしたが、この赤字で表示した en_USja_JP に変更します。 従って以下の緑字を含む様なものになりますね。
<div id="fbcom">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js
    #appId=APP_ID&xfbml=1">
</script>
<fb:comments href="rank.hamazo.tv(※)/e<%EntryId%>.html"
    num_posts="3" width="450">
</fb:comments>
</div>
細かい箇所ですけれど、 こんな処が見る方にとっては案外使い易くなるポイントなのだと思います。

※ 現在では HamaZoランクチェック!Blog は本ブログ( Acenumber Technical Issues )に統一しました。

投稿日:
カテゴリー: Facebook

Facebook Comments機能部分のデザイン修正法

本ブログは2011年3月08日の記事 Facebook Comments機能のブログへの設置方法 に於いて解説した設置法で本ブログに実装した Facebook Comments機能 ですが、どうもデザイン的に見映えが上手くありません。 Facebook Comments機能部分のデザイン修正前 3カラムで構成されている本ブログの基本レイアウトの、 真ん中部分に繰り返し当該機能は表示される訳ですが、 上記の図に示されるように此処に表示するご本尊たるブログ記事とは 左にずれて表示されてしまっている処がちょっと気に入らないのです。 そこでこれを直してみたいと思います。

この手の修正は HTMLCSS と言うHamaZoブログでは テンプレート > カスタマイズ に用意される設計図を修正しなければなりませんので、 多少初心者ブロガーには敷居が高くなります。

先ずは HTML を修正します。 上記の記事に於いて設置した facebook から提供される付加コードは

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js
    #appId=APP_ID&xfbml=1">
</script>
<fb:comments href="rank.hamazo.tv(※)/e<%EntryId%>.html"
    num_posts="3" width="450">
</fb:comments>
でしたが、この id="fb-root" に対して操作しても反映はされないようです。 そこでこの付加コード全体をラッピングしてしまいます。
<div id="fbcom">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js
    #appId=APP_ID&xfbml=1">
</script>
<fb:comments href="rank.hamazo.tv(※)/e<%EntryId%>.html"
    num_posts="3" width="450">
</fb:comments>
</div>
ラップした div タグ(上では赤字)の id、fbcom に対して CSS を適用すれば好い訳ですね。

さて、上記に HTML を設定した上で CSS に書き加えたものが以下です。

div#fbcom{
  margin-left:10px;
  padding-left:15px;
  background-color:#f2f2f2;
  width:465px;
  overflow:hidden;
}
この設定が適用された表示は以下になりました。 Facebook Comments機能部分のデザイン修正後 まずまず、ずれは修正されたのでこれで好しとします。 加えて facebook Commnts機能部分には背景色を facebook から提供されるモジュールに合わせましたので、 コメントが無い場合に感じられる無駄な余白感も軽減された様に思います。

HamaZoブログではテンプレート要素として

  • トップページ
  • 個別ページ
  • アーカイブページ
の三種類が用意されていますが、 それぞれに僅かづつ異なる位置に facebook Commnts機能を配置した為、 今回の設定ではそれらが其の儘ずれとなってしまっています。 それは今後の課題として、 気の向いたときに修正・報告したいと思います。

※ 現在では HamaZoランクチェック!Blog は本ブログ( Acenumber Technical Issues )に統一しました。

投稿日:
カテゴリー: Facebook

Facebook Comments機能のブログへの設置方法

本ブログの2010年11月13日にご紹介した facebookいいね!ボタンの設置法はまぞう版 も、2010年11月18日の記事 twitterで気軽にはまぞうブログを見た人にフォローして貰う方法 の tweet ボタンと同様にはまぞうブログシステムに正式に ブログ環境設定 > facebook > いいね!ボタン 機能が追加されましたので其の役目を終えた様に思います。

そこで本ブログにも設置した いいね!ボタン も取り外ししようと思うのですが、 ただ外すだけでは能が有りません(笑)。 代わりに新たに機能が強化され使い易くなった Facebook Comments の機能を取り付けてみようと思います。 一たびこれを設置すれば コメントは自分のブログへのものであるにも関わらず、 facebook の自分のウォールに反映され、 コメントの状況を見ることも削除することも facebook から出来ることになります。 facebook を利用される方には便利な機能ですね。

設置するには先ず Facebook DEVELOPERS > Core Concepts > Social Plugins > Comments にアクセスします。
Facebook Comments機能のHamaZoブログへの設置方法―情報入力画面 英語のページですが臆することはありません。 中ほどにある右図の様な入力画面に必要な情報を入力して 下の Get Code ボタンをクリックするだけです。 するとダイアログが開いてブログに貼り付けるコードが表示されます。 これをブログテンプレートの好きな部分に挿入して下さい。 これで貴方のブログに Facebook に直結するコメント機能が追加される筈です。

ただこの方法ですと本ブログにある様に個別の記事への設置ではなく、 ブログ全体への設置となってしまうのが残念な方もいらっしゃるのではないでしょうか(笑)? 記事が長くなってしまいましたので、 近日中にHamaZoブログに限り、個別記事への関連付けの設置方法を、 別記事として掲載する予定です、お楽しみに!


投稿日:
カテゴリー: Facebook