Evernoteの「CLIPボタン」を追加してみた

Advertisement

最近、Evernoteを使ってよくウェブサイトの情報をクリップするので自分のブログにも「CLIPボタン」を付けてみた。

やり方はLifehacking.jpの「あなたのブログに Evernote Site Memory を追加する」という記事を参考にさせていただきました。

Evernoteのウェブサイトには特設ページができていて、そこでコードを作成するツールも提供されています。ちなみにこのボタンの名前は「Evernote Site Memory Button」というそうです。なんだか親しみにくい。。。笑

このブログでは、特設ページで作成したコードをもとに以下のようなコードを入れ込みました。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a class="evernote-button" href="#" onclick="Evernote.doClip({providerName:'ブログ名',url:'記事のURL',title:'記事のタイトル',contentId:'クリップさせたいコンテンツを含むHTMLタグのID'}); return false;"><img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a>

このブログでは、以下の要素を入れましたが、他にもクリップする際のタグやノートブックなども指定できるようです。Developer Guideのページに項目一覧が掲載されています。

  • providerName: ブログ名
  • url: 記事のURL
  • title: 記事のタイトル
  • contentId: クリップさせたいコンテンツを含むHTMLタグのID

結局、以下のコードをWordPressのThematicのChild Themeのfunctions.phpに入れて使いました。

$postmeta .= '<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>';
$postmeta .= '<a class="evernote-button" href="#" onclick="Evernote.doClip({providerName:\'ウェブ、やってます\',url:\'';
$postmeta .= get_permalink();
$postmeta .= '\',title:\'';
$postmeta .= get_the_title();
$postmeta .= '\',contentId:\'post-';
$postmeta .= get_the_ID();
$postmeta .= '\'}); return false;';
$postmeta .= '"><img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a>';

functions.phpの編集については、「ThematicのChild Themeに本家ツイートボタンを追加してみた」をご参照。

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です