ふーログ

大学生ブロガーがガジェットやアニメ、気になったニュースをまったりと書き留めていく。

「この記事がよかったら良いねしよう」を設置しました!レスポンシブ対応!

スポンサーリンク

f:id:FULOG:20160826193619p:plain

 どうも、ふー(@fulogabc)です。

先日、Facebookページを作りました。

それに伴い、Facebookページのフォローが出来る「この記事がよかったらいいねをしよう」を設置しました。この名前で合ってますかね(笑)。

 

「この記事が良かったらいいねしようってなに?」って思った方。

こんな感じのやつです。

f:id:FULOG:20160827095909p:plain

 

今回参考にした記事はこちらです。こちらはWordPress向けの記事なので、WordPress以外のブログには適していません。

mama-hack.com

こちらは、はてなブログ用です。これも参考にさせていただきました。コピペで出来ますが、PCとモバイルでCSSが違うのではてなProが必要です。

www.weblog-life.net

 

 

Java

FacebookのいいねボタンにはJavaのコードが必要です。

 これを「はてなブログダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」に上のコードを追加します。

 

 

 

HTML

設置するHTMLコードです。

 7行目に「FacebookページのURL」、9行目の「ブログ名」を入れるだけです。コメントはお好みで変えてもいいかもしれません。

2行目の画像URLは、後ほど上書きするのでここでは適当な画像を入れておきます。

 

後もう一つ追加します。このコードで画像を記事のアイキャッチにしています。これは、「記事」→「記事下」に追加します。

 

 

 

CSS

 一応レスポンシブ対応していると思います。

 

 

 

まとめ

最近はまた、デザインのカスタマイズにハマってきました。