バイラルメディア風、記事下にアイキャッチ画像と並べてSNSボタンを設置する方法

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

バイラルメディア風SNSボタン
キュレーションサイトやバイラルメディアなどで最近よく見かけていた、なんかクリックされやすそうな雰囲気の記事下SNSシェアボタン。


どうやって実装するのかな~と思っていたら、ブロガーのまなしばさんが思いっきりドンピシャの記事を書かれていたので、同じように実装させていただきました^^。
>>FacebookページいいねやTwitterフォロワーが倍増!バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】

テンプレや環境などが違うためやや工夫しましたので、その点を含めて私が実装した内容をシェアしますね。

<スポンサードリンク>


記事下にアイキャッチ画像と並べてSNSボタンを設置したい時の検索キーワード


そもそもこういった記事下にアイキャッチ画像などと並べてSNSシェアボタンを置くデザインを何と呼ぶべきかわからず、検索キーワードに悩み、「キュレーションサイト風 SNSボタン」「画像とSNSボタン」「フラットデザイン SNSボタン」などとりあえず思いつくキーワードで探したところ、「バイラルメディア風 SNSボタン」でまなしばさんの記事にたどり着きました^^。


新し目のデザインって私のようなウェブデザイン素人ではどういったキーワードで探せば良いのかもわからないので困ったもんです。


以下ままはっくさんの記事内のコードと併せてご紹介。(コード記事転載はまなしばさんにOKいただいております。)

PHPのコード


まず、SNSボタンを設置したい場所に以下のコードを追加。
私は単一記事の投稿 (single.php)の記事コンテンツ下に表示されるように設置しました。




上記の方法で問題なく表示されるはずなのですが、私はなぜかPC用のfacebookいいねボタンが正常に表示されず。

仕方ないので、10行目の



だけFacebook Developersでいいねボタンだけ作り直して入れ替えると問題なく表示されました。


また、<?php if (is_mobile()) :?>でスマホとPCの分岐がされていますが、私のブログは作り立てだったので、functions.phpにスマホ分岐関数について追加しておらず・・・。
functions.phpに以下のコードも追加しました。



他のファイルも同様ですが、functions.phpを修正するときは、特にバックアップをバックアップをバックアップをしっかりとってから修正してくださいねT=T。


また、既にfacebookいいねボタンなどを設置している場合は不要かと思いますが、初めてfacebookいいねボタンを設置する場合は以下のコードも必要です。


開始bodyタグの直下に張り付けることが推奨されています。




CSSのコード

CSSは以下の通り。
PC版のCSS




スマホ版のCSS



facebookいいねボタンを押すとコメント欄が切れてしまう問題


基本的に上記のcssで問題ないと思うのですが、実装したあと、テストでfacebookいいねボタンを押してみるとコメント欄が切れていることに気づきました。

sns-button1
こんな感じ。
あ~これ前もあったな~と思い、記憶をさかのぼって、手持ちのサイトのコードを見て思い出しました^^。

cssに以下を追記すればOK。



sns-button2
上手にできました^^。
以上、完全に作業日誌ですが、記事下のバイラルメディア風SNSシェアボタンの実装方法でした!

今日も最後までお読みいただきありがとうございました!

MINI Suki Koto Log
SNSシェアボタンはまだまだ全然うまく実装できてないので、これからどんどこ修正入れていきます!



にほんブログ村 株ブログ 女性投資家へ

ブログランキングに参加中です。 肉球ポチで猫が喜びます(=・ω・=)。

更新情報をお届けします!(=ФωФ=)

最新情報をお届けします

フォローという手もあります!(=ФωФ=)

2015-07-28 | Posted in ブログ運営記録, SNSとの連携8 Comments » 

コメント8件

 にんぽ | 2015.07.30 11:10

バイラルメディアの場合は、この「いいね!」は記事に対するいいね!ではなく、Facebookページに対するいいね!です。記事へのいいね!と思わせてFacebookページにいいね!させて購読者を増やすことを目的としているようですね

 neco | 2015.07.30 13:27

にんぽさんコメントありがとうございます!
実は最初記事に対するいいね!なのかfacebook
ページに対するいいね!なのか分かっておらずビジュアル面のみで気に入って設置しました^^;。

どちらがブログのために良いのかは判断しかねますが、目的をもって設置することがきっと大事なんですね!

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

[…] バイラルメディア風、記事下にアイキャッチ画像と並べてSNSボタンを設置する方法 | スキコトログ […]

 みつ | 2015.11.03 7:45

参考にさせて頂いて設置しました
ありがとうございます。

PCでは正常に表示されますが、スマホだと
イイねをタップると表示がきれてしまいます、こちらのページもスマホで見ると切れてしまいますが…

対処方法など有りますでしょう?

 みつ | 2015.11.03 7:47

ちなみにに
.fb-like iframe {
max-width: none!important;
}

追記しましたがスマホだと切れてしまいます

 neco | 2015.11.16 21:16

コメントありがとうございます。レスが遅くなりすみません!
スマホでの表示確かに切れてしまっていますね^^;。
少し調べてみたのですが、cssで上手く調整する方法をバシッと見つけられていません。
またきれいに表示できる方法発見しましたら記事に追加させていただきますね。

 iyon | 2015.11.22 6:01

ちょうど探していた設置法でしたので助かりました。
自分の場合は、ボタンを押すとコメント欄が下記の様になってしまいます。

・コメント欄が見切れる(spのみ)
・コメント欄の下にある文字が透けてみえる

などの不具合が起きてしまいました。対処方法などありましたら記載頂ければ助かります!

 snakky | 2016.07.14 12:05

バイラルメディア風ボタンを参考にさせて頂きレスポンシブサイトに設置していたのですが、
ブラウザを小さくしてもはみ出るようになってしまいました。

ちなみに今みているこのページもはみ出ております。

以前は問題なかったと思うのですが、対処方法などありますでしょうか?

Comment





Comment