タイトルの件ですが、開発者向けの Facebook のドキュメントにも書いてありますが、要は

  1. “.fb-page”の生成コードを埋め込む際の width の設定を 500px に設定。これはページプラグインの設定可能最大幅です。
  2. その生成されたコードの親要素の幅を指定したい幅に設定します。CSS で設定することも可能です。

デスクトップ版で表示させたい幅を media query で記述してあげます!これだけでした(^^)

@media screen and (min-width: 500px) {
  .fb-page-parent > .fb-page {
    width: 300px;
  }
}

2015/07/14 追記

上記のコードだけでは、スマートフォンでウィンドウサイズを超えて、500px で表示されて、全体の表示が崩れる事態が発生しました。なので、CSS には下記のようなコードを追記することにしました。お粗末さまでしたm(_ _)m

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
  width: 100% !important;
}

参考URL: https://developers.facebook.com/docs/plugins/page-plugin#adaptive-width