平均PVを上げるためにShareHTMLでリンクタグを作成する際に加えている一工夫、から一手間なくす。

昨日@OZPAさんが記事にしていた「Sharehtml」の改良。

これは便利だと思い、早速やってみたのですが「一手間」が面倒くさい。。。ということで、一手間をなくしてみました。

そもそもSharehtmlって何?

Sharehtmlを知らないブロガーの皆さん、たぶん損しています。

Sharehtmlはサムネイル付き(+はてブ数つき)のリンクをたった1クリックで作成できる便利ツールなのです。実例でご紹介しましょう。

実例1

まず、シェアしたいサイトを開き、事前に登録しておいたボタンをクリックします。

[画像:Sharehtml customize]

するとコメント入力欄になりますので、好きなコメントを入れて「OK」ボタンを押します。

[画像:Sharehtml customize1]

あとは出力されたURLをコピーして、ブログに張り付け(ペースト)するだけです。

[画像:Sharehtml customize2]

結果は、下のようなリンクになります。

サイトを開いてから記事に貼付けるまで本当に10秒もかかりません。

@hiro45jpさんが作成されたSharehtmlは本当に便利ですので、ぜひ設定から使い方まで時間をかけてでも覚えましょう。きっとブログがもっと楽しくなるはずです!

@OZPAさんのSharehtml改造

この便利なSharehtmlを改造した、人気ブロガーの@OZPAさん。サムネイルを画像に変えて、リンクの内容を分かりやすくするという方法でした。

自動でキャプチャーしたサムネイルをトップの画像に差し替える方法です。実際に実行すると、下のようなリンクになります。

確かに画像の方がインパクトがあって、PV数もあがりそうです。

しかし、@OZPAさんご本人も説明しているように、コピーした画像URLをimgタグの中に埋め込む(差し替える)のが面倒くさいです。

そこで、この「一手間」を減らす方法を考えました。

@3_wa式Sharehtml改造

方法はシンプルです。コピーした画像URLが、コメント欄経由で、imgタグに埋め込まれるよう設定すれば良いのです。

具体的な方法ですが、imgタグのsrc=””の中にあるURL(HeartRails Captureで自動作成するサムネイル)を ${memo} に切り替えるだけです。

${memo} とは、上で紹介したコメント欄の内容であり、ここに画像のURLをペーストします。実例で紹介しましょう。

実例2

まず画像URLをコピーします。

[画像:スクリーンショット 2012 10 05 3 54 06]

Sharehtmlを開き、コメント欄にコピーした画像のURLを貼付けてOKします。

[画像:スクリーンショット 2012 10 05 3 56 50]

あとは出力されたリンクのURLを貼るだけです。すると・・・

できました!!

文字通り「一手間」減らしただけですが、ずっと使いやすくなりました。

ただし、コメント欄にコメントを入れる事ができなくなることに気をつけてください。コメントを入れるなら、逆にこちらの方が一手間かかります!

以上ですが、これで記事の紹介の幅がまた広がりました。Sharehtmlを開発した@hiro45jpさん、Sharehtmlの改造を考えた@OZPAさんに感謝です!

今回のカギ

今回のカギは、

■しかく$[memo]を利用して、Sharehtmlのサムネイル画像を魅力的に!

でした。

もしサムネイルの自動キャプチャーに飽きた方はぜひお試しください!

@3_wa

参考

iPhoneアプリ「Postmania」の開発者@delaymaniaさんもSharethmlの改造方法について説明されています。classわけは確かにやった方があとあと便利かもしれません。いつもながら勉強になる記事ありがとうございます!

追記(2012年10月07日)

ShareHTMLを更に改造しました。@delaymaniaさんに習ってCSSで一括デザインできるようにし、影や枠をつけるなどの工夫を加えました(※(注記)下のようなリンクになります)。良かったら合わせてご覧下さい。