Sharehtmlをまた改造。WEBクリエイターボックス風に記事紹介するコードを考えました。※いくつか課題あり。

Sharehtmlを改造することにハマった極一部の読者の方へ。

かの有名なブログ「WEBクリエイターボックス」風に記事を紹介できたら格好良いと思いませんか？

ということで作りました。いくつか課題は残りつつも、たたき台となるコードを考えましたのでご紹介します。

Sharehtmlとは？改造とは？

という方は、ぜひ以下の記事をご確認いただければと思います。

ブログ記事を紹介するブックマークレット「ShareHTML」を改造。コピペで使えるサンプルコードを公開します。 | みんなの扉を開くカギ

一言で言えば、上のようなリンクを一瞬で作るブックマークレットなのですが、今回はもう一歩踏み込んだコードをご紹介します。

WEBクリエイターボックスのあの人気コーナー「Twitter人気のつぶやき」を真似る！

WEBの勉強をしている方、ブログを書いている方なら、誰もが一度は絶対見るであろう超人気ブログ「Webクリエイターボックス」。

TwitterでもWEB関連の良記事を沢山紹介されており、人気があったつぶやきを下のようなブログで紹介されています。

Twitter 人気のつぶやき 9/29～10/5 2012 | Webクリエイターボックス

大きめの画像リンクを貼って見やすくしている他、タイトルや画像から引用元記事ににジャンプする事ができ、さらにTwitterでつぶやくこともできます。

この分かりやすくて活用しやすい「人気のつぶやき」のコーナーを、Sharehtmlで簡単に作成できないかと考えたわけです。

Sharehtml改造のポイント

改造するときに、注意したポイントは３つありました。

1.見出しを使って記事タイトルを紹介する

デフォルトのSharehtmlでは画像→タイトルの順番ですが、これを逆にしてh4タグの見出しを使う事にしました。

2.記事の横幅をいっぱいにして枠線もつける。

先日の@delaymaniaさんの記事を確認いただければ簡単に実装できます。CSSでデザインすることが重要なポイントです。

記事を紹介するブックマークレット「ShareHTML」をカスタマイズしました | delaymania.com

3.Twitterでつぶやく

この機能ですが、結局実装できませんでした。Twitterのshareパラメータをいじるところまでは何となく理解できたのですが、上手くリンクが作成できませんでした。

今回はTwitterの代わりにFacebookのシェアボタンを設置する事にしました。他にもシャアボタンは自分で作成する事ができるので、以下の記事を参照にアレンジしてみてください。

SNSのシェアボタンを作る為のURL&パラメータメモ | Mach3.laBlog

完成したSharehtmlのプレビュー

上の３つのポイントに気をつけてSharehtmlをいじった結果、最終的に以下のようなカタチになりました。

ブログ記事を紹介するブックマークレット「ShareHTML」を改造。コピペで使えるサンプルコードを公開します。 | みんなの扉を開くカギ

 
いかがですか？WEBクリエイターボックスさんに少しだけ近づけた気がしませんか？

課題とサンプルコード(たたき台)の紹介

上でも触れましたが、いくつか問題が残っています。

【１】Twitterのシェアボタンが作れない

パラメータを入れたコードをSharehtmlメーカーに入力すると、記事のタイトル部分をつぶやくことができません（URLのみつぶやくだけならできました）。

【２】CSSで上手くデザインできない

完全な勉強不足です。Facebookの共有部分をCSSで実装したかったのですが、力不足で直接htmlにコードを書きました。この辺りは@delaymaniaさんのようなWEBの専門家にぜひコメント＆修正いただきたいです。

【３】番号を自動挿入できない

必要ない方が多いかもしれませんが、WEBクリエーターボックスの人気記事紹介では、人気順に番号が振られています。これも自動化を考えたのですが、できませんでした。

TextExpanderを組み合わせれば、何とかなりそうだったのですが、あくまでブックマークレット一回で対応したかったので、実装は諦めました。これもどなたかアイデアがあれば教えて頂きたいです。

以上、気にするほどでもない課題かもしれませんが、きっと親切な誰かが解決してくれることを信じて、現段階のサンプルコードを載せておきます。

焼くなり、煮るなり、どう活用いただいても構いません。※このコードは未完成ですので、利用される際は自己責任でご活用くださいませ。

今回のカギ

未完成のコードを公開するか悩んだのですが、とりあえずこれ以上前に進めそうにないので、途中経過を報告できればと思い、ご紹介しました。

今回のカギは、

■中途半端でも声に出そう。きっと誰かが助けてくれるから！

です。

以上。未完成でもドンドン声に出した方が得することが多いと最近思っている@3_waより。