maRkの

キャンペーンだとか、Chess.appについてのなにか

Evernoteのクリップボタン付けてみた(今更)

オワコンとか囁かれていたりするエバノなんですが。
Clip it ボタン(でよかった?)は、Zenback 入れてるとついてきたように思うけど、自分は使ってないので、自前で入れることにした。

公式のサイトで探せなかったので別ブログで貼ったのそのまま転用してたりするんですが、以下のサイトのページに詳細が記載されていました。


追記:2018/04/18

Clipボタンは使用できません。



WordpressテーマにEvernoteのクリップボタンを取り付けるカスタマイズ方法

まずは、記事ページのみ表示させたいので、デザイン編集の[記事]の方で、できれば記事上の方がいいかと思います。

<a href="https://www.evernote.com/noteit.action" rel="nofollow" onclick="Evernote.doClip({contentId:document.getElementsByTagName('article').id, providerName:'YOUR BLOG URL'});return false;">
<img src="http://static.evernote.com/article-clipper-jp.png" alt="Clipボタン" style="border:0px;" height="17" width="58">
</a>

Evernote.doClip にオブジェクトを指定するなどです。

cotentId は記事のエリアにある id を入れるので、はてブロの場合だと、 article['id'] が該当。
providerNameには、各自のブログのトップページのURLを入れます。


これだけだと、リンクを作成しただけなんで、ClipさせるJavaScript本体を読み込みします。

<script src="http://static.evernote.com/noteit.js" async='true'></script>

を記事下などで。
自分は、フッターに貼ったので、以下のようになってます。

<script>
(function(){
 if(document.documentElement.getAttribute('data-page') === 'entry'){
    var evn = document.createElement('script');
    evn.src = 'http://static.evernote.com/noteit.js';
    evn.async = 1;
    document.head.appendChild(evn);
 }  
})();
</script>

あとはテンプレート編集のプレビューでもいいので、clip it を押してみて、ウィンドウが表示されれば成功です。
適当にclass を振って、 CSSで位置の調整をしたら完成です。