pukiwikiプラグイン/tweetcard のバックアップの現在との差分(No.9)

お名前:


  • 追加された行はこの色です。
  • 削除された行はこの色です。
#author("2017-12-03T23:23:30+09:00","-","-")
*プラグイン概要 [#w874145f]
#author("2022-01-31T13:09:22+09:00","-","-")
*プラグイン概要[#w874145f]

Twitter が提供している機能「Twitter Card」に対応するためのプラグインです。~
このプラグインを適切に設置していると、当該ページのURLをTwitterで発言したとき単にURLが表示されるのではなく、
以下のように Tweet文字列の下にちょっとした「アイコン&解説」枠が表示されます。
以下のように Tweet文字列の下にちょっとした「アイコン&解説」枠が追加表示されます。

#tweet_inc(https://twitter.com/Tomose/status/937182743019974657)
#tweet_inc(https://twitter.com/Tomose/status/937182743019974657,width=400)

上記メカニズムの詳細はこちらを参照のこと。
-公式(英語)
--https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary
-日本語ではこちらのページの解説がわかりやすい。
--https://saruwakakun.com/html-css/reference/twitter-card
--https://www.granfairs.com/blog/staff/setting-twitter-cards

Twitter Card の仕様上、本プラグインは設置時に「サイト責任者」が相応に加工をすることを前提としています。~

#tweetcard(DEFAULT)


*インストール方法 [#i93dfc9e]
+本ページに添付されている下記ファイルをダウンロードし、pukiwiki の pluginフォルダに「tweetcard.inc.php」の名前で保存してください。
--[[tweetcard.inc.php>http://tomose.dynalias.net/junk/index.php?plugin=attach&pcmd=open&file=tweetcard.inc.php&refer=pukiwiki%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3%2Ftweetcard]]
--[[tweetcard.inc.php_0.2>http://tomose.dynalias.net/junk/index.php?plugin=attach&pcmd=open&file=tweetcard.inc.php_0.2&refer=pukiwiki%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3%2Ftweetcard]]
--pukiwiki 1.4.5/ 1.5.1 共通です。
+tweetcard.inc.php をエディタで開き、以下の部分を編集してください。
--ファイル内後半に、以下のような記述があるので探してください:~
 <meta name="twitter:creator" content="">
--カードを「個人名義」で出すのか、「サイト名義」で出すのかを決めてください。~
それによって、編集方法が変わります。
--もしあなたが「個人名義」でカードを出したい場合、上記の content 部分にTwitterIDを書いてください。~
---例えば友瀬の場合、「@Tomose」というアカウントを持っているので、~
 <meta name="twitter:creator" content="@Tomose">~
と書きます。
--もし「サイト名義」のアカウントの場合、「Creator」ではなく「Site」項目として記載が必要です。
---例えばもし友瀬が「@Junkyard」というサイト名義アカウントを持っていたとしたら。~
前述の「twitter:creator」の部分も編集して、
--ファイル内後半に、以下のような記述があるので探し、Twitterアカウントを設定してください:~
 <meta name="twitter:site" content="">
---例えば「@Junkyard」というアカウントを持っていたとしたら。~
 <meta name="twitter:site" content="@Junkyard">~
と書くことになります。

-pukiwiki 1.4.5/ 1.5.1 共通です。


参考:このプラグインは、拙作の pageinfo プラグインを利用することも可能です。

*使い方 [#ed605d36]

-事前準備:カードに表示される画像を準備してください。~
最小144pixel x 144pixcel の画像が必要です。
--多少いい加減でも、変倍・トリミングはしてくれるようです。
-上記画像を、当該ページに添付してください。

上記準備をしたうえで、当該ページに以下のように記載してください。

-上記準備をしたうえで、当該ページに以下のように記載してください。~
 #tweetcard(<画像名>[,概要文章])

作成したら、一度公式の Validatorを利用して確認するのがよいでしょう:作成したページのURLを以下のページで入力することで確認できます。~
-作成したら、一度公式の Validatorを利用して確認するのがよいでしょう:作成したページのURLを以下のページで入力することで確認できます。~
https://cards-dev.twitter.com/validator

**パラメータ [#vfd44226]

-画像名
--添付している画像の名称。~
「image.jpg」が添付されていれば「image.jpg」と書けばいい。
--例外として「NULL」という記載が許容されています:「そのページにカードを置かない」ことを明示するために使います。~
これは「まとめ」ページ/プラグインから呼び出すことで、そのまとめページ自体には「カードを置かない」ようにするということを意図しています。詳細は後述。
-概要文章
--そのページの説明文を任意入力。~
---拙作 pageinfo プラグインを併用する場合、省略可能です。
---pageinfo プラグインよりも、こちらでの記入が優先されます。

**補足:2つ以上の tweetcard を書いた場合の挙動 [#y67e7023]
1つのページに2つ以上の tweetcard を置いた場合、最初の1つだけが適用されます。~

**補足:「まとめ的プラグイン」での挙動 [#p97d9e3e]
pukiwiki 標準の calender_viewer プラグインのように「複数のページを並べて表示」するプラグインがあります。~
このようにしてまとめられた複数のページにそれぞれ tweetcard がある場合、やはり「より前にある」ものが優先されます。

例えば「日記/2018-02-15」と「日記/2018-02-21」とがあり、それぞれに tweetcard を置いたとします。~
ここで calender_viewer で2月分・昇順で表示すると「日記/2018-02-15」が先に表示されます。~
この「calender_viewerで表示されているリンク」を tweetした場合、2/15のカードが表示されます。

一般に、こういうまとめページではカード表示は期待されないと思われます。~
そういうまとめ系プラグインを使う場合、そちらに改造を行ったほうがいいでしょう。~
例えば calender_viewer であれば、以下のような感じの追加を行うことで「カードなし」にできます。
 	// $limit_page の件数までインクルード
	$tmp = max($limit_base, 0); // Skip minus
	$body .=convert_html('#tweetcard(NULL)'); //←この行を追加
	while ($tmp < $limit_page) {


*技術的な話。 [#v63675aa]
既存のkeywordプラグインを参考に、
TwitterCardの仕様に従った meta タグを出力しているだけです。~

出力するmetaタグの html文字列を作成し、pukiwiki で準備されている $head_tags[] に追加することで対応しています。

*変更履歴 [#a6f32cb3]
-2018.Mar.03 Ver. 0.2
--Twitter側仕様変更にあわせ、「Creator」に関する記載を削除 and/or 「site」に変更。
--「一覧ページ」に対応するため「一番最初のtweetcardのみ有効にする」仕組み追加
---カードに「NULL」指定を可能に。一覧ページにカードをおきたくないときのため。
--description でパラメータのサニタイズモレがあった問題修正。


*コメント [#m278aeac]
ご意見などがあれば。
#comment2(below)

#divregion(0.1関連コメント)
- なんかTwitter側の仕様が変わって、本プラグインで作っているsummaryタイプのカードでは「Creator」というパラメータが廃止された様子。適当に修正します。 -- ともせ@管理人。 &new{2018-01-09 (火) 11:01:47};
#enddivregion

お名前: