SQLの窓

2016年01月25日


Seesaa ブログで Twitter カードを使用する方法

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 プログ管理支援の最新記事】
posted by lightbox at 2016-01-25 04:18 | Comment(0) | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり