リッチリンクを手軽に作成！ ブログカードジェネレーター
public
flareブログカードを生成flare
使い方は簡単、生成されたHTMLコードをコピー&ペーストするだけです。画像以外は外部のサービスに依存しません (画像の直リンクが許可されていないサイトの場合は、アイキャッチ画像のURL参照はお控え頂きますようお願いいたします)。
CSS
使い方
1. ブログカードを作成したいサイトのURLを入力して、「ブログカードを生成」ボタンを押します。
2. 生成されたHTML と 上のCSS の二つのコードをBlogなどのHTML編集画面に貼り付けて下さい。
また、改行を取り除いたCSSは以下からコピーできます。
また、改行を取り除いたCSSは以下からコピーできます。
-
add_circle改行を取り除いたCSS
注意点
このツールでは、入力したURLのページのOGP情報を取得します。OGPが設定されていないサイトの場合には、正しくブログカードが作成されません。
また、繰り返しになりますが、アイキャッチ画像の取得については、相手方のサーバに負荷が掛かる可能性がありますので、画像の直リンクが許可されていないサイトの場合はブログカードからの直接のURL参照はお控え頂きますようお願いいたします。
このツールでは、入力したURLのページのOGP情報を取得します。OGPが設定されていないサイトの場合には、正しくブログカードが作成されません。
また、繰り返しになりますが、アイキャッチ画像の取得については、相手方のサーバに負荷が掛かる可能性がありますので、画像の直リンクが許可されていないサイトの場合はブログカードからの直接のURL参照はお控え頂きますようお願いいたします。
参考サイト
外部サイトのブログカードのスタイルが現在ははてブのapiを利用しているため、スタイルができないと言う事がありましたので、色々やってみました。 外部サイトのogpが読めれば、後は整形して出力なので色々とできる可能性は広がります。 ここの元の内容はSimplicity公式のフォーラムに投稿したものです。
https://github.com/scottmac/opengraph こちらを使ってogpを解析しようとしたら文字化けしたので対応方法をメモ
