ブックマークレット「ShareHtml 」を修正して、WordPress.com でもサムネイル画像がちゃんと表示できるようにする

!

2015-03-16現在、この記事に書かれているような対処は必要なくなっていることを確認済みです。

!

2015-01-15 23:26現在、アドレスが「https」で始まっている Web ページでは、環境によっては HTML タグを生成できないことを確認済みです。

!

mac の Firefox ではダメですが、mac の Safari や iPad の Safari では OK でした。(2015-01-29追記)

!

mac の Firefox 用のものを作成しました。(2015-03-05追記)

ブックマークレット「ShareHtml 」を修正して、WordPress.com でもサムネイル画像がちゃんと表示できるようにする(mac の Firefox 用) | comemo|2015-02-12

最近、WordPress.com のブログ・サイトにおいて、 1 ShareHtml のブックマークレットで生成した HTML タグにより表示されるサムネイル画像が代替のものに切り替わってしまうようです。

ShareHtml のブックマークレットを WordPress.com でも使えるようにする | t demo

そこで、ShareHtmlメーカーで作成した以下のブックマークレット  2

以下のような感じに修正しました。 3

!

HTML エンコード処理をかけないと汎用性が低くなるようなので、その処理を行いました。もし、中身の確認をしたい場合は、PopClip の「URL Encode」(デコード機能もあります)等を使って下さい。

すると、以下のような感じでサムネイル画像がちゃんと表示されるようになりました。(2015-01-15現在)

デザインTips: 角丸パネルに角丸パネルを重ねた時、それぞれの角丸をバランスよくデザインする方法 | コリス
バランスが良い角丸のデザイン方法を紹介します。 …
ここにコメントを入れることができます。

実際にブックマークレットを使っているようすはこんな感じです。

参考

  1. 詳しいことはわかりませんが、「https」でアドレスが始まっている WordPress.com で生じている現象ではないかと推測しています。 
  2. 内容がわかりやすいようにデコード処理してあります。なお、デコード処理作業では mac のアプリ「PopClip」の「URL encode」という拡張機能を使いました。 
  3. サムネイル画像の抽出先を「HeartRails Capture」から WordPress.com API へ変更するなどの修正を行いました。 

7件のコメント

  1. おお!ありがとうございます。

    いいね: 1人

  2. す、すいません、やり方がイマイチわからないんですorz。

    いいね

    1. 現在の ShareHtml のものと差し替えるか、適当なページをブックマークし、アドレスを上記のものと差し替えて、そのブックマークをクリックすると、上の動画のような感じで HTML タグが生成され、それをコピーして WordPress.com に貼り付ける、という手順です。

      (以下、お試しの貼り付け)

      コリス | サイト制作に関する最新の情報をご紹介

      いいね

    2. あと、もしかしたら、環境によってはうまくいかないケースもあるかもしれません。私が使っている環境は mac の Safari と Firefox ですが、Firefox の方だと HTML タグをうまく生成できないケースがあるようです。

      (以下、お試しの貼り付け)

      ブックマークレット「ShareHtml 」を修正して、WordPress.com でもサムネイル画像がちゃんと表示できるようにする | comemo

      いいね: 1人

      1. わざわざ、ありがとうございます。
        実はFirefox Portableです(笑)。

        いいね: 1人

        1. どうやら技術的な壁がいくつかありそうな感じです(泣) なんとか ShareHtml を WordPress.com でも使えるようにしたいところです。

          いいね: 1人

  3. […] とりあえず、comemoさんの記事をヒントに、WordPress.com APIを使ってサムネイル画像を取得するように、ブックマークレットが生成したHTMLソースを修正することにしました。 以前 […]

    いいね

katsuhiro fuchinoue にコメントする コメントをキャンセル

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。