CocoonのFacebookウィジェットの使い方とプチカスタマイズ

Cocoon・カスタマイズ

2020.06.182024.01.25

Facebookウィジェットとは、記事下などに表示して「いいね！」ボタンを表示できるCocoonのオリジナルウィジェットで以下の２種類あります。

[C]Facebookバルーン
[C]Facebookボックス

これらの設定方法とカスタマイズ方法についてです。

カスタマイズ方法
Facebookバルーンウィジェット
- 設定
- カスタマイズサンプル
Facebookボックスウィジェット
カラーの変更

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ→追加CSS

外観→テーマエディター→style.css

Facebookバルーンウィジェット

設定

ウィジェット一覧から「[C]Facebookバルーンウィジェット」を好きな場所に追加します。

基本的に設定は不要！

タイトル

入力しても表示されないので、何も入力しなくてOKです。

メッセージ

デフォルトは上図の通り。変更したい場合を除き、そのままでOKです。

FacebookページURL

プロフィールページに設定されるものになるので未入力でOKです。

プロフィール設定については以下です。

カスタマイズサンプル

Before

After

アイキャッチの角を丸める
文字サイズを変更する

CSS

/************************************
** Facebookバルーンウィジェット
************************************/
.fb-like-balloon-thumb img{
border-radius:10px;
}
.fb-like-balloon-body{font-size:14px;}

Facebookボックスウィジェット

設定

ウィジェット一覧から「[C]Facebookボックスウィジェット」を好きな場所に追加します。

基本的に設定は不要！

タイトル

入力しても表示されないので、何も入力しなくてOKです。

メッセージ

デフォルトは上図の通り。変更したい場合を除き、そのままでOKです。

サブメッセージ

デフォルトは上図の通り。変更したい場合を除き、そのままでOKです。

FacebookページURL

プロフィールページに設定されるものになるので未入力でOKです。

Twitter ID・LINE ID

プロフィールページに設定されるものになるので未入力でOKです。

カスタマイズサンプル

Before

After

枠を変える（全体で１枠）
アイキャッチの角を丸める
文字サイズ・装飾を変更する

CSS

/************************************
** Facebookボックスウィジェット
************************************/
.fb-like-box{
background: transparent;
display: inline-block;
height: 250px;
width: 100%;
}
.fb-like-thumb{
max-width: 100%;
height: 0;
}
.fb-like-thumb img{
border-radius:10px;
}
.fb-like-box .fb-like-thumb > *{
min-width: 100%;
height: 250px;
object-fit: cover;
}
.fb-like-content::after{
content: '';
width: 100%;
height: 250px;
position: absolute;
z-index: -1;
background: #555;
opacity: 0.6;
border-radius:10px;
}
.fb-like-content{
height: 250px;
position: relative;
z-index: 2;
}
.fb-like-buttons{
margin: 10px 0;
}
.fb-like-message{
color: #fff;
font-size: 1em;
font-weight: bold;
text-shadow: 1px 2px 2px #ccc;
}
.fb-like-sub-message{
color: #fff;
font-size: 0.9em;
text-shadow: 0px 0px 3px #ccc;
}