見積書の発行はこちらホームページをまずは無料で作ってみる
すまっぽん!オンライン説明会
平井@イーハイブのメルマガ
登録はこちらから >>

コムログクラウド使い方教室

ホームページ作成後のFacebook【コムログクラウド風】:第三回

前回、発言(ポスト)の仕方をひと通りお伝えしたところで

まだまだあるFacebookのいろいろなツールを使ってみましょう。

その名も、Facebook ソーシャルプラグインです。

Facebookの友達などがどんなページをおすすめしているのか?
いいね!を押しているのかで、自分がどんなページに興味をもちそうかと
教えてくれたりします。

たくさんあるのですが、3つほど設定していきましょう。




ソーシャルプラグインの設定はこの画面から入ります。

また、設置するコードには、
HTML5版、XFBML版、IFRAME版の3種類ありますが、
コムログクラウドでは、IFRAME版を利用します。


Activity Feed

Facebookにログインしている場合、友達がホームページで
「いいね!」や、シェア、コメントしたコンテンツが表示されます。
ログアウトしている場合はおすすめを表示します。
友達のいいね!などが少ない場合は、おすすめが表示されます。


Activity Feed
App ID(app_id) 前回取得したアプリID
Actions to Show(data-action)
Domain(site) ホームページのドメインを入力
Width(width) 横幅
Height(height) 高さ
Maximum Age(max_age) 投稿からの経過日数 1-180日まで 0は制限なし
Color Scheme(colorscheme) 色味の設定
Show Header(header) ヘッダの表示非表示


なぜか、現在IFrameでコードが取得できませんので、
上のデータを参考に下記のコードを書き換えてみてください。



<iframe src="http://www.facebook.com/plugins/activity.php?site=www.i-hive.co.jp&width=300&height=300&header=true&colorscheme=light&max_age=0&data-action=likes,recommends" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:300px; height:300px">
</iframe>


<iframe src="http://www.facebook.com/plugins/activity.php?site=サイトドメイン&width=横幅&height=高さ&header=true&colorscheme=light&max_age=0&data-action=likes,recommends" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:横幅px; height:高さpx">
</iframe>


Recommendations

Recommendations
App ID(app_id) 前回取得したアプリID
Actions to Show(data-action)
Domain(site) ホームページのドメインを入力
Width(width) 横幅
Height(height) 高さ
Maximum Age(max_age) 投稿からの経過日数 1-180日まで 0は制限なし
Color Scheme(colorscheme) 色味の設定
Show Header(header) ヘッダの表示非表示


Facebookの友達の情報を元におすすめの記事を表示します。
ログインしてない場合は一般的なお勧め記事を表示します。

<iframe src="http://www.facebook.com/plugins/recommendations.php?site=www.i-hive.co.jp&width=300&height=300&header=true&colorscheme=light&max_age=0&data-action=likes,recommends" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:300px; height:300px">
</iframe>

お気づきになったと思いますが、Activity Feedは、人が軸になって、
おすすめしてくれます。Recommendationsは、ページが軸になっておすすめしてくれます。
しかし、ログアウトすると、どちらも同じような表示になりますので、
2つ並べると、同じ情報になるので注意が必要ですね。


Like Box


これは、プロフィールのFacebookページ専用のものです。

このようなものをホームページに掲載します。

LikeBox


Facebook Page URL  FacebookページのURL
Width 横幅
Height 高さ
Color Scheme 色み
Show Friends' Faces  顔写真を出すか出さないか
Show Header ヘッダを表示するかしないか
Show Posts  投稿を表示するかしないか
Show Border 枠線をつけるか付けないか

LikeBox



上記のタグをコピーしたら、コムログクラウドの管理画面で
タグ編集にて貼り付けてください。



これを、実際に埋め込んでみます。

管理画面で埋め込みたいフリースペースを開いて


エディターの一番最後の <> タグ編集を選びます。


そしてコピーしていたソースを挿入します。

あとはきちんと動いているかどうか確認をしてください。

外部埋め込み機能

もう一つFacebookページに来てもらうツールとして、
動画や画像などの投稿をホームページに貼り付けることができます。

公開設定にしている発言の場合、
発言の右上に付いている三角のマークを押すと、
「外部へ埋め込み」という表示が出てきます。

私が、モンゴル料理やさんオルドス家で作った動画で説明します。


発言の右上にマウスを持って行くと、下のように窓が開くと思います。

それをクリックして開くと下のような画面になります。



「ウェブサイトにこのコードを貼り付けてください。」
の上のコードをコピーして、記事に書き込むと、
Facebookの発言をそのまま表示できます。

YOUTUBEでも、動画を掲載できますが、
Facebookへ誘導したい場合は、こちらも有効だと思います。

実際に貼りこむとこのような感じです。



※注意:公開設定している発言のみになります。
また、Facebook内の公開と違いより多くの人に
見られることになりますので、注意してください。



Facebookの仕様はコロコロ変わります。
使えなくなったり、新しい機能が増えたり、
そんなところを楽しんで使うしかなさそうです。


                     3    


follow us in feedly   

近々行われるセミナーやイベントスケジュール



読み書きそろばんソーシャルメディア!
著書

  「読み書きそろばんソーシャルメディア!」 

   アマゾンの販売はこちら 

    アマゾンで購入する
 
========================================================
 コミュニケーションブログ COMLOG http://www.comlog.jp/

 中小企業向け コムログクラウド http://cloud.comlog.jp/

 福岡ショップ情報局 http://fukuoka.shoplog.jp/
========================================================

ツイッターツイッターアカウントは、@comlog
フェイスブックは、http://www.facebook.com/yoshiaki.hirai

ホームページ セミナー






※この記事は、下記URLと重複しています。ご了承ください。
「ホームページ作成後のFacebook【コムログクラウド風】:第三回(http://www.i-hive.co.jp/hirai/2357.html)」