XOOPS Cube FacebookのOGPを指定する!

この記事は約4分で読めます。
この記事は最終更新日から8年経過しています。内容が古い可能性があります。

Image

昨日は WordPress FacebookのOGPをプラグインなしで指定する! という記事を書きました。OGPの指定方法の基本が大体分かったので、今度はXOOPS CubeでもFacebookのOGPが出るようにしたいと思います。

スポンサーリンク

今現在の状況を確認してみました

トップページ
Image

↑トップのスライダーの一つが表示されているようです

社内システム開発事例 
Image

↑画像のあるページなのですが、なぜかヘッダーのロゴが出ています

サービス WEBシステム開発受託 美術館・博物館WEBサイト
Image

↑なぜか左ブロックの関係ないバナーが…

サービス 社内システム開発受託 メディア・動画検索システム
Image

↑画像がないですorz

…ってことで全然ダメです(>_<)。

OGPの設定をtheme.htmlにする

ということで、現在使っているテーマのtheme.htmlを修正して意図したとおりのOGPを出したいと思います。

どのように出したいかというと、今回はblog的な記事はありませんので、全てのページで画像は会社のロゴを出したいと思います。

まず、現在使っているテーマのtheme.htmlを開き、

<head>

という部分を

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

に置き換えます。

それから、昨日の記事の「それから、fb:admins に指定するIDを探します。」あたりを参照してfb:adminsに入れるIDを取得します。

そしてOGPのソースを以下の様に編集し、

<meta property='og:locale' content='ja_JP'>
<meta property='fb:admins' content='【上で取得したfb:adminsの15桁ID】'>
<meta property='article:publisher' content='【株式会社RYUSのFacebookページがURL】' />
<meta property='og:type' content='website'>
<meta property='og:title' content='<{$xoops_sitename}> - <{$xoops_pagetitle}>'>
<meta property='og:url' content='<{$xoops_url}><{$xoops_requesturi}>'>
<meta property='og:description' content='<{$xoops_meta_description}>'>
<meta property='og:site_name' content='<{$xoops_sitename}'>
<meta property="og:image" content="【デフォルト画像のURL】">

使用しているテーマのtheme.html

</head>

の直前にペーストして保存しました。

もはやお約束。スグには確認できません。あと2ステップ

ということでテーマも修正したし読み直してソースを見たのですが、入れたはずの og: という記述がどこにも見当たりません(>_<)

XOOPSのお約束でした。。そうそう、テンプレートキャッシュ消さないとね、ということで

Image

管理画面に入り、 ALTSYS>テンプレートの高度な操作 で、コンパイル済テンプレートキャッシュ削除します。

あと1ステップ。さっき確認のために表示してしまったページのFacebookOGPキャッシュを消す

昨日の経験から、もう一つ「FacebookのOGPキャッシュを消す」ということをしないといけないことが想像つきました。

ということで、

Facegook Open Graph Object Debugger

ページで、先ほどOGPの確認のためにFacebookで表示したページを1ページずつ入力して DEBUGボタンを押します。これでFacebookOGPキャッシュがクリアされます。

OGPが正しく設定されていることを確認♪

ここまで来ればあとは表示確認です。

トップページ
Image

社内システム開発事例 
Image

サービス WEBシステム開発受託 美術館・博物館WEBサイト
Image

サービス 社内システム開発受託 メディア・動画検索システム
Image

ということで先ほどまで関係のない画像が表示されてたり、画像がなかったりしたページも全て指定したロゴ画像が出るようになりました(^^)/

これで心おきなくシェアしていただけるかと思います。よろしくお願いします~

2015/01/08追加:コンテンツ内容からOGP画像を指定できるような記事を書いてみました。「XOOPSコンテンツの画像で FacebookのOGP画像を指定する!」

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

XOOPS Cubetheme テーマインターネットFacebookOGP
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

  1. 「今回はblog的な記事はありませんので、全てのページで画像は会社のロゴ」とありますが、XOOPSでもFBでシェアされた際にWordpressのように記事ごとに使用された画像を表示させることは可能でしょうか?例えばBULLITIN HD やd3blogなんかを使っていた場合、一番最初に貼り付けた画像をOGPで指定させるとかできればXOOPSで作られたブログやニュースも利便性がかなりアップするのですが・・

    • 兎本 美佳 より:

      戸北さんこんにちは!XOOPSで記事から画像を取ってくる、という機能は私の知る限りは公開されていないため、WordPressと同じようにogp画像をコンテンツから自動的に設定することがいまのところできません。
      以前私自身が作ったmomoimageという画像取得モジュールだとそれが実現できるのですが、公開するには色々な点をクリアしないといけないのでまだ公開していません。
      今考えるとある文字列から画像のurlだけを返すようなAPIがあれば実現できるのでそういうものを探してみるかあるいは作ってみようかなと思います。
      いずれにしても今すぐは実現できないのですが(既にそういうAPIがあればすぐにできそうですが)、、あ!来年1月にXOOPS Cube勉強会が開かれますのでそこに参加するなどされるとよい情報が得られるかもしれません。FacebookのXOOPS Cube Creatorsというグループページで詳細は分かると思います

  2. tarukuu より:

    探しまわりここにたどり着きました。Xoop xでのmomoimage 待ってます。

    • 兎本 美佳 より:

      tarukuuさん、おはようございます。momoimageを公開できるようにがんばります。久しぶりにXOOPS勉強会も開かれますので、もしご都合があえばお越し下さい!いろいろ相談できると思います https://atnd.org/events/60933

  3. 兎本 美佳 より:

    戸北さん、tarukuuさんこんにちは。お二人にご希望されたog:imageについてちょっとした追加でできるようになったような気がします。もうちょっとテストをして上手く行ったら明日あたりblogに書いてみようと思います。

  4. 兎本 美佳 より:

    XOOPSコンテンツの画像で FacebookのOGP画像を指定する! https://usortblog.com/xoopscontentogpimage/ という記事を書きました。よろしければご覧ください。

  5. tokita より:

    わざわざご連絡いただきありがとうございます。試してみたのですが、うまくいきませんでした・・

    http://ryus.co.jp/modules/d3blog/details.php?bid=365 
    は確かに狙い通りの画像でしたが
    http://usadeki.jp/modules/pico2/index.php?content_id=9
    に関してはマンガは表示されず、ヘッダーの2つの画像+どこかのサイトのスクリーンショットみたいな画像がでてきます。
    Open Graph Object Debugger で何度も更新してみましたが駄目でした。

    • 兎本 美佳 より:

      こんにちは、tokitaさん。

      すみません、usadekiなのですがサーバが調子悪くて手を入れてたときに元のtheme.htmlに戻してしまって、戻し忘れてました。ご指摘いただき気づいたので新しいものにしましたので、今は漫画がog:imageとして表示されてると思います。

      またFacebookはキャッシュがきついので、

      https://developers.facebook.com/tools/debug/

      でURLを入力して、次の画面で Fetch new scrape information というボタンをクリックします。これでキャッシュがクリアされるはずです。くわしくは、

      https://usortblog.com/facebookurlogp8/

      あたりに書いてあります。

      もしご自分のサイトでやられてみて上手く行かないときはこの辺もやってみてください(^^)/

    • 兎本 美佳 より:

      あ、すみません 

      >Open Graph Object Debugger で何度も更新してみましたが駄目でした。

      を見逃してました。usadekiはそういったことですみません、古いthemeにしちゃっていました。

  6. tokita より:

    返信ありがとうございます。
    キャッシュの問題ではなさそうなので、もう一度見直してみます。