リッチリンクを手軽に作成! ブログカードジェネレーター

public
toysブログカードを生成toys

使い方は簡単、生成されたHTMLコードをコピー&ペーストするだけです。画像以外は外部のサービスに依存しません (画像の直リンクが許可されていないサイトの場合は、アイキャッチ画像のURL参照はお控え頂きますようお願いいたします)。
CSS
使い方
1. ブログカードを作成したいサイトのURLを入力して、「ブログカードを生成」ボタンを押します
2. 生成されたHTML上のCSSの二つのコードをBlogなどのHTML編集画面に貼り付けて下さい

改行を取り除いたCSSは以下からコピーできます。
  • 改行を取り除いたCSS
注意点
このツールでは、入力したURLのページのOGP情報を取得します。OGPが設定されていないサイトの場合には、正しくブログカードが作成されません。

また、繰り返しになりますが、アイキャッチ画像の取得については、相手方のサーバに負荷が掛かる可能性がありますので、画像の直リンクが許可されていないサイトの場合はブログカードからの直接のURL参照はお控え頂きますようお願いいたします
参考サイト
外部サイトのブログカードのスタイルが現在ははてブのapiを利用しているため、スタイルができないと言う事がありましたので、色々やってみました。 外部サイトのogpが読めれば、後は整形して出力なので色々とできる可能性は広がります。 ここの元の内容はSimplicity公式のフォーラムに投稿したものです。 比較的簡単なので、問題的にはセキュリティをどうするかのみかと思います。比較的簡単と言えど、それなりに関係性を把握しないとアレなので初心者向けではないかも知れません。 必要なもの OpenGraph.php https://github.com/scottmac/opengraph/blob/master/OpenGraph.php Apache Licenseです。 前準備 子テーマでテストをしたので子テーマのlibディレクトリにopengraph.phpと、ajaxでデータをやり取りするためのch_blogcard.php(名前は適当)を設置。 ch_blogcard.php これはjQueryのajaxでこのファイルに対して通信して、データをjson出力するためのものです。またテストなのでセキュリティ的なものは考慮してませんのでご了承下さい。 子テーマlibディレクトリにopengraph.phpがある場合は上記のまま。別途ディレクトリを変える場合は、require_onceと以下のajaxでのアドレスが要変更。 jQueryのajaxでデータを取得して表示するためのスクリプト(子テーマjavascript.js) 使い方 記事編集画面で、 として外部のogpが設置してあるサイトのアドレスを入れる。複数設置してもok(複数の.exBlogと言う意味)。 出力されるhtml これら構造・class名はjQueryで変更可能。 このサムネイルのようにして出力されます。後はこれに合わせてcssでスタイルするだけ。 画像上に表示されているのは、Xdomainの自サイト記事のデータ(このサイトの記事のogpから出力したもの)、下はSimplicity公式の記事ページです。表示自体はcloud9のテストページです。 ajaxで処理しているので、色々とすることも可能ですが、現状は非同期で読み込むだけです。 例えば、functions
https://github.com/scottmac/opengraph こちらを使ってogpを解析しようとしたら文字化けしたので対応方法をメモ