Twitter カードは、ツイート内に投稿された URL 先のメタ要素を参照してツイートに画像や概要等を付加するルールです。( PC の場合は『全て表示』するとと表示されますが、スマホアプリからだと最初から表示されます) ▼ Android アプリにて画像は固定にするのならばとても簡単です。今すぐにでも簡単に始める事ができます。 デザインから『記事』コンテンツを開いて HTML の先頭に以下のように書き込んで保存するだけです ( 単独の記事ページのみの設定ですが、意味が解れば他のページにも応用できます )
<% if:page_name eq 'article' -%> <meta name="twitter:card" content="summary_large_image" > <meta name="twitter:image" content="画像のURL" > <meta name="twitter:site" content="@ユーザ名" > <meta name="twitter:title" content="<% article.subject | tag_strip %>"> <meta name="twitter:description" content="<% article.body | tag_strip | oneline | text_summary(100) %>"> <% /if -%>
※ Seesaa の変数で記事情報を得るには、記事コンテンツで書く必要があります 記事毎に画像を変えるにはさすがに記事毎に画像を設定するには Seesaa だけでは無理があるので、外部サイトより PHP ページを呼び出して画像として扱います。記事内で META 要素で画像を指定すると、後から記述した記事内の情報が優先されました。これで、Seesaa 内で簡単に完結できます。 ▼ 外部で画像を用意する方法 パラメータとしては、記事 id を使うと都合がいいので、記事を書く場合は最初は必ず 『非公開』で保存します。保存すると、Seesaa の記事投稿ページの URL に id が表示されるのでコピー&ペーストで利用します。
<meta name="twitter:image" content="http://サイトドメイン/フォルダ/画像取得.php?id=<% article.id %>" />
画像取得.php の内容は、データベースを使わない場合は以下のようになります
<?php
$_GET['img'] = 'http://winofsql.jp/logicalerror_k.jpg';
$type = "Content-Type: image/jpeg";
if ( $_GET['id'] == '431370653' || $_GET['id'] == '431586073' ) {
$type = 'Content-Type: image/png';
$_GET['img'] = "https://lh3.googleusercontent.com/-rcXr0TEtK9U/VneXBjsS7LI/AAAAAAAAc4c/V3aID9ySqMU/s600-Ic42/_img.png";
}
if ( $_GET['id'] == '430950219' ) {
$type = 'Content-Type: image/png';
$_GET['img'] = "https://lh3.googleusercontent.com/-rktBELHhoNY/VmhbqJ_Y8zI/AAAAAAAAc1U/2NdaaXuGO-U/s600-Ic42/_img.png";
}
header($type);
$pi = pathinfo($_GET['img']);
$ext = strtolower($pi['extension']);
if ( $ext == 'png' ) {
$im = @imagecreatefrompng($_GET['img']);
}
if ( $ext == 'gif' ) {
$im = @imagecreatefromgif($_GET['img']);
}
if ( $ext == 'jpg' || $ext == 'jpeg' ) {
$im = @imagecreatefromjpeg($_GET['img']);
}
// 失敗
if(!$im) {
//空の画像
$im = imagecreatetruecolor(200, 200); // 200x200
$bgc = imagecolorallocate($im, 255, 255, 255); // 背景色(白)
$tc = imagecolorallocate($im, 0, 0, 0); // 文字色(黒)
imagefilledrectangle($im, 0, 0, 200, 200, $bgc); // 背景を塗る
// メッセージ
// (5,5) は座標
imagestring($im, 1, 5, 5, 'Error loading', $tc);
}
else {
imagealphablending($im, false);
imagesavealpha($im, true);
}
imagepng($im);
imagedestroy($im);
?>
このままでは、どんどんソースコードが長くなるので、データベースが使える場合は以下のようにして、データベースにデータを追加する事によって新しい記事に対応します。
<?php
$_GET['img'] = '画像データがない場合のデフォルトJPG画像の URL';
$type = "Content-Type: image/jpeg";
$host = "";
$db = "";
$user = "";
$pass = "";
$link = mysqli_connect($host, $user, $pass, $db);
mysqli_set_charset($link, "utf8");
$sql = "select * from links where target2 = '{$_GET['id']}'";
$result = mysqli_query($link, $sql);
if ($result) {
if ( $row = mysqli_fetch_assoc($result) ) {
$_GET['img'] = $row['URL'];
}
}
$pi = pathinfo($_GET['img']);
$ext = strtolower($pi['extension']);
if ( $ext == 'png' ) {
$type = 'Content-Type: image/png';
$im = @imagecreatefrompng($_GET['img']);
}
if ( $ext == 'gif' ) {
$type = 'Content-Type: image/gif';
$im = @imagecreatefromgif($_GET['img']);
}
if ( $ext == 'jpg' || $ext == 'jpeg' ) {
$type = 'Content-Type: image/jpeg';
$im = @imagecreatefromjpeg($_GET['img']);
}
header($type);
// 失敗
if(!$im) {
//空の画像
$im = imagecreatetruecolor(200, 200); // 200x200
$bgc = imagecolorallocate($im, 255, 255, 255); // 背景色(白)
$tc = imagecolorallocate($im, 0, 0, 0); // 文字色(黒)
imagefilledrectangle($im, 0, 0, 200, 200, $bgc); // 背景を塗る
// メッセージ
// (5,5) は座標
imagestring($im, 1, 5, 5, 'Error loading', $tc);
}
else {
imagealphablending($im, false);
imagesavealpha($im, true);
}
imagepng($im);
imagedestroy($im);
?>
画像は自分で用意するので、mime タイプは拡張子で決定しています。 結果のチェック うまくいっているかどうかは投稿すれば解りますが、Twitter に投稿せずに確認するには、Twitter のチェックページを使用します Card validator 補足事項 世の中のこの手の情報は、Facebook とともに記述されている事が多いですが、Seesaa で Facebook の OGP で記事別画像を実現するには相当の技術的知識が必要なので最初からあきらめたほうがいいです。その理由は、Facebook 用のメタ要素は必ず HEAD 要素内に書く必要があるのに対して、Seesaa では、その情報を用意するのに、通常では BODY 要素内に書かざるを得ないからです。 がんばれば、実現できますが、相当の準備をもって臨まないと HTML が壊れてしまいますし、実現することによって発生する弊害の対応も発生するのでおすすめできません。 ※ 記事タイトルは、Seesaa でも HEAD 内で変数を指定できます
<% if:page_name eq 'article' -%> <meta property="og:type" content="article" /> <meta property="og:title" content="<% extra_title %>" /> <meta property="og:site_name" content="サイト名"> <meta property="og:locale" content="ja_JP" /> <% /if -%>
Seesaa独自タグ簡易リファレンス
|
|
【Seesaa プログ管理支援の最新記事】
- Seesaa(またはさくらのブログ) の『コメント・公開設定・広告の表示・カテゴリ』を一括変更するブックマークレット
- Seesaa ブログのカテゴリ管理画面で、ブラウザのコンソールを使って jQuery で順序をソートする
- Seesaa ブログのカテゴリ管理画面で、ブラウザのコンソールを使って 10 番毎の数字にリセットする
- Seesaa のソーシャルボタンのテンプレート上の設定( 古いテンプレートから最新に変更する手順 )
- IE拡張メニュー : Seesaa のリンクコンテンツを一瞬でソートする
- Seesaa の特定のカテゴリ(複数)の場合のみ、記事の下に参照リンクやコンテンツを付加する方法
- Seesaaブログの page_name 変数の3つ以上の OR 条件の記述方法
- Seesaaブログ : 特定のカテゴリに属する記事のみ特定部分に HTML を付加する方法
- Seesaa のデザインHTMLの中の、<% if:page_name eq 'tag' -%> セクションでは TAG ページ専用のコンテンツを書く事ができます。
- Seesaa のスマホページで使う、記事単位のPCページへの移動
- Seesaaの、Google+ とのプロフィール連携について
- Seesaa ブログの、ホワイト(右サイドバー)の幅を広〜く変更する為の CSS 設定
- Seesaa の記事カテゴリをソートする IE 拡張
- Seesaa : 記事の投稿者に、記事編集用のダイレクトリンクを作成して、日付フォーマットに『年月日』を追加する
- Seesaa のタグページの「タグクラウド」のリンク先を一覧表示( ドメイン/tag/articles/タグ名 )に変更する
- さくらインターネットで取得したドメインを使用して、そのサブドメインを Seesaa に設定する
- Seesaa の 『カテゴリのHTML編集』で、カテゴリの一覧を見やすくする。
- Seesaaプログの「 同一カテゴリの最新記事」を使った記事下広告の設置方法と。ついでに Google の +1ボタンの設置。
- Seesaa : IE専用 : リンクコンテンツのオートマチック登録(変更)、エクスポート、インポート( ブックマークレット )
- Seesaa で先頭から2件だけタイトルの下に広告を出す方法やその他の正攻法
