FC2ブログをTwitterカードに対応させる方法
2017.03.18 22:35 *Sat
Category：日記・雑記
ご要望にお応えして、唐突にFC2ブログのテンプレート関連のお話です。
Twitterには、URLを含むツイートをすると、通常は単純にURLのアドレスが書かれているだけになるところが、設定をすることで自動的にこのように表示する「Twitterカード」なる機能があります。↓
ツイートの下に、リンク先の画像（アイキャッチ）とタイトルと説明文が付いておりますね。画像を添付する必要も無く、内容もわかりやすく、見た目華やかになってクリック率も上がりそうだし、せっかくだから是非とも利用したいところ。
しかしながら、Twitterカードを利用するためには事前に準備をしておく必要があります。
導入方法はTwitter公式のTwitterカードの説明に書いてあるので、基本的にその通りにやればいいのですが、FC2ブログで実際に適用する時の手順を以下簡単に記しておきます。
公式ガイドの「ツイートからのエンゲージメントの促進」にもあるように、Twitterカードには以下の4つのタイプがあるよ。
・Summaryカード
・大きな画像付きのSummaryカード
・Appカード
・Playerカード
AppカードとPlayerカードはアプリや動画用なので、通常はSummaryカードか大きな画像付きのSummaryカードの2つから好きな方を選ぼう。その名の通り、表示される画像が大きいか小さいかの違いだよ。
適用したいブログに、メタタグ――Twitterが情報を取得してくれるための案内板みたいなモノを設置する必要があるよ。慣れない人はここで尻込みしてしまうと思うけれど、意味が分からなくてもとりあえずコピペしとけば動くから大丈夫だよ。
FC2ブログ管理画面の「テンプレートの設定」に行き、念のためテンプレートを複製してから、「[ （テンプレート名） ] のHTML編集」の下のテキストボックスの、”<head>～</head>”の中に……よくわからなければ、上から数行目に書いてあるはずの”<head>”の下に、以下のコードをコピー＆ペーストで追加しよう。
青色の部分を使うカードタイプに合わせて修正しておくように。Summaryタイプなら、「 もしくは summary_large_image」の部分を削除して「summary」だけにしておくんだよ。
終わったら、間違って余計なものを消したり書いたりしないよう気をつけつつ、「更新」ボタンを押そう。ここで一度、ブログのレイアウトがおかしくなっていないか表示を確認しておくといいよ。
FC2ブログ管理画面から「環境設定」に行き、「ブログの設定」→「メタタグの設定」で「OGP設定」を「有効にする」にしてから更新ボタンを押そう。もし既に有効になっているなら無問題。
これでこちら側の準備は完了。あとはTwitterカードの公式ツールで申請＆検証ボタンを押すだけ。
検証ツール (Card validator)に行って、「Card URL」に自分のブログのURLアドレスをコピペしたら、下の「Preview card」ボタンをクリック。
これにて作業終了、おつかれさまでした！
テスト結果はプロフィール画像が表示されてると思うけれど、心配ならブログの個別記事のURL（～blog-entry-XXX.html）を入れてもう一回チェックしてみよう。画像を使ってる記事ね。これで希望通りのTwitterカードが右側に表示されているはず。
なお、適用されるまで時間がかかる場合もあるし、過去記事については若干挙動が怪しく、それぞれの記事を個別に申請する必要があるかもしれないのは注意。過去のことはさておいて未来に目を向けよう。
ちなみに、通常は「記事内の最初の画像」がアイキャッチ画像になるけれど、FC2でブログの記事を投稿する時に、投稿画面の下の方の「アイキャッチ画像」を選択することで好きな画像に指定することもできるよ。
これで、「華やかなるTwitterのタイムラインで自分のブログだけが空しく文字列が表示されている状態」からおさらばだ！ それでは良きTwitter＆ブログライフを！
――以下、一部のこだわり派向けの追加情報。
Twitterには、URLを含むツイートをすると、通常は単純にURLのアドレスが書かれているだけになるところが、設定をすることで自動的にこのように表示する「Twitterカード」なる機能があります。↓
ツイートの下に、リンク先の画像（アイキャッチ）とタイトルと説明文が付いておりますね。画像を添付する必要も無く、内容もわかりやすく、見た目華やかになってクリック率も上がりそうだし、せっかくだから是非とも利用したいところ。
しかしながら、Twitterカードを利用するためには事前に準備をしておく必要があります。
導入方法はTwitter公式のTwitterカードの説明に書いてあるので、基本的にその通りにやればいいのですが、FC2ブログで実際に適用する時の手順を以下簡単に記しておきます。
1. カードタイプを選ぶ
公式ガイドの「ツイートからのエンゲージメントの促進」にもあるように、Twitterカードには以下の4つのタイプがあるよ。
・Summaryカード
・大きな画像付きのSummaryカード
・Appカード
・Playerカード
AppカードとPlayerカードはアプリや動画用なので、通常はSummaryカードか大きな画像付きのSummaryカードの2つから好きな方を選ぼう。その名の通り、表示される画像が大きいか小さいかの違いだよ。
2. メタタグをテンプレートに記述
適用したいブログに、メタタグ――Twitterが情報を取得してくれるための案内板みたいなモノを設置する必要があるよ。慣れない人はここで尻込みしてしまうと思うけれど、意味が分からなくてもとりあえずコピペしとけば動くから大丈夫だよ。
FC2ブログ管理画面の「テンプレートの設定」に行き、念のためテンプレートを複製してから、「[ （テンプレート名） ] のHTML編集」の下のテキストボックスの、”<head>～</head>”の中に……よくわからなければ、上から数行目に書いてあるはずの”<head>”の下に、以下のコードをコピー＆ペーストで追加しよう。
<meta name="twitter:card" content="summary もしくは summary_large_image">
青色の部分を使うカードタイプに合わせて修正しておくように。Summaryタイプなら、「 もしくは summary_large_image」の部分を削除して「summary」だけにしておくんだよ。
終わったら、間違って余計なものを消したり書いたりしないよう気をつけつつ、「更新」ボタンを押そう。ここで一度、ブログのレイアウトがおかしくなっていないか表示を確認しておくといいよ。
3. OGP設定を有効にする
FC2ブログ管理画面から「環境設定」に行き、「ブログの設定」→「メタタグの設定」で「OGP設定」を「有効にする」にしてから更新ボタンを押そう。もし既に有効になっているなら無問題。
4. 公式サイトに申請
これでこちら側の準備は完了。あとはTwitterカードの公式ツールで申請＆検証ボタンを押すだけ。
検証ツール (Card validator)に行って、「Card URL」に自分のブログのURLアドレスをコピペしたら、下の「Preview card」ボタンをクリック。
これにて作業終了、おつかれさまでした！
テスト結果はプロフィール画像が表示されてると思うけれど、心配ならブログの個別記事のURL（～blog-entry-XXX.html）を入れてもう一回チェックしてみよう。画像を使ってる記事ね。これで希望通りのTwitterカードが右側に表示されているはず。
なお、適用されるまで時間がかかる場合もあるし、過去記事については若干挙動が怪しく、それぞれの記事を個別に申請する必要があるかもしれないのは注意。過去のことはさておいて未来に目を向けよう。
ちなみに、通常は「記事内の最初の画像」がアイキャッチ画像になるけれど、FC2でブログの記事を投稿する時に、投稿画面の下の方の「アイキャッチ画像」を選択することで好きな画像に指定することもできるよ。
●●●
これで、「華やかなるTwitterのタイムラインで自分のブログだけが空しく文字列が表示されている状態」からおさらばだ！ それでは良きTwitter＆ブログライフを！
――以下、一部のこだわり派向けの追加情報。
5. もっと詳しく
上記の方法だと、アイキャッチ画像として使用される画像はFC2にアップロードしたもののみ。それ以外は認識されない。
それでは困る。(ﾟДﾟ)。
画像のアップロード先はサムネとか諸々の都合でflickrとか他所を使いたい派なんだよ……FC2鯖は昔落ちまくって使い物にならない時期があって嫌なんだよ……応援バナーとかも使いたいし……
という変人がもしいたら、私が四苦八苦しながら達成した以下の方法を参考にしてくださいな。
a. まずPHPを使えるサーバーを借りる
ハードル高いよね……。でも、自分が調べた限り方法はこれしかない模様。
無料で借りられるレンサバはいくつかあるみたいだけど、適当にXdomainをチョイス。契約してなんやかんやしてPHPサーバーを使えるようにする。
b. 記事から画像を取得するPHPを書く
ハードル高いよね…………。プログラミングなんてやったこと無い身にはこれが一番キツかった。でもググったり誰かが作ったやつをパク……参考にしたりしてなんとか用意したソースコードを公開しておくよ。恥ずかしいからコードの中身にツッコミ入れないように。動けば何でもいいんだ、たぶん。
<?php
//-------------
$first_img = " http: 画像が無い時用デフォルト画像.jpg";
//-------------
$url = $_GET['url'];
$data = "";
$cp = curl_init();
curl_setopt($cp, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($cp, CURLOPT_URL, $url);
curl_setopt($cp, CURLOPT_TIMEOUT, 60);
$data = curl_exec($cp);
curl_close($cp);
preg_match_all('/<img .*?(?=src)src=\"([^\"]+)\"/si', $data, $imgs);
foreach( $imgs [1] as $value )
{ if( !preg_match("/analyzer/", $value) ){ $first_img = $value;
//print($first_img );
break;
}
}
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".$first_img);
?>
中身は「指定の記事から最初のimgタグの中のURLを抽出」。こいつをphpファイルとして適当に名前付けてUTF-8で保存、レン鯖にアップロード。
c. ブログのメタタグを修正
まず、FC2ブログ環境設定のOGP設定を無効化する。それから以下をテンプレートに追加。
<meta name="twitter:card" content="summary_large_image">
<!--permanent_area-->
<meta name="twitter:title" content="<%sub_title> - <%blog_name>">
<meta property="og:image" content="作ったPHPのアドレス.php?url=<%url>blog-entry-<%pno>.html">
<meta property="og:type" content="article">
<meta property="og:description" content="<!--topentry--><%topentry_discription><!--/topentry-->">
<!--/permanent_area-->
<!--not_permanent_area-->
<meta property="og:title" content="<%blog_name>">
<meta property="og:image" content="画像が無い時用デフォルト画像.jpg">
<meta property="og:type" content="blog">
<meta property="og:description" content="<%introduction>">
<!--/not_permanent_area-->
FC2の用意したタグを無効化したため、画像関連の他にタイトルや説明関連の記述も追加。
これで、画像の場所がFC2か外部サイトかを問わず「個別記事内の最初の画像（IMGタグ内）」（画像を使っていない記事やブログTOPでは指定のデフォ画像）をアイキャッチ画像に使ってくれる。
ただ、この手法には一つデメリットがあって、記事投稿時のアイキャッチ画像指定が使えなくなる。つまり「記事内の最初の画像」に完全に固定され、臨機応変にアイキャッチ画像を変更することができない。
もしかするとそれも回避方法があるかもだけど自分にはわからんちん。
x. 応用
この「最初の画像ゲットPHP」の発想は、ブログのデザインをカスタマイズする上で使い回すことができる。例としては、当ブログのヘッダーの新着記事の背景だったり、スマホ用テンプレートの記事リストのサムネイルだったり。
ヘッダー部分のやつの詳細については次回更新する予定が無くもない。
