WP Social Bookmarking Lightの「いいね!」が 表示されない時の対策

WordPress › WP Social Bookmarking Light « WordPress Plugins

2012年7月に書いた投稿です。2014年6月現在 もう古くて参考にならないかもしれません。

各種SNSボタンを簡単に表示できるプラグイン『WP Social Bookmarking Light』

ところが、プラグインの設定でFacebookの「いいね!」ボタンを「iframe」で表示しようとするとなぜか消えてしまいます。ちなみに「xfbml」では表示されるけど、位置が微妙にずれてしまうという人も多いのではないでしょうか。

なぜかと調べてみたら、消える理由はソースコードの記述ミスということだそうです。
早速直していきましょう。

ダッシュボードから「プラグイン」→「wp social bookmarking light」の「編集」をクリックします。

画面が変わってソースが表示されたら、画面の一番右側にずらっと表示されているリストから「wp-social-bookmarking-light/modules/services.php」を探してクリックします。

services.phpのソースが表示されたら、全体の真ん中ちょっと下辺りに以下のコードを探します。

$action = $options['facebook_like']['action'];
$colorscheme = $options['facebook_like']['colorscheme'];
$send = $options['facebook_like']['send'] ? 'true' : 'false';
$width = $options['facebook_like']['width'];
$font = $options['facebook_like']['font'];
$locale = $options['facebook']['locale'];
  if($version == 'iframe'){
    return $this->link_raw('<iframe src="//www.facebook.com/plugins/like.php?href='.$this->encode_url
                    .'&send='.$send
                    .'&layout=button_count'
                    .'&show_faces=false'
                    .'&width='.$width
                    .'&action='.$action
                    .'&colorscheme='.$colorscheme
                    .($font == '' ? '' : '&font='.$font)
                    .($locale == '' ? '' : '$amp;locale='.$locale)
                    .'&height=21"'
                    .' scrolling="no" frameborder="0"'
                    .' style="border:none; overflow:hidden; width:'.$width.'px; height:21px;"'
                    .' allowTransparency="true"></iframe>');
}

上記ソースを発見したら390行目を見て下さい。
ソース全体から見て390行目ですが、バージョンの更新によりずれが生じると思いますのでご注意下さい。

プラグイン内の編集では行数が表示されないため、service.phpを一度FTPでダウンロードしてTeraPadなどのテキストエディタで編集→アップロードの方が確実だとは思いますが、書き直す部分はたった一箇所ですのでお好みの方法で手を加えて下さい。

390行目を書き換えます。(行数はバージョンによって前後するかもしれませんのでこの付近で探して下さい)

.($locale == ” ? ” : ‘$amp;locale=’.$locale) となっていますが
           ↓
.($locale == ” ? ” : ‘&amp;locale=’.$locale) に直してあげます。

これで上書き保存して確認すればきちんと表示されているはずです。
お疲れ様でした。

おまけ

Facebookのシェアアイコンを変更する際は359行目からのソースを変更します。

使いたいアイコン画像をFTPソフトで「wp-content」→「plugins」→「wp-social-bookmarking-light」→「images」の中にアップして、359行目からの

function facebook()
{
    $url = "http://www.facebook.com/share.php?u={$this->encode_url}&t={$this->encode_title}";
    $alt = __( "Share on Facebook", WP_SOCIAL_BOOKMARKING_LIGHT_DOMAIN );
    $icon = WP_SOCIAL_BOOKMARKING_LIGHT_IMAGES_URL."/facebook.png";
    return $this->link( $url, $alt, $icon, 16, 16 );
}

この2行を変更しましょう。

“/facebook.png“;をアップした画像の名前に変更。
そして360行の「16, 16」という数字を変更します。

この数字は縦横の大きさですので使う画像に合わせて調節して下さい。
ちなみにこのページのFacebookシェアアイコンは横を大きめに取って「65, 20」の大きさです。

※アイコンを変更する可能性があるので画像で残しておきます。こんな感じになりました。


※2013年4月追記

久しぶりに見てみると「LINEに送る」というボタンも追加されているようです。
更新によりFaceBookのシェアアイコン画像も上書きで純正?に戻されてしまいましたので表示をやめました。

また、Twitter画像の横に不自然な隙間ができていましたが、こちらは「設定」→「WP Social Bookmarking Light」から画面上のほうの「スタイル」タブを選択し、一番下の

.wsbl_twitter { width: 100px;}

ここで調節するようです。このブログでは80pxにしています。

「EVERNOTE」のクリップボタンと「LINEに送る」ボタンもついでに設置してみました。
するとどういうわけかアイコンの背景が白くなってしまい不自然です。(右の2つ)

wp-social1

元画像の背景が白になっているのかな?? と思い画像をダウンロードして黒背景で確認してみましたが透過のpngファイルでした。

wp-social2

そこでダッシュボードの「設定」→「WP Social Bookmarking Light」から「スタイル」タブを選択し、「.wp_social_bookmarking_light img」内に背景色を追加で指定してみました。

wp-social4
.wp_social_bookmarking_light img{
    border: 0 !important;
    padding: 0;
    margin: 0;
    vertical-align: top !important;
    background: #333;
}

目立つように「#333」を指定すると、このように背景が変更されました。

wp-social3

ということは背景色を「無し」に指定する「background: none;」で透過されると思ったのですが、再び白くなってしまいました。

ということで、最終手段としてこのブログの記事の背景色「#a1a6ad」をズバリそのまま指定して同じ色にしました。

記事を書いている部分の背景色ですが、実際は「background: rgba(255, 255, 255, 0.6);」という指定です。これは本来は白色で、背景を0.6透過するという指定ですので、後ろのBODYのネイビーカラーが透けて灰色っぽく見えています。

おそらくこの白色が反映されているのではないかと考えています。
つまり背景が透過などのややこしい設定になっていない場合は、はじめから綺麗に表示されているはずです。

「EVERNOTE」と「LINEに送る」の背景を同じように「background: rgba(255, 255, 255, 0.6);」と指定すると白色になってしまったので、実際に見える色「#a1a6ad」を直接指定する強引な方法となってしまいました。

どうしてもという場合はご参考下さい。以上です。

※2014年8月追記 消えたGoogle+1ボタン

いつの間にか消えている……。
いや、いつの間にかと言うかきっとPHPのバージョンを上げた時に違いない。

なんとか解決しました。若干長くなったので別記事にしてみました。
よろしければご参考下さい。

WP Social Bookmarking LightのGoogle+1ボタンが表示されない時の解決方法

コメント

 DISQUSコメントシステムとは?
DISQUSコメントシステムFacebook Twitter Google などのアカウントを使用してコメントを残すことができます。
また、それらを使いたくない場合でも メールアドレスのみ でコメントが可能で、その際のアドレスはもちろん非公開です。
YouTubeTweet などはURLを貼ると自動で埋め込み表示されますし、画像をアップすることもできます。
お気軽にコメント頂けると嬉しいです。

Pingback & Trackback

  • WP Social Bookmarking Lightの『いいね!』の表示不具合 | アナログさんのためのワードプレス(WordPress)の使い方 より:

    […]  にします。 これでファイルを更新します。 これで『いいね!』も正しく表示されました。 参考元はこちら WP Social Bookmarking Lightの「いいね!」が 表示されない時の対策 […]

  • […] 「バカだね」ボタンは自作しました。ご自由にお使い下さい。 画像ダウンロード WordPressの場合はこのHP等を参考に変更されると良いと思われます。 魔ッドアングラー さんのHP […]

New Post



Random


CLOSE