インストール
拡張機能は、他のWordPressプラグインと同じようにインストールします。Custom Facebook Feed Proプラグインをアップロードしてインストールするときと同じ手順を踏むことができます。
すべてのFacebookフィード拡張機能を含むSmashライセンスまたはAll Access Bundleをお持ちの場合は、Custom Facebook Feed Extensionsプラグインをインストールして有効化した後、WordPressダッシュボード>Facebookフィード>拡張機能で使用したい拡張機能を個別に有効化する必要があります：
アルバムIDを探す
FacebookのアルバムのIDは、URLから見つけることができます。それは、以下のハイライトのように、URLの最初の2つのピリオドの間の数字のセットです：
https://www.facebook.com/media/set/?set=a.440612488444.242105.15087023444
プラグインのバージョン4.0以上では、フルアルバムのURLを直接入力することもでき、プラグインは自動的に正しいIDを検索します。 Facebook Feed > All Feeds > Newに進みます。フィードの種類を選択するよう求められたら、「シングルアルバム」を選択します。アルバムのURLまたはIDを追加するよう求められます。 すでに設定されているフィードの場合は、Facebookフィード>すべてのフィード>フィードの編集を選択>設定>フィードの種類>変更を クリックし、次にシングルアルバムをクリックします。 フィードの種類を変更すると、この特定のフィードにアルバムのURLまたはIDを追加できるようになります。 写真をクリックすると、ポップアップライトボックスにキャプションが表示されますが、ライトボックスを開かずに写真をホバー/ロールオーバーしたときにキャプションを表示することもできます。以下のJavaScriptをサイトに追加するだけです。これはカスタムJavaScriptプラグインを使用して手動で行うことができます。詳しくはこちらのドキュメントをご覧ください。プラグインバージョン4.0以上
シングルアルバムフィードの作成
ホバー時にキャプションを表示
$('.cff-album-cover').each(function(){
$self = $(this);
$self.find('.cff-photo-hover').html('<p style="color: #fff; width: 90%; padding: 5%;">' + $self.find('.cff-lightbox-link').attr('data-title') + '</p>');
});
プラグインバージョン4.0
ショートコード
Albumエクステンションを使用すると、ショートコードで直接FacebookのアルバムのIDを指定することができます：
Problem displaying Facebook posts. Backup cache in use.
Type: OAuthException
また、'albumcols'ショートコードオプションを使用してフォトグリッドの列数を設定し、'num'オプションを使用して表示する写真の数を設定することができます：
Problem displaying Facebook posts. Backup cache in use.
Type: OAuthException
ショートコードオプション
| 名称 | 属性 | オプション | 説明 | 例 |
| アルバムID | アルバム | 任意のアルバムID | 表示したいFacebookのアルバムのID | album=440612488444 |
| 列数 | アルバムコルス | 1-4 | 写真グリッドの列数 | albumcols=2 |
| 写真枚数 | 番号 | 任意の数 | 表示する写真の枚数 | num=50 |
新しい写真から表示する
写真の並び順を変更するには、フェイスブックのアルバム内で、隅にある3つの点をクリックして「アルバムを編集」を選択し、手動で並び替える必要があります。その後、アルバム内の写真をドラッグ＆ドロップし、「保存」をクリックします。その後、プラグインの設定ページでキャッシュをクリアすると、プラグインが更新され、Facebook上の並び順が反映されます。
ホバー時にキャプションを表示
写真をクリックすると、ポップアップライトボックスにキャプションが表示されますが、ライトボックスを開かずに写真をホバー/ロールオーバーしたときにキャプションを表示することもできます。プラグインのカスタマイズページのMiscタブにあるプラグインのCustom JavaScriptセクションに以下を追加するだけです：
$('.cff-album-cover').each(function(){
$self = $(this);
$self.find('.cff-photo-hover').html('<p style="color: #fff; width: 90%; padding: 5%;">' + $self.find('.cff-lightbox-link').attr('data-title') + '</p>');
});
