FacebookページのLikeBoxをレスポンシブWebデザインに対応してみた。

Facebookページを作成してみた、あきら(@akrwnet)です(^v^)

 

Facebookページって意外と簡単に作成できるもんですね。

2012-07-04_23h27_36

 

作成時には、Facebook naviを参考にするとよいでしょう。

 

 

 

スポンサーリンク

Facebookページ作成時の注意点

簡単に作成できましたが、実は作成しようとした時にいきなりつまずいたところがあります。

作成ページに行くと!?

2012-07-04_15h55_53

なんだかどれを選んでいいかわからないんです・・・

 

ちょっと調べてみると、個人のブログであれば、右上のブランドまたは製品というのがよさそうです。

2012-07-04_15h59_59

ウェブサイトというカテゴリがあるので、これが該当するのかな。

しかしこれは後から変更できるようなので、実は適当で構わないみたいです。

 

写真をアップロード(あとで変更可能)

2012-07-04_16h17_47

 

基本データ入力(あとで変更可能)

2012-07-04_16h22_46

この次の工程であるFacebookウェブアドレス、これは変更不可なのでちゃんとしたのを入力すると良いかと思います。

ただ、25人にいいねを押されると、一度だけ変更可能になるらしいです。

 

 

また、もう一ページ試しにつくってみた時には、この3工程目が表示されなかったです。理由はわからず??キャプチャ撮り直そうと思ったのに・・・

で、こんな感じにほとんど編集が可能です。

2012-07-04_17h26_49

ここで、ウェブサイト・ブログ→個人のブログというように設定し直すと良いかもしれません。

※結論としては、アドレス以外はあまりきにしなくてよいので、とりあえず作成してしまうのが良いかと思います。

 

とりあえずですが、サイドバーにも設置完了です。

2012-07-05_00h58_24

 

 

ブログに設置はJetpacプラグインがおすすめ!

通常ブログに設置するには、生成されたソースを組み込まなければいけないのですが、Jetpacのプラグインを使用していれば、ブログに簡単に設置することが可能です。

※プラグインの新規追加で、Jetpack by WordPress.comで検索すれば出てきます。

 

Jetpacには、追加サイドバーウェジットがあるので

2012-07-05_02h58_30

 

それをサイドバーに追加するだけでOK!

2012-07-05_02h52_10

これだけで簡単にブログに表示することができますが、どうしてもレスポンシブ対応にしてみたくなってしまいます。無駄に・・・

 

 

レスポンシブ対応するにはFTPで直接編集する必要あり

またまたレスポンシブ対応させたくなってしまったのですが、今回は簡単な編集方法がわからず、プラグインのソースを直接編集して見ることにします。

WordPressの管理画面からは編集できないので、FTPソフトかレンタルサーバーのFTPツールでfacebook-likebox.phpを開きます。

場所は

/wp-content
┗/plugins
┗/jetpack
┗/modules
┗/widgets
┗/facebook-likebox.php

 

このファイルの66行目辺りにあるpxを%変更

2012-07-05_15h49_38

※widthの方です。heightのpxは高さになるのでそのままでOK!

 

また、デフォルトのままでは、縦幅が432pxと長いので、ついでに編集

42行あたりにある$like_args[‘height’] = 432;を、お好みの長さに

2012-07-05_15h44_30

※ここでは250にします。

 

そしてプログパーツの横幅を100に編集すると

2012-07-05_03h24_03

 

しっかり、レスポンシブな感じに出来上がり!

2012-07-05_03h34_03

横幅を狭めても、それに対応!

ここまですると逆に見づらいのかと思うけど、デフォルトのままではデザインがはみ出してしまうので、それは個人的には嫌いです。

 

2012-07-05_03h34_27

さらに縮めると、下に落ちてしっかり広がってくれます。

別にここまで、レスポンシブ対応させる必要もないかと思いますが、やってやった感があるので、だいぶ満足です♪

 

同じように、こだわりたいという方がいれば

参考に(^‐^)ゝ

スポンサーリンク

シェアする

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

フォローする