WordPressで使えるシンプルなブログカードのブックマークレット

楽しんでいただけましたか?シェアしていただけると励みになります。

おはようございます。Gonta(@g_siitter)です。久々にWordPressネタです。

今回はブログカードについてです。

スポンサーリンク

Share HTMLとの違いと使いどき

先日、airClosetのサイトを紹介しましたが、
今まで僕は画像付きリンクを貼るのに、Share HTMLというツールを使っていたのですが、
こういうの↓

Yahoo! JAPAN

この間はしゅんぼー(@shun_kashiwa)さんが作って下さったブログカードのブックマークレットを使用してみました。

試しにYahoo!でブックマークレットを試すと

およよ。こちらはShare HTMLのようにアイキャッチが出ません。
よくよく作者のしゅんぼー(@shun_kashiwa)さんの記事を読むと、
OGPとは、記事の説明やサムネイルなどを指定するための規格で、ブログには設定するのが基本です。 
そのため、多くのブログであればブログカードを使うことが出来ます。
とありました。
なので、ブログではない、OGPの設定のないYahoo!を表示したところ、ただのリンクになるようですね。

今回使ったブログカードブックマークレットの方は、ブログを紹介するときなんかはこちらのほうが合いそうなので、今後ブログ記事を紹介する際は使用することが多くなりそうです。
ただ、下書き、プレビューの段階では完全な状態では表示されず、編集画面でグレーの長方形が表示されます。

Share HTMLの方は、サイトやHP全体を表示させるのに適してる感じがします。

今回のブックマークレットの作者しゅんぼー(@shun_kashiwa)さんの記事はこちら
(さっそく使ってみる↓)
 また、Share HTMLの作者でやAppHtmlなど、
多数のブックマークレットを作ってくださってる、普通のサラリーマンこと(@hiro45jp)さんのページもご紹介しておきます。
普通のサラリーマンのiPhone日記 | iPhoneに魅せられた普通のサラリーマンの日々の生活を綴ってます。

※ブックマークレットを使ったことがない方用

簡単にご説明を。
まずJavaScriptのコードをコピーしておきます。
ひとまず、どこのページでもいいのでブックマーク(お気に入り登録)をします。
スクリーンショット_2015-02-10_1_16_18
スクリーンショット_2015-02-10_1_16_48
ブックマークを編集するページへ行き、URLの欄に先ほどコピーしたJavaScriptのコードを貼り付けます。
ついでにブックマーク名(お気に入りの名前)も自分がわかりやすいような名前に変更するといいと思います。
 スクリーンショット_2015-02-10_1_21_29
これをお気に入り一覧の中や、ツールバーから起動することでJavaScriptのコードが実行されます。
スクリーンショット_2015-02-10_1_23_20
あとはWordPress編集画面の「テキスト」の方へ貼り付けてブログカードの完成です。
スポンサーリンク

楽しんでいただけましたか?シェアしていただけると励みになります。

フォローしていただけると嬉しいです!