Facebookの投稿をWordpressへ自動連携する方法

Facebookの投稿をWordpressへ自動連携する方法

Facebookの投稿をWordpressへ自動連携する方法

Facebookページの投稿をWordpressへ自動反映させるプラグインは、規約が変わった事で現在使う事ができません。

海外サービスのIFTTTを使って両者を連携させる事ができますが、事前にレンタルサーバーの海外アクセス拒否を一旦解除する必要があります。

Facebookにはタイトルフィールドが無いので本文の先頭文字をタイトルに使うなどの工夫が必要です。

それに画像は一定期間経つとURLが変更されて消えてしまうので、画像は別途Wordpressで挙げ直す必要があります。

Wordpressへの自動連携に使われていたWP Facebook Portal

今回はFacebookからWordpressへの連携をする方法です。

少し前までは「WP Facebook Portal」プラグインで簡単に実現できていました。

ところがFacebookの規約が変わり、2021年頃からこのプラグイン連携ができなくなりました。

既に接続されていた環境でも、突然連動できなくなったようです。

プラグインも今は消去

WP Facebook Portalプラグイン自体も2019年頃からアップデートされなくなっています。

現在はプラグインの新規追加画面にも表示がされません。

では今、Facebook投稿をWordpressへ自動表示させるにはどうすればよいのでしょうか。

アプリ連携サービス「IFTTT」

今回は連携ツールとして「IFTTT」(イフト)という海外のWEBサービスを使います。

本記事ではこの「IFTTT」を使って、Facebookの投稿をWordpressへ自動表示させる方法を紹介します。

WordpressからFacebookへはプラグインで可能

逆にWordpressからFacebookへの連動は、プラグインを使えば簡単にできます。

以下の記事でも紹介しています。

IFTTTのアカウント登録

まずはIFTTTサイトを開きます。英語サイトですが簡単に操作できますので安心して下さい。

※基本的に無料で利用できます。ただし随所で有料版Proの紹介が出てきます。

IFTTTのTOPページ

初めて利用する場合は、右上の「Get Started」ボタンをクリックしましょう。

ログイン画面

ログインアカウントの選択画面になります。

ログイン画面

今回は新規にアカウント登録をしますので、以下の中から選びます。

・Apple
・Facebook
・Google
・自分のメールアドレス

メールアドレスとパスワードで開設

今回は、自分のメールアドレスとパスワードを設定して開設しています(他の方法でもOKです)。

Or use your email to sign up or log inのリンク部分

一番下の「Or use your email to sign up or log in」のsign upリンクを押しましょう。

メールアドレスとパスワードの入力欄

Sign up画面でメールアドレスとパスワードを入力し、下の「Get started」ボタンを押しましょう。

これでアカウント登録は完了です。

アカウント登録がされれば、登録メールアドレス宛にメールが届きます。

サインインする

ログイン後のIFTTTのTOP画面

改めてIFTTTを開き直すと、以下の様にログインした状態になります。

ログインできてない場合

上記の画面がでない場合は、まだサインインしていない状態です。

上部メニュー「Get Started」の左にある「log in」ボタンを押しましょう。

ログイン画面でメールアドレスとパスワードを入力して、サインインします。

アプリケーションの作成

それでは早速連携する2つのツールを繋げるアプリを作っていきます。

Createボタン

右上にある「Create」を押すと、以下の様な画面が出てきます。

Createの画面

条件とアクション

If this(条件)

上の「If This」の欄が条件を示します。

今回のケースでは「facebookページに投稿がされた場合」になりますね。

ですのでFacebookのアプリを選択する事になります。

If that(アクション)

下の「Then That」は、上記のIf条件を満たした時に取るアクション部分です。

今回は「Wordpressへ自動投稿」するので、Wordpressを選択する事になりますね。

この様に、条件と結果のアプリをそれぞれ接続・設定していく事になります。

IFTTTのフリープランはこの接続を3つまで作る事ができます。それ以上はProの有料プランになります。

If thisの選択

では上の「If This」欄にある「add」のリンクをクリックしましょう。

If条件の選択

アプリ選択画面

ズラッとパネルが並びますが、これらが全てIF条件を満たすアプリサービスの一覧になります。

Facebookで検索

今回はFacebookページを選択するので、検索ボックス欄に「Facebook」と入れます。

Facebookで検索してアプリが抽出された状態

抽出された候補の中から「Facebook pages」をクリックしましょう。

New Photo upload on pageの選択

New Photo upload on pageを選択する

いくつか細かい条件が表示されていますので、「New Photo upload on page」を選択しましょう。

基本的にはFacebookページで投稿があった場合が条件になるのですが、ここでは「facebookに写真が投稿される事」を条件にしています。

写真投稿が条件になりますが、その際入れた文章ももちろんWordpress側に表示されます。

文章のみの投稿はWordpressには反映されず、写真投稿時は反映されるので、出し分けが可能になります。

ログイン・Facebookページを選択

ここでFacebookにログインしていると、ログイン状態を確認してきます。

問題無ければそのままログインして、希望するFacebookページを選択しましょう。

Facebookのログインパスワードを聞かれる場合もあります。

Facebookページ名の確認

選択したFacebookページの名前確認画面

選択・完了したら、Facebookページ名を確認して下のCreate Triggerボタンを押します。

先程のCreate画面に戻り、If thisの欄にNew Photo upload on pageとfacebookページの名前が入ります。

Then Thatの選択

次に下のThen thatの設定をするのですが、その前に一つ重要な確認作業があります。

海外アクセスブロック

今回の連携は、海外サービスであるIFTTTが自分のWordpressサイトにアクセスして実現します。

もし利用中のレンタルサーバーが海外アクセスをブロックしている場合、IFTTTがサイトにアクセスできないのですね。

海外アクセス拒否を一旦解除

レンタルサーバー側でブロック機能が働いている場合は、一旦解除する必要があります。

一旦解除して初期設定をすれば、またブロック機能は戻して良いのです。

この海外アクセスをブロックする機能のON・OFFは、各レンタルサーバーごとにお調べして下さい。

アクションの選択

Then thatの欄にあるaddをクリック

では「Then That」欄にある「add」をクリックしましょう。

先程と同じようにアプリがたくさん並んだ状態になります。

Wordpressで検索

次はWordpressを指定する必要がありますので、検索ボックスにWordpressと入れます。

Wordpressだけが抽出された状態

おそらく抽出されるのはWordpressだけになりますので、それを押しましょう。

Create a postを選択する

パネルは2つしか出ないと思いますが、「Create a post」の方を選択して下さい。

Wordpressの情報入力

そうすると、Wordpressの情報入力欄が3つ出てきます。

・ブログURL
・ユーザー名
・パスワード

まずはブログURLですね。

ブログURLは、Wordpressのシステムが入ったディレクトリのURLを入れて下さい。

システムがTOPにあるブログURL

WEBサイトのTOPに直接Wordpressシステムが入っているのであれば、WEBサイトURLでOKです。

lpeg.info/の直下にWordpressが入っている場合
https://lpeg.info/と入力

システムが一つ下にあるブログURL

サイトによっては、一つ下のディレクトリにシステムが入っている場合もありますよね。

その場合は、そのシステム区画を指定するようにしましょう。

lpeg.info/cms/の中にWordpressが入っている場合
https://lpeg.info/cms/と入力

※wp-adminとかwp-login.phpの記述は必要ありません。

ユーザー名とパスワード

ユーザー名とパスワードは、Wordpressの管理画面にログインする情報になります。

先程の海外アクセスが許可されていて、かつ入力が間違っていなければ、以下の様な画面になります。

Creat a postの設定画面

いろいろ設定がいじれるようになっていますが、まずはこのまま一番下の「Create action」ボタンをクリックして下さい。

設定の確認・終了

これで先程のCreateの画面に戻ってきました。

IfとThen thatの設定

下のThenの欄に、Wordpressのアイコンと「Create a post」およびURL名が入っているはずです。

下にある「Continue」をクリックしましょう。

Review and finishの画面

次の画面でApplet titleの名前を変更できます。「Finish」をクリックすれば登録完了です。

これでとりあえずは、FacebookとWordpressを連携する事ができました。

連携テスト

では実際に連携できるかどうかテストをしてみましょう。

Facebookページを開いて、新規に投稿をしてみます。

文章を入れて写真を1枚アップしてみて下さい。この写真のアップロードがトリガーとなりますので、必ず必要です。

そのまま3分程待つと、Wordpressサイトの方に自動で投稿がされてくるはずです。

改善するポイント

ここまでで連携はできる様になりましたが、Wordpress上の投稿記事を見ると改善するポイントがいくつかあります。

改善点

・画像の下にIFTTTのリンクがある
・タイトルに投稿した文章が丸ごと入っている

これらを修正するために、もう一度IFTTTのTOPページを開きましょう。

設定の編集ページを開く

My Appletsをクリック

上部メニューから「My Applets」をクリックします。

Facebookページのタイトルがついた青いパネル

Facebookページのタイトルがついたパネルが1つあるので、これをクリックします。

右端のSettingsリンクをクリック

次のページで右側にある「Settings」のリンクを押します。

Thenの欄のEditをクリック

先程のIfとThenの画面が出てきますので、Thenの欄のEditをクリックしましょう。

Title欄(Caption)

まずTitle欄に、{{Caption}}と記載があると思います。

Captionは「Facebookページに入力された文章全体」の事を指します。

項目内にカーソルを入れると、{{}}で囲まれた表記になります。右下にある「Add ingredient」ボタンを押すと、他の項目も代入できます。

このCaptionはまずは無視して下さい。

Body欄の編集

それからBodyの欄にHTMLソースが記載されています。

Body欄のリンクに関するHTMLソース

これが先程のIFTTTリンクを出している部分ですので、以下の様に変更しましょう。

{{Caption}} <img src="{{ImageSource}}"> ここにあるリンク部分を全て消す

余計なところは全て削除します。

Body欄を修正した後の状態

これでWordpressの投稿記事内の写真下にあった表記は、次回からは消えてくれます。

Facebookにはタイトル欄が無い

次にTitleがCaptionになっている部分です。

Facebookページの投稿には元々Title入力欄が無いので、何かしらで代用するしかありません。

このCaptionを消して、代わりに「固定の文言」を入れて設定する事もできます。

ですが毎回同じタイトルだと、新着記事が並んだ時に「変」ですよね。

文章の冒頭任意数の文字をタイトルにする

SEOの面でも毎回タイトルは変えるべきですので、Captionを利用するしかないと思います。

ですが仮に長い文章を書くと、それがそのままWordpressの投稿タイトルになってしまいますね。

そこでタイトル文字として、Captionの「先頭から任意の文字数まで」を抽出する事にします。

タイトル抽出方法

タイトルにCaptionの冒頭文字を使うには、functions.phpで調整します。

現在利用しているテーマのfunctions.phpに、以下の様に追記をして下さい。

functions.phpの記述

function titlelimitchar($title){ if(mb_strlen($title) > 20){ $title = mb_substr($title,0,20) . "…"; } return $title; } add_filter( 'the_title', 'titlelimitchar' );

これでTitle欄にCaptionの先頭20文字を抜粋して入れる事ができる様になりました。

Facebookページ上で文章を入れる際、最初の20文字はそのまま投稿タイトルとして使われる事を前提に作っていきましょう。

注意:写真は一定期間で消える

Facebookからの投稿だと、Wordpressの様な自由度はありません。

文章の後に写真1枚の組み合わせがベースであるため、複数写真を入れる事もできません。

色々制限はありますが、簡単な投稿であればこの連携で充分だと言えますね。

これでFacebookからの連動が実現できた訳ですが、1つ重大な注意点があります。

写真が消える

それはFacebookを通してWordpressに掲載された写真は、一定期間経つと見えなくなってしまう事です。

10日~2週間程度は残るようですが、それ以降は画像が消えてしまいます。

第三サーバーからのリソース

よくよく画像のURLソースを見てみると、Facebookのドメインからのものではありません。

URL signature expiredと表示され、画像が見えない様子

外部サーバーの専用CDNサービスが元になっているのがわかります。

Facebook上の写真も、既にこのCDN系のURLです。

Facebookのセキュリティで一定期間経つとこのURLが変わる様ですが、Facebookの外ではこれに対応できないという事でしょう。

掲載された画像のURLが維持されないのでは、正直意味がありませんね。

ですので実質、Facebookからは文面の投稿しかできない事になります。

Wordpress側で画像をメディア保存・UPする

一定期間で画像が消えてしまう以上、何かしらの対応が必要になります。

画像が表示されている間に画像をローカル保存して、Wordpressのメディアにアップロードして再掲載するしかありません。

他にもアイキャッチ画像やタイトル・日付の変更や複数画像を入れるためには、どうしてもWordpress側からの操作が必要です。

しっかりとした新着情報を書くのなら、直接Wordpressから投稿した方良いですね。

自動反映は新規投稿時のみ

一度投稿したFacebookページの情報を編集しても、その変更内容はWordpressに反映されません。

あくまで新規投稿に限定しているので、編集する際は一度投稿を消して作り直す必要があります。

この記事をシェアする

一押し人気コーナー紹介

Wordpressテーマカスタマイズ系記事