バイラルメディア風 記事下デザインSNSボックス設置方法

      2017/01/13

よく見かける記事下のアイキャッチ画像と、SNSボタンを合わせたバイラルメディア風ボックスタイプのデザイン。素敵だなぁ、導入したいなぁと調べてたら「ままはっく」のまなしばさんが紹介されていたので、自分用に少し変えて導入してみました。

これでいいねを押される確立も上がるようですが、デザイン的にも素敵です。

Sponsored Link

デザインイメージ

FacebookページいいねやTwitterフォロワーが倍増!バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】

こちらが参考にさせて頂いたまなしばさんの記事です。

実はこの記事を見つけてから、何度も挑戦していたのですがうまくいかず、やっと出来たので今回忘備録として書いておきます。

まなしばさんのデザインはFacebookボタンとTwitter二つですが、デザインを少し小さくしたかったので、私はTwitter部分を消し、少しサイズを小さくしました。

こんな感じにしました。

デザインコード

本家のサイトには全て書かれていますのでそちらを参考にされる方がいい方はそちらを確認ください。こちらでは、Twitter部分は省いていきます。

私はFacebookいいねボタン設置HTMLコードは省きます。

HTMLコード

入れたい場所に記述します。私は本文終わったあと、アドセンス広告前に挿入したのでsingle.phpに入れました。

子テーマの編集が分からない方はこちら

WPカスタマイズは必ず子テーマで!作成方法全手順【図解】
 今回は、エックスサーバーで子テーマの作成手順に付いて説明していきます。 WordPressで子テ

10行目、25行目のハイライトした部分で

「ここにFacebookページを入れる」というところに自分のFBページURLを入れて下さい。

コードを確認頂ければ分かると思いますが、モバイル端末とPCで出し分けしています。出し分けの定義をしていない場合は、まなしばさんのページにモバイル端末分岐させるコードも載っていますのでそちらをご確認ください。

表示される文字を変更したい場合はPタグ内の日本語部分を書き換えるだけでOKです。

Facebookいいねボタン構成ツール

私の場合URLを入れただけではうまくボタンが表示されなかったのでこちらページでボタンを作り直しました。

いいね!ボタン構成ツールをクリックします。

  • 自分のFBページURLを入力します。
  • レイアウト、アクションタイプ、ボタンサイズを好みに合わせて変更(ここではButton、Smallに設定しました)
  • 友達の顔を表示するのチェックを外す
  • コードを取得をクリック

Javascript SDKかIFrameコードをコピーし、先ほどのHTMLコード10行目25行目ハイライト部分をすべて入れ替えます。私はJavascriptでうまくいかなかったのでiFrameをいれました。

HTMLコードだけでプレビューしてみて、いいねボタンと、文字がしっかり表示されていれば次にCSSでデザインを構築していきます。

CSSコード

モバイル端末でのCSS

PCのCSS

ここまで貼付けて、表示確認をしながらサイズ微調整をして完成です。

以上、Mugcupでした。

 - SEO対策, Webデザイン, WordPress