Simple Facebook ConnectでFBと連携

Pocket

以前このブログはWordbookerというプラグインでFacebookと連携していました。

またサムネイルはOpen Graph Proというプラグインで表示させていましたが、facebookの仕様変更が頻繁なためか、いろいろと不具合があったので、思い切ってSimple Facebook Connectというプラグインに変更してみました。

先日発表されたFacebook公式のWordpress用プラグインを使ってみました。相当高機能なのですが、タイムラインの表示が何か変であること、サムネイルの表示設定がないということ、現状ではそこまで高機能なものは必要ないということで見送りました。

Simple Facebook Connectに関してはプラグインをダウンロードしてインストールしてやるだけなので難なく出来るのですが、Facebook側の設定が必要になるのでそのあたりがWordbookerと比べて面倒です。

Simple Facebook Connectを使用するためにはFacebookのアプリケーションIDが必要となります。
Facebook側でアプリケーションの作成をしますが、そのあたりは詳しく書かれている方がみえますのでそちらを参考にしてみてください。

Simple Facebook Connectをインストールすると設定画面はこのようになっていると思います。

 

Main Settings

Simple Facebook Connectの管理画面

Facebook Application IDとFacebook Application Secretをそれぞれ入力します。

Facebook Pageがあればそちらも入力する必要があるかと思います。

現状ではぼくはFacebook Pageを持っていないので入力していません。

とここまで書いて気付いたのですが、このプラグインは古いのでしょうか?今はFan Pageとは言わないですよね。

でもWordpressのプラグインのページを見ると最後のアップデートが、2012年7月4日の段階で2012年6月12日になっているので、アップデートはしているようです。

 

SFC Modules

Simple Facebook Connectの管理画面

Publisher (send posts to Facebook)とPhoto Posting (integrate FB Photo Albums into the Media display)のみにチェックを入れました。

Publisher (send posts to Facebook)はもちろんタイムラインへの表示です。

Photo Posting (integrate FB Photo Albums into the Media display)はFacebookにある写真を挿入できる機能のようです。

現状で欲しい機能はこれくらいです。いいねボタンやシェアボタンはプラグインのWP Social Bookmarking Lightでまとめて表示しているので不要です。

Login with FacebookはFacebookのIDでログインできるとかいう機能でしょうか?

 

Facebook Metadata

Simple Facebook Connectの管理画面

Default Image。これが問題です。

この機能が欲しくてSimple Facebook Connectを導入することにしたのですが・・・。

というのはFacebookのタイムラインに表示されるサムネイルのディレクトリをここに入力するのですが、WP Social Bookmarking Lightが入っているため、OGPのmetaタグの順序によって表示されるサムネイルが変わってしまう。

今回の場合はEvernoteのサムネイルが表示されてしましました。

仕方ないので、テンプレートに直接記述しました。

<head>

<meta property="og:image" content="<?php bloginfo('template_url'); ?>/◯◯◯◯◯.png" />
<?php wp_head(); ?>
</head>

これならばmetaタグを強制的に一番上に持ってこれるのでサムネイルが表示されます。

ただ、理想的ではないですね。

プラグインのmetaタグの順序を変更できないのでしょうか?

サムネイルを表示できるように記述していますが、写真を投稿するとサムネイルではなく写真が表示されます。

Open Graph Proでもそうでしたので、どこかにそういった記述がされているのでしょう。

ただ、写真を載せたほうが10倍見てくれる確率が上がるということですので、そのままにしてあります。

Default DescriptionはブログのDescriptionをとりあえずそのまま入力しました。

 

Publish Settings

Simple Facebook Connectの管理画面

Automatic Publishingはチェックを入れています。

実はよくわかっていません。

Extended Permissionsは、初めて使用するときはアプリの承認となりますので、クリックしてFB側で承認してください。

Token Checks
下記の2つが出れば承認されてプラグインが使用できるようになります。
User ID and Access Token found!
Application Access Token found!

変更を保存をクリックして完了です。

 

実際のタイムラインでの表示

さっそくテスト投稿して実際にタイムラインに表示されたものを見ると、サムネイルの下にある小さなアイコンが味気ないものでしたので、こちらも変えました。

当サイトでFabiconとして使っているものをそのまま利用することにしました。

FB タイムライン

アイコン変更はFB側の作業です。

https://developers.facebook.com/に行き、一番上、右のアプリをクリック。

使用しているアプリのアプリを編集ボタンをクリック。

アイコンを指定できるのでアイコンを指定すればOK。

サムネイル右下のアイコンを変更をクリックすれば選ぶことができます。

FBのアイコン編集画面

テスト投稿した画面です。Shareと書かれている左横のアイコンが変わっています。

FB テスト投稿画像

これでOKです。

現状はこれで十分ですので、しばらくはこのまま行こうと思います。

コメントする

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
(必須)
メールアドレス(必須・公開されません)
コメント本文(必須)

ページトップへ