最近、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に本家ツイートボタンを追加してみた」をご参照。
2010年10月1日に公開され、2017年11月23日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。