Evernoteにクリップするボタンを追加する

SNS連携ではありませんが、日頃お世話になっているEvernote（エバーノート）なので、ブログに簡単にコンテンツをクリップできるEvernoteサイトメモリーのボタンを追加してみました。

Evernoteサイトメモリーページにある『GET STARED』をクリックするか、画面をスクロールして『サイトメモリーを設置する』で幾つかのパラメータをセットするだけで簡単にコードが生成されます。

Evernoteサイトメモリーの使い方（設定方法）

ボタンの選択

ブログに使用するボタンを選択します。

クリッピングの設定

『Webサイト名』にブログ名（ブログタイトル）を入れます。説明にあるように設定していないとクリップするときにドメイン名となります。

『クリップするコンテンツ』は「main」とします。設定していないとブログ全体がクリッピング対象となります。このブログの場合は、設定していないとサイドバー含めてクリップされてしまいます。

コードのコピー

コードをテスト＆コピーとありますが、カット＆コピーの間違いでしょうか。





生成されたコードは下記となります。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'象と散歩',contentId:'main'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>

このコードをそのまま利用してもよいのですが、画像に枠線が残るため、<img>タグに style='border: none' を追加します。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'象と散歩',contentId:'main'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" style="border: none" /></a>

BloggerにEvernoteサイトメモリーを設置する

Blogger利用者が、Evernoteサイトメモリーを設置する場合には下記の手順により、ヘッダー部に表示されます。クリップされたときの題名には、<title>タグに設定されている内容が反映されます。

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから <div class='post-header-line-1'> を検索。
3．<div class='post-header-line-1'> の下にコードを張付ける。

Evernoteクリップボタンを試してみる

ブログに表示されたEvernoteサイトメモリーを試してみます。





クリップがクリックされると、Evernoteにログインしていなければ、ログイン画面が表示されます。





Evernoteにログインするとクリップの確認画面が表示されます。『Clip from』には、上記設定の『Webサイト名』が表示されます。左下の『クリップ』をクリックするとEvernoteの新規ノートに登録されます。





クリップが成功すると下記の画面が表示されます。






-- iPadから送信