外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。
[link url=”https://popozure.info/pz-hatenablogcard”]
外部リンクでもオリジナル形式で表示させたい需要がありますが、当プラグインには外部リンクの情報を取得する機能は無いのですが、そこで…。
WordPressでかんたんに装飾されたブログカードを表示するプラグイン
WordPressで外部リンクを「はてなブログカード」で表示するための「Pz-HatenaBlogCard」を公開しています。
ショートコードとURLを指定するだけで「はてなブログカード」を表示してくれるので、手軽にきれいなリンクを記事に挿入できます。
[link url=”https://popozure.info/pz-hatenablogcard”]
あくまでも「はてなブログカードで表示する」ためのプラグインではあるものの、装飾機能をあれこれ付けたため、「外部／内部リンクをかんたんに装飾したブログカードで表示する」プラグインになりつつあります。
（本当は外部リンクもタイトルや概要文を自動取得する Pz-LinkCard を開発中なのですが、解消すべき課題が多くて、というか Pz-HatenaBlogCard を直すのが楽しくてまったく進んでおりません。）
外部リンクの場合でも、タイトルを指定した場合にはオリジナル形式のブログカードで表示します。
オリジナル形式のブログカードで表示すると、ツイート数を付けたり、カード内のレイアウトを変更したりできます。
さらに言うと、「はてブカード」を使った場合、リンク先に伝わる referer がはてブカードのアドレスだったりします。
ショートコードと一緒にタイトル・抜粋文も持ってきてくれるブックマークレット
ブックマークレットを参考にさせていただいた「increment Log」さんの方で公開されているブックマークレットは、「タイトルと概要文も一緒に持ってくる」仕様になっています。
ということは、そのブックマークレットを組み合わせると、タイトル指定のショートコードが取得できて、外部リンクもオリジナル形式で表示されるようになります。
ぽぽろん「ぜひ、くみあわせてつかわせていただきたい！Σ(ﾟロﾟ)oﾞ」
と、なかなか言えずにずっとモジモジしていたのですが、勇気を出して告白したところ、組み合わせて使う方法を紹介したり、カスタマイズしたブックマークレットを公開することに許可をいただきました(^-^)o
ということで、「increment Log」さんのところのブックマークレットと組み合わせたときの使用方法を書こうと思います。
前準備・ブックマークレットの登録とプラグインの設定
まずは、下記リンクから「GetLinkCode」というブックマークレットを、ドラッグ＆ドロップでブックマークバーへ登録します。
[link url=”http://increment-log.com/link-thumbnail-bookmarklet/”]
「Pz-HatenaBlogCard」の設定画面を開き、「ショートコード」もしくは「ショートコード 2」に「bm」と入力します。
また、「ショートコードで囲んだ文字列」を「タイトルとして使用」に設定して、「変更を保存」を押します。
ショートコードの取得と貼り付け
リンクをつくりたいページを開いて、さきほど登録したブックマークレットをクリックして実行します。
ショートコードが書かれたウィンドウが開くので、文字が選択された状態のまま、右クリック→「コピー」とするか、キーボードから [Ctrl]＋[C] を押して、クリップボードへコピーします。
WordPressの記事に貼り付けます。
投稿して表示してみると、外部リンクではあるもののタイトルを指定してあるので、オリジナル形式のブログカードで表示されています。
今回の設定は「サイト情報：上側」「背景画像：斜めストライプ」「SNSアイコン：タイトルの後ろに表示、はてブ、ツイッター」「URL表示」「高さ：150px」です。
プラグインの設定そのままで使えるブックマークレット
Pz-HatenaBlogCard 用にカスタマイズしたブックマークレットも用意してみました。
ショートコードも「blogcard」のまま、ショートコードに囲まれた文字も「使用しない」のままで使用できます。
タイトルと抜粋文も一緒に取得してくれます。
[2015/09/20追記]タイトルや抜粋文に「閉じ角括弧」がに含まれていると、ショートコードがうまく認識されなかったので、角括弧を全角の角括弧に変換するようにしました。
| [direct]<code><a href=”javascript:var%20description=document.getElementsByName(‘description’).item(0);var%20twDescription=document.getElementsByName(‘twitter:description’).item(0);var%20pd=document.getElementsByTagName(‘meta’);var%20gpDescription=null;for(i=0;i<pd.length;i++){if(pd[i].getAttribute(‘property’)==’og:description’){gpDescription=pd[i].getAttribute(‘content’);}}if(!(description%20==%20null))%20{description%20=%20description.content;}%20else%20if(!(gpDescription%20==%20null))%20{description=gpDescription}%20else%20if(!(twDescription==null))%20{description=twDescription.content;}%20else%20{description=%27%27;}title=document.title.replace(/\[/g,%22［%22);title=title.replace(/\]/g,%22］%22);description=description.replace(/\[/g,%22［%22);description=description.replace(/\]/g,%22］%22);window.prompt(‘Pz-HatenaBlogCard用ショートコード’,'[blogcard%20url=%22’+location.href+’%22%20title=%22’+title+’%22%20content=%22’+description+’%22]’);void(0);”>getBlogCard2</a></code>[/direct] |
上のリンク文字をブックマークバーにドラック&ドロップで登録しておいて、リンクを作りたいサイトを見ている状態で登録したブックマークレットを開いて、コピー＆貼り付けをしてください。
Pz-HatenaBlogCard の仕様に合わせて、titleパラメータにタイトル、contentパラメータに抜粋文を取ってきたかたちでショートコードを取得します。
同じショートコードを、「閉じる書式」と「閉じない書式」を同一の記事内で使用できないため、内部リンクは手動で書く場合には、こちらの専用ブックマークレットをお勧めしておきます。
内部リンクもタイトル指定とすると、記事を書き換えたときにタイトルと抜粋文が変わらないので、この辺はお好みで。
では(^-^)o
コメント