WordPress + Open Graph Protocol
Facebookの「いいね！」ボタンやmixiチェック等のソーシャルグラフを利用する上で欠かせないのが「Open Graph Protocol」です。その仕様は予め定められており、すべてのサービスでほぼ共通して使用することができます。今回は、WordPressにおけるOGPのテンプレートをご紹介させていただきます。
早速、核心となる記述内容です。基本的には以下をHEADタグ内に貼付ければ完了です。
1 2 3 4 5 6 7 | <?php if (is_single()) : if (have_posts()) : while (have_posts()) : the_post(); ?> <meta property="og:type" content="article" /> <meta property="og:title" content="<?php the_title(); ?>" /> <meta property="og:description" content="<?php the_excerpt_rss(); ?>" /> <meta property="og:url" content="<?php the_permalink(); ?>" /> <meta property="og:site_name" content="<?php bloginfo('name'); ?>" /> <?php endwhile; endif; endif; ?> |
条件タグ（is_single）を使用しているのは、通常のブログであれば、投稿内でのみソーシャルグラフを使用するので、他のページで表示させないためです。ほとんどの記述はアタリが付くと思いますが、唯一、ポイントになるのが4行目の「the_excerpt_rss()」です。単に抜粋を表示するのであれば、「the_excerpt()」ですが、これではパラグラフタグも同時に出力されてしまいます。「the_excerpt_rss()」はテキストのみの出力になりますので、ご存じない方は別の場面でも役立つかもしれません。
日本のメジャーソーシャルグラフサービスとしては、mixiとGREEが主にありますが、両者共に使用可能です。実際の設定等については以下のオフィシャルサイトをご確認下さい。
ちなみにソーシャルグラフの各コードは、(X)HTML Validateではありませんので、ご認識下さい。
オススメ記事
-
HTML – METAタグの配置には要注意！
HTMLコーディングをしている際に遭遇したちょっとした文字化けハプニングです。そのサイトはXHTML 1.1で作成していました。HEADタグ内で文字コード（UTF-8）を指定し、ファイル形式にもUTF-8を使用していため、安心していたのですが、一部の端末のIEで開いたところ、文字化けを起こしているのです。
-
WordPress – 多言語サイトの構築方法 投稿・ページ編
WordPressを使用した多言語サイト構築方法の二日目は「投稿・ページ編」です。対応は大きくふたつに分けれます。グーグル翻訳等を使用して機械翻訳を行う方法と従来通り人間翻訳を行う方法です。正直、機械翻訳の精度は低いので、今回は人間翻訳を前提に実装方法を取り上げたいと思います。
-
WordPress – 登録ユーザへのメール一括送信
近年、WordPressはCMSとしてのシェアを急速に伸ばし、その用途を拡大しています。一般的な企業サイトのように静的なコンテンツのみを取り扱うものもあれば、ユーザ登録により利用者と共にサイト規模を拡大させるものもあります。
-
WordPress – 簡易オンラインストア「Easyfileshop」
オンラインストアを構築する際、システム側で準備しなければならないことが多々あります。その中でも決済やセキュリティには審査を含め、相当の労力を割くことになるでしょう。WordPressをベースにプラグイン「Easyfileshop」を使用すれば、そういった工数を大幅に削減することができます。
Loading ...