ASP.NET MVC 3アプリケーションをFacebook OAuth APIと統合します。 パート2：いいねボタン

最近では、非常に多くのサイトにFacebook Likeボタンがあります。 クリックすると、ページのユーザーにはこのページが気に入ったというメッセージが表示されます。 彼の友人はこれを見て、彼らはこのリンクをたどってあなたのサイトに行くことができます。 素敵なウェブサイトのプロモーション、そうですか？



次に、このようなボタンをサイトに配置する方法を見てみましょう。







ウェブサイトに「いいね」ボタンを配置するには2つの方法があります。

最も簡単な方法は、iframeを使用することです。

Copy Source | Copy HTML < iframe src ="http://www.facebook.com/plugins/like.php?href=http://microgeek.ru/blogs/gavruk/1454/" scrolling ="no" frameborder ="0" style ="border:none; width:450px; height:80px">< iframe >

1. Copy Source | Copy HTML < iframe src ="http://www.facebook.com/plugins/like.php?href=http://microgeek.ru/blogs/gavruk/1454/" scrolling ="no" frameborder ="0" style ="border:none; width:450px; height:80px">< iframe >
   
   
   
   
2. Copy Source | Copy HTML < iframe src ="http://www.facebook.com/plugins/like.php?href=http://microgeek.ru/blogs/gavruk/1454/" scrolling ="no" frameborder ="0" style ="border:none; width:450px; height:80px">< iframe >
   
   
   
   
3. Copy Source | Copy HTML < iframe src ="http://www.facebook.com/plugins/like.php?href=http://microgeek.ru/blogs/gavruk/1454/" scrolling ="no" frameborder ="0" style ="border:none; width:450px; height:80px">< iframe >
   
   
   
   

結果：





2番目の方法は、Facebook C＃SDKです。

サイトにアクセスして、ボタンをすばやく生成できます。





ボタンには3つのタイプがあります。



1） 標準 ：ボタンの右側にテキストを表示し、ボタンの下に友達のプロフィール写真を表示します。 最小幅：225ピクセル。 標準幅：450ピクセル。 高さ：35ピクセル（写真なし）または80ピクセル（写真あり）。





2） button_count ：「いいね」の総数をボタンの右側に表示します。 最小幅：90ピクセル。 標準幅：90ピクセル。 高さ：20ピクセル。





3） box_count ：ボタンの上部に「いいね」の総数を表示します。 最小幅：55ピクセル。 標準幅：55ピクセル。 高さ：65ピクセル。





[送信]ボタンを削除したり、フォント、配色などを変更したりすることもできます。



受信したボタンのコード：

Copy Source | Copy HTML

1. < fb：like href = "http://microgeek.ru/blogs/gavruk/1453/"
2. send = "true" width = "450" show_faces = "true"
3. font = "arial"> </ fb：like >

このコードをページに配置します。 次に、Facebook C＃SDKをロードする必要があります。

Copy Source | Copy HTML

1. < script src = "http://connect.facebook.net/en_US/all.js" > </ script >

そしてそれを初期化します：

Copy Source | Copy HTML

1. < スクリプト >
2. FB.init（{
3. ステータス： true
4. cookie： true 、
5. xfbml： true
6. }）;
7. </ スクリプト >

[Like]ボタンでは、アプリIDを指定する必要がないことに注意してください。 これが必要な場合は、1行追加する必要があります。

Copy Source | Copy HTML

1. < スクリプト >
2. FB.init（{
3. appId： 'YOUR_APP_ID'
4. ステータス： true
5. cookie： true 、
6. xfbml： true
7. }）;
8. </ スクリプト >

ユーザーがいずれかのページで「いいね」をクリックすると、プロファイルに次のレコードが表示されます。





このエントリがどのように見えるかを説明するために、メタタグが使用されます。 セクションで説明されており、次のように見えます。

Copy Source | Copy HTML

1. < メタ プロパティ = "og：タグ名" content = "タグ値" />

次の6つのプロパティが必要です。

• og：title-ページのタイトル
• og：type-ページのタイプ。 Open Graphタイプのリストからタイプを選択する必要があります
• og：image-画像へのリンク。
• og：url-ページへの永続的なリンク。
• og：site_name-サイトの名前。
• fb：adminsまたはfb：app_id-コンマで区切られたページまたはアプリIDのFacebook ID（FacebookのページID）管理者のリスト。

ページにこれらのメタタグがない場合、Facebookはページのコンテンツに基づいてレコードを作成します。



結果はこのページです：