1. Top
  2. » FC2ブログ

スポンサーサイト

  • -----/-- (--)
  • スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログにFacebookの『いいね!』ボタン(OGP設定済み&ifram版)を設置する方法

  • 2012-07/04 (Wed)
  • 備忘録
FC2ブログに、OGP設定済みの、
『いいね!』ボタンを設置する方法(備忘録メモ)。

『いいね!』ボタンのifram版ソースコードも
サンプルとして、載っけました。

自分流に作りたい場合は、開発者登録後、
下記で、ボタンを作成し、

Like Button - Facebook開発者

URL部分を<%topentry_link>に変更すれば、
大丈夫なはず。

(開発者登録後に、ボタンを作れば、
 自動的にアプリIDも付加されるはず。)

また、ウォールやニュースフィードに表示される、
画像は、プロフィール画像が表示されるように
メタタグ部分で指定してあります。
(Facebookの推奨画像サイズは200×200px)

参考ページさま
Facebookの「いいね!」ボタン作成ページの解説とFC2ブログへの設置方法
FC2ブログにFacebook用のOGPを設定
Facebook・Twitterなどソーシャルボタン設置方法まとめ
<遂に公開>SEOの2倍のアクセスを稼ぐFacebook「OGP」の活用術。

-----------------------------------------
ステップ1:Facebookに開発者登録する
-----------------------------------------


次のページから開発者登録をする。

自分の開発者アカウントを認証するにはどうすればよいですか。 - Facebook ヘルプセンター

余談)

私の場合、本人確認のために、
携帯(au)を使って、認証を行いました。

そしたら、メチャクチャ迷惑メールが届くようになりました。(苦笑)

だいたい1日に20件~30件。

心あたりは、これしかないんだけど、
どうなんでしょ?

-------------------------
ステップ2:環境設定
-------------------------


FC2ブログ管理画面、『環境設定』で、

・いいねボタンOFF

に、設定する。

(デフォルトはOFF)

-------------------------
ステップ3:ブログ登録
-------------------------


次のページにアクセスして、

基本設定 - Facebook開発者

・アプリを編集
・設定を編集

のどちらかをクリックして、

『いいね!』ボタンを設置するブログの、
ドメインを登録する。

App Domainsの部分にブログの『ドメイン』を登録する。

例)ningenshinkaron.blog.fc2.com

---------------------------------------
ステップ4:HTMLソースに書き加える
---------------------------------------


以下のように変更する。

■ネームスペース

HTMLソース<html>部分に、次を書き足す。

xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml"

■メタタグ

発行された『アプリID』を書き加えて、
次のメタタグを挿入する。

<meta property="og:title" content="<!--permanent_area--><!--topentry--><%topentry_title><!--/topentry--><!--/permanent_area--><!--index_area--><%blog_name><!--/index_area-->" />
<meta property="og:type" content="<!--index_area-->blog<!--/index_area--><!--permanent_area-->article<!--/permanent_area-->" />
<meta property="og:description" content="<!--index_area--><%introduction><!--/index_area--><!--permanent_area--><!--topentry--><%topentry_discription><!--/topentry--><!--/permanent_area-->" />
<meta property="og:url" content="<!--index_area--><%url><!--/index_area--><!--permanent_area--><!--topentry--><%topentry_link><!--/topentry--><!--/permanent_area-->" />
<meta property="og:image" content="<%image>" />
<meta property="og:site_name" content="<%blog_name>" />
<meta property="fb:app_id" content="アプリID" />

■常に表示させる『いいね!』ボタン

常に、『いいね!』ボタンを表示させたい部分には、
次を挿入する。

※アプリIDを書き加えた上で

<!--topentry-->
<iframe src="http://www.facebook.com/plugins/like.php?href=<%topentry_link>&amp;send=false&amp;layout=button_count&amp;width=105&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=アプリID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true"></iframe>
<!--/topentry-->

■個別記事にのみ表示させる『いいね!』ボタン

個別記事にのみ表示させたい『いいね!』ボタンは、
表示させたい部分に、次を挿入する。

※アプリIDを書き加えた上で

<!--permanent_area-->
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:105px; height:21px;" src="http://www.facebook.com/plugins/like.php?href=&lt;%topentry_link&gt;&send=false&layout=button_count&width=105&show_faces=false&action=like&colorscheme=light&font&height=21&appId=アプリID"></iframe>
<!--/permanent_area-->

-------------------------
ステップ5:確認
-------------------------


デバッガーツールで確認する。

デバッガー - Facebook開発者
スポンサーサイト

『ブログでメールアドレス表示』FC2ブログ共有プラグイン作りました。

  • 2011-10/14 (Fri)
  • FC2ブログ共有プラグイン
FC2ブログ共有プラグイン作りました。

『ブログでメールアドレス表示』というプラグインです。

これはブログに簡単にメールアドレスを表示するためのモノです。

連絡先として、ブログにメールアドレスを
表示させたい時のために作りました。

特徴は次のようになります。

・メールアドレスが長くても隠れたりしない
・1クリックでメールアドレスを選択できる
・プラグインにメールアドレスを入力するだけで使える


詳しい説明です。

■メールアドレスが長くてもOK

長いメールアドレスをブログに表示すると、隠れてしまう場合があります。

そうすると、メールを送りたいのに、メールアドレスをコピーできなくなります。

このプラグインはそれが起きないようにしました。

1行のボックスにメールアドレスを収めます。

見かけ上は隠れていますが、ちゃんとボックスの中に収められています。

長いメールアドレスであっても、ポケットに収めるように、きちんとボックスの中にしまうことができます。

そして、それを1クリックでコピーできます。

■1クリックでメールアドレスを選択

ボックスに収めたメールアドレスを1クリックで選択することができます。

ブログ上に普通にメールアドレスを表示させると、そのメールアドレスをマウスなどで選択してからコピーすると思います。

これって結構面倒だったりします。

そんな作業が必要無いように、1クリックでメールアドレスを選択できるようにしました。

あなたのブログに来た方が、する作業は次のようになります。

1.メールアドレスが収められたボックスを1クリック
2.コピー
3.メールソフトの宛先に貼り付け
4.本文を書いてメールを送る

このようになります。

■プラグインにメールアドレスを入力するだけで使える

プラグインにメールアドレスを入力する項目をつけました。

『あなたのメールアドレス』

という部分です。

そこにメールアドレスを入力します。

あとはプラグインをダウンロードします。
これだけで、ブログにメールアドレスを表示できます。

■まとめ

・このプラグインはブログにメールアドレスを表示させるためのモノ

・メールアドレスが長くても、ブログに載せられる

・1クリックでメールアドレスを選択できる

・プラグインダウンロード時にメールアドレスを入力するだけでOK

■ダウンロード手順

1.FC2ブログの管理画面に入る
2.『ツール>プラグインの設定』と進む(左メニュー)
3.『共有プラグイン追加』をクリック
4.プラグイン名『ブログでメールアドレス表示』で検索
5.『詳細』をクリック
6.『あなたのメールアドレス』という部分を探す
7.その横に『自分のメールアドレス』を入力する
8.『ダウンロード』をクリック

これで完了です。

■プラグインリクエスト受付中

「こんなプラグインが欲しい」

など、欲しいプラグインがありましたら、教えてください。

もし作れれば、勉強して作ってみたいと思います。

FC2共有プラグインを作ってみました。

  • 2011-10/08 (Sat)
  • FC2ブログ共有プラグイン
FC2ブログの共有プラグインを作って見ました。

『この記事にリンクを貼る』

というプラグインです。

(これから、FC2ブログに共有プラグインの申請をします。)

この記事の下にそのプラグインがあります。

『この記事にリンクを貼る』という部分があります。
そこにリンクを貼るためのHTMLタグが表示されています。

もし、この記事にリンクをしいたいと思ったら、
このタグをコピーしてブログの記事などに貼り付けることができます。

普通はリンクを貼るために、その記事のURLをコピーして、
貼り付けタグを作って、そこにURLを入れて、完成したタグを
記事部分に貼り付ける。。

っていう結構メンドクサイ作業が必要です。

でもこのプラグインを使うと、

1.「この記事にリンク貼りたい」って思った
2.タグをコピー
3.自分のブログなどに貼り付け


っていう感じで、簡単にリンクを貼ることができます。

個別記事でのみ表示されるように作りました。
その他のページでは、表示されません。

このプラグインを使うことで、
次のようなことを期待できます。

・自分のブログを色んな人に知ってもらえる
・ブログにたくさんの人が見に来る
・被リンク数が多くなるからSEO的に有利


このようなことが期待できます。

これから共有プラグインの申請を出します。

申請が通ったら、また記事にしますぞい。
最新記事
カテゴリ
Twitter
メールアドレス
タグクラウドとサーチ

最新コメント
リンク

このブログをリンクに追加する

QRコード
QR
ブロとも申請フォーム

この人とブロともになる

RSSフィードの購読
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。