[Pz-HBC][1.2.1]更新しました。文字色の設定、背景画像の設定など

前→ver1.2.0　次→ver1.2.2

外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」。

ver1.2.1を公式プラグインディレクトリにて公開しました。

このプラグインは？

外部リンクを「はてなブログカード」で表示させるWordPressプラグインです。

「はてブカード」を表示させつつも、枠などの見た目を変更することが出来ます。

詳しくは下記リンク先にて。

ぽぽづれ。

 

12 Posts

13 Shares

9 Users

13 Pockets

2015.08.09

WordPressで「はてなブログカード」を利用する Pz-HatenaBlogCard

https://popozure.info/pz-hatenablogcard

外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。※更新があった場合には投稿記事でお知らせするとともに、このページの使い方を更新していきます。外部リンクの場合にも、タイトルや抜粋文をリンク先から持ってきてオリジナル形式のカードで表示する「Pz-LinkCard」を公開しました。※Pz-HatenaBlogCardは「はてなブログカード」の非公開APIに依存しているため、現在はPz-LinkCardの使用をお勧めしています(^-^)o機能について記事...

リンク先が自サイト内の場合は「はてブカード」を使用せず、オリジナル形式で表示させます。

外部リンクの場合でも、タイトル文字を指定した場合には、オリジナル形式で表示されます。

タイトル文字を指定するには次の2つの方法があります。

• titleパラメータを指定する。

  [blogcard url="xxx" title="タイトル"]

• 「ショートコードに囲まれた文字をタイトルとして使用」を有効にしたうえで、ショートコード～閉じの間に文字を記述する。

  [blogcard url="xxx"]タイトル[/blogcard]

変更点

ほとんど前回の予告どおりです。

「背景画像」を指定できるように修正

「背景画像」を指定できるように修正しました。

画像のURLを記述した際には、背景に画像を設置します。

http://example.com/image/popozure.png

指定された画像が並んで表示されるので、上下左右が繋がっている画像を用意するか、「最大幅×高さ150px」程度の画像を用意すると良いでしょう。

指定した文字の先頭が「http://」と「https://」以外の場合は、「background-image」に直接渡します。

「画像ファイル」を用意しなくても、次のような指定でグラデーションをかけることができます。

repeating-linear-gradient( 0deg, #8cf, #fff )

単色よりも見栄えが良いですね。

文字色を指定できるように修正

文字が黒固定だったので、背景色を暗くした場合に見えなくなっていました。

文字色の設定をできるように修正しました。

「タイトル」「URL」「抜粋文」「サイト情報」の4種類が指定できます。

外部リンクに rel=”nofollow” を付与できるように修正

需要がありそうなので、外部リンクに対して nofollow を付けられるように修正しました。

他の設定もそうですが、「はてなブログカード」で表示されている場合には設定は反映されません。

外部リンクに nofollow をしっかり付けたい場合、タイトルを指定するようにしてください。

「サイト情報」を「上側」に表示するように設定しておくと、「はてなブログカード」で表示されているのか、オリジナル形式で表示されているのか判別しやすくなります。

この図では上が「はてなブログカード」。下も外部リンクですが、タイトルを指定しているため、オリジナル形式で表示されています。

SNSシェア数を追加

「はてなブックマーク」のブックマーク数に、画像取得のAPIを使用していましたが、カウントを取得してテキストで表示するように修正しました。

「Syncer」さんのページを参考にして実装しました。

SYNCER

 

3 Posts

7 Shares

122 Users

192 Pockets

ソーシャルカウントの取得方法まとめ(全9サイト)

https://syncer.jp/how-to-get-sns-count

Twitter、Facebook、Google+など各SNSのカウント数を取得する方法をPHP、Javascriptを例に解説します。

過去にコメントで「facebook」の「いいね！」が取得できないか打診があったため、「facebook」の「シェア数」を取得してテキストで表示するように修正しました。（「いいね！」と「シェア数」は別の物のようですが、facebookをしていないのでうまく検証出来ませんでした。）

※facebook APIは凄く動作が重いです。カード1枚に付き、数秒かかる場合があります。

最近、ツイッター上で「Twitter」が取得できないか打診があったため、ツイッターのAPIでツイート数を取得してテキストで表示するように修正しました。

facebookとTwitterは、どこにリンクさせればいいのか分からなかったので表示のみです。

0件のときは非表示、1件のときは「1 user」「1 share」「1 tweet」、2件以上のときは「2 users」「2 shares」「2 tweets」と表示します。

色はそれっぽいのにしたつもりですが、変更したい場合には「pz-hatenablogcard-style.tmp」の「sns-…」というクラス名を見つけて変更して、設定画面で「変更を保存」ボタンを押してください。

（プラグインのバージョンアップをしたときに戻ってしまいますが…）

定型書式

「適当に貼った感じ」の「セロハンテープ（長）」の効果を追加しました。

このセロハンテープの感じが好きで、放っておくとどんどん登録していきそうです…。

立体な感じの「3D 回転」を追加しました。

インパクトはあるかも知れないけど、使いどころが今ひとつ思いつきません(^-^;

知っている人はよく知っている、「ブルーグリーン（中立っぽい色）」「緑（エンなんとか側）」「青（レジなんとか側）」「オレンジ（インフォメーション的な色）」を追加しました。

外部リンクは「50%透過」しているので、リンクして何とかしたみたいな感じになります。透過なので背景画像との組み合わせで更にそれっぽく見えると思います。

背景色・背景画像が暗くないと文字が全然見えないです。

その他

当プラグインは「外部リンクを『はてなブログカードで表示する』」目的のWordPressプラグインです。

「シンプルかつ安定」を目指していたのですが、調子に乗って色々詰め込んでしまった感じがあります。

設定画面も長くなってしまったので、タブにしたりもしたいのですが、勉強中です。

本当はある程度のところで「Pz-HatenaBlogCard」の開発はストップして、外部リンクも自前取得してDBにキャッシュする「Pz-LinkCard」の開発を進めたいところだったりもします。

取得＆キャッシュはできるものの、プラグイン導入直後にリンク先へのアクセスが発生したり、キャッシュの管理画面を作らないと、変な状態（サーバーエラー等）でキャッシュされてしまったサイトを修正できない等、課題が山積みです。

とりあえず公開しちゃった方が開発が進むというのもあるのですが(^-^;