カスタムスニペット

ドロップダウンコメントボックスと最初の4つのコメントをデフォルトで表示する。

#cff .cff-comments-box{ display: block; }

フィードにボーダーを付ける

ボーダーのサイズ、スタイル、色を変更します。

#cff{
  border: 1px solid #000;
}

投稿を水平に表示する

その方法については、こちらのFAQをご参照ください。

Facebookのフィードのフォントを変更する＆Google Fontsを使用する

その方法については、こちらのFAQをご参照ください。

サムネイルリンク画像を半角レイアウトサイズに変更

デフォルトでは、共有リンクに関連する画像はサイズが小さいため、サムネイルとして表示されます。このスニペットは、半角レイアウトに合わせてサイズを大きくします。

#cff .cff-link {
  width: 50%;
  max-width: none;
}
#cff .cff-link img {
  max-width: none;
  width: 100%;
}
#cff .cff-text-link {
  width: 47%;
}

サムネイルリンク画像を全幅レイアウトサイズに変更

デフォルトでは、共有リンクに関連付けられた画像は、サイズが小さいためサムネイルとして表示されます。このスニペットは、全幅レイアウトに合わせてサイズを大きくします。

#cff .cff-link {
  width: 100%;
  max-width: none;
}
#cff .cff-link img {
  max-width: none;
  width: 100%;
}
#cff .cff-text-link {
  width: 100%;
}

モバイルの固定高さスクロールバーを削除

フィードに固定高さを設定すると、スクロールバーが適用されます。次の CSS スニペットを使用すると、モバイルでの固定高さを削除してスクロールバーを表示しないようにすることができます。

@media all and (max-width: 480px){
  #cff{ height: auto !important; }
}

投稿に影をつける

以下のスニペットを使って、各投稿の周囲に影を付けることができる：

#cff .cff-item {
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

次のスニペットを使って、投稿にカーソルを合わせたときに影を付けることができます：

#cff .cff-item:hover {
box-shadow: 0 0 5px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 5px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px 10px rgba(0,0,0,0.5);
}

スニペット値の編集方法については、こちらをご参照ください。

Facebookの投稿からメイソンリーカラムのグリッドレイアウトを作成する

その方法については、こちらのFAQをご参照ください。

フィードのヘッダーをFacebookページにリンクする

スニペット内のURLを適宜変更してください。

$('.cff-header').css('cursor', 'pointer').click(function(){
  window.open('https://facebook.com/smashballoon', '_blank');
});

カバー写真の更新投稿を削除

カバー写真を更新しました」というテキストを含む投稿を削除します。このテキストは任意の言語に変更できます。

$( "#cff .cff-item:contains('updated their cover photo')")).remove()；

投稿テキストから特定の文字列またはハッシュタグを削除する

ハッシュタグを使って投稿をフィルタリングしている場合（例：#showonwebsite）、そのハッシュタグをフィードに表示させたくない場合があります。以下のスニペットを使って、特定の文字列やハッシュタグを削除することができます。

$('#cff .cff-item').each(function(){
  var $self = $(this),
    str = $self.find('.cff-text').html();
  
  if( typeof str !== 'undefined' ) $self.find('.cff-text').html( str.replace("#myhashtag", "") );
});

投稿の最初の50文字から投稿タイトルを作成する。

以下のスニペットは、投稿の最初の50文字に基づいて、各投稿に見出し3タグを作成します。

$('#cff .cff-item').each(function(){
  var $self = $(this),
  posttext = $self.find('.cff-text').text(),
  elips = '...';

  if(posttext.length < 50) elips = '';
  $self.prepend('<h3 style="margin-bottom: 20px;">' + posttext.substr(0,50) + elips + '</h3>'); });

フィードの写真にPinterestの「Pin it」ボタンを追加する

このスニペットを動作させるには、まずポップアップフォトライトボックスを無効にする必要があります。これは、プラグインのカスタマイズページで「ポップアップライトボックスを無効にする」設定をチェックすることで可能です。以下のスニペットをプラグインのカスタムJavaScriptセクションに追加します：

$('.cff-item').each(function(){
	var $cffItem = $(this),
		$cffPhoto = $cffItem.find('.cff-photo');

	$cffPhoto.prepend('<a href="https://www.pinterest.com/pin/create/button/?url=' + $cffPhoto.attr('href') + '&media=' + $cffPhoto.find('img').attr('src') + '&description=' + $cffItem.find('.cff-text').text() + '" data-pin-do="buttonPin" data-pin-config="above" style="position: absolute; top: 10px; left: 10px; z-index: 999;" target="_blank" title="Pin it"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>');
});

Facebookの投稿から基本的なスライドショーを作成する

その方法については、こちらのFAQをご参照ください。