「この記事が気に入ったらいいね!しよう」設置方法

Like eat

Like eat

最近よくみる「この記事が気に入ったらいいね!しよう」というボタン。

Facebookページのいいね!を増やすためのブログパーツですが、今回設置してみたのでその手順を紹介したいと思います。

photo by Nektarios Sylligardakis

目次

バイラルメディア風のSNSボタン

「バイラルメディア風のSNSボタン」は、ママブロガーのまなしばさんの記事で紹介されているSNSボタンです。

あの大手バイラルメディアの「Spotlight」が、こちらと同じページプラグインを設置しているというお墨付きです。それ以外にも多くのバイラルメディアさいと・WEBサイトで使用されています。

searchバイラルメディアとは】

元々は米国などの海外で流行したもので、日本では2014年から注目され始めました。バイラルメディアのviralは「ウイルス性の~」という意味で、ウイルスのように記事が拡散していくからという意味合いが含まれています。

感動系、動物などの可愛い系の動画・画像の記事をTwitterやFacebookのSNSを通じて拡散させるのが目的のメディアサイトで、どれだけユーザーの心を動かせるかという事に主体を置いているのがその特徴です。


ソーシャルボタンを目立つように配置してシェアされやすいようにしているレイアウトが特徴で、SNSで拡散される事によって短期間で多くのPVを集める事ができます。

バイラルメディアの元祖

Buzz Feed

そんなバイラルメディアの元祖と言われているのが、2006年に開始された「BuzzFeed」。読者は月間2億人を超え、世界で最も人気のあるバイラルメディアと言われています。

photo by AJC ajcann.wordpress.com

設置する

それでは、設定してみましょう。

ウィジェットの設定では表示されなかったので「テーマの編集」からphpファイルを直接編集することにします。

まなしばさんのブログを拝見すると2か所設置するコード+CSSのコードがあったので、それぞれの場所に追記しておきます。

  • 「<body>直後のコード」→ header.php
  • 「SNSボタンのコード」→ single.php
  • 「CSS」→ style.css

全てのコードを追記したら確認してみましょう。

ところが、なぜか「いいね!ボタンが」表示されません..。何度やってもこんな感じです。
いいね!ボタンがない

表示された

プラグインが用意されているようなので、プラグインで設置しようかと諦めかけていましたが、何度か試したらなんとか表示できました。

こちらで表示されている<body>直後に貼り付ける用のコードではなく、Facebookページプラグイン用の<body>直後に貼り付けるコードに切り替えたらうまく表示されました。

Facebookいいねボタン設置

最終確認として、パソコン・モバイル両方で確認されているかちゃんと確認した方がいいかもしれません。

いいね!ボタン スマホ表示

[ad2]

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ジョン齊藤のアバター ジョン齊藤 ブログ運営者 / 執筆者

ブログ歴7年 / 10万PV達成 / ブロガー・動画編集者 / 使用テーマSWELL

コメント

コメントする

目次
閉じる