Facebookの「いいね！」ボタンを取得するためのサイトが新しくなっていました。
そのボタンの作成は、Like Buttonで出来ます。
Facebook「いいね！」ボタンの作成方法
Like Buttonページを開きます。
それぞれの説明は、下のようになります。
URL to Like：サイトのURLを設定
Width：横幅を設定
Layout：ボタンのデザインを設定
Action Type：ライクかレコメンドの設定
Show Friends’ Faces：画像表示
Include Share Button：シェアボタンの表示
どのような表示にするのか好みになりますが、WordPressで「いいね！」コードを使う場合、とりあえず「Layout」と「Show Friends’ Faces」と「Include Share Button」の３つを設定して「Get Code」ボタンをクリックします。
※以前はログインせずにコード取得できましたが、新しいコード取得ページでは「Get Code」をクリックするとログインが必要になっています。
Facebook 「いいね！」ボタンをページ毎にカスタマイズする方法
「Get Code」で取得できるコードは４種類ありますが、ブラウザが対応するのも時間の問題なのでHTML5を使うと良いと思います。しかし、従来のブラウザでも使われることを想定するならXFBMLやIFRAMEを使います。
HTML5を使う場合、記事ごとにURLを設定するには、<div class=”fb-like”….にある「data-href」を「the_permalink();」に変更します。
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
テンプレートで使用する箇所
「HTML5」のコードを貼り付ける場所は、テンプレートの記事を表示させるthe_content()付近になります。WordPressの公式テーマですと、だいたいcontent.phpファイルにthe_content()タグがあります。また、タイトル付近で表示させる場合は、the_title()タグの前後に貼り付けます。
２つあるテキストエリアのコードの使い方は、基本として下のコードはボタンを表示したい箇所に貼り付け、上のコードはbodyタグの後に貼り付けます。
他にも、Javascriptコードだけ別ファイルにして読み込む設定にしてボタンを表示させる方法もあります。
また、ソーシャルボタンをプラグインやfunctions.phpファイルを利用して表示させることもできます。
共有・ソーシャルボタンのコードをプラグインで管理して利用する方法
共有ボタン等のコードを別ファイルで管理してfunctions.phpを利用して記事毎に表示する方法
コメント