Loading

« 上級者テンプレートを利用したブログでも「mixi チェック」が利用可能に | メイン | 上級者テンプレートの編集画面をタグごとに色分けする »

2010年10月26日 (火)

Evernote サイトメモリーボタンを設置する〜上級者テンプレート編

ブログ記事から直接 Evernote へ記事を保存（クリップ）

Evernote03

今回の TBB では、上級者テンプレートを利用している場合のみに利用できる Evernote サイトメモリーボタンの設置方法をご紹介します。

TypePad ビジネス では、標準テンプレートを利用いただいている方にも 2010年11月16日に Evernote 連携機能を提供開始予定ですが、今回は先行して上級者テンプレート用のデザイン TIPS としてご紹介します。

Evernote サイトメモリーボタンを設置する

Evernote 側の設定
  1. Evernote にアクセスする

    2. Evernote01

  2. 画面左下の [GET SITE MEMORY] をクリックする

    3. Evernote02

  3. [サイトメモリーボタンを設置する] で必要項目を入力する

    4. Evernote04

  4. [3:コードをテスト&コピーします。] に表示されたソースコードをコピーする
上級者テンプレートを利用しているブログへの設置方法
  1. [ホーム] - [ブログ] - [（ブログ名）] - [デザイン] を開く
  2. [entry-footer-links] を開く
  3. [テンプレートの内容] の [Twitter] ボタンの前に Evernote でコピーしたコードを挿入する
    ※ 以下は [entry-footer-links] のサンプルです。以下サンプルには TypePad ビジネスで利用している Evernote ソースが挿入されているので、ご自身で作成したソースと差し替えてください。
    ※ 特に太字でハイライトした Evernote 用の ID は各自で取得した文字列に置換してからご利用ください。 
    <p class="entry-footer-share entry-footer-share-buttons">

    <!-- はてな --!>
    <span class="entry-footer-links-hatena">
    <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="<$MTStaticWebPath$>images/b_entry.gif" width="16" height="12" style="border: none;" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a><a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>"></a>
    </span>

    <!-- delicious --!>
    <span class="entry-footer-links-delicious">
    <a href="http://del.icio.us/post" onclick="window.open('http://del.icio.us/post?v=4&partner=typepad&noui&jump=close&url=<$MTEntryPermalink encode_url_then_js="1"$>&title=<$MTEntryTitle encode_url_then_js="1"$>', 'delicious', 'toolbar=no,width=700,height=400'); return false;" class="share-link share-link-delicious"><$MTTrans phrase="Save to del.icio.us"$></a>
    </span>

    <!-- digg --!>
    <span class="entry-footer-links-digg">
    <a href="http://digg.com/submit?url=<$MTEntryPermalink encode_url="1"$>&phase=2" class="share-link share-link-digg"><$MTTrans phrase="Digg This"$></a>
    </span>

    <!-- Evernote --!>
    <script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
    <a href="#" onclick="Evernote.doClip({url:'<$MTEntryPermalink encode_js="1"$>',
      providerName:'<$MTBlogName$>',
      title:'<$MTEntryTitle$>',
      contentId:'entry-<$MTEntryID$>',
      code:'SixA6070'}); return false;">
    <img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>

    <!-- Twitter --!>
    <span class="entry-footer-links-twitter">
    <script type="text/javascript">
    var tweetTitle  = '<$MTEntryTitle encode_url_then_js="1"$>';
    var tweetUrl;
    <MTIfNonEmpty tag="EntryShortURL">tweetUrl = '<$MTEntryShortURL encode_js="1"$>';
    <MTElse>tweetUrl = '<$MTEntryPermalink encode_js="1"$>';</MTElse></MTIfNonEmpty>
    var tweetLink = 'http://twitter.com/home?status='+tweetTitle + ' ' + tweetUrl;
    document.write('<a href="'+tweetLink+'" target="_blank"'+' class="share-link share-link-twitter"><MTTrans phrase="Tweet This!"><'+'/a>');
    </script>
    </span>
    </p>

    <!-- Facebook --!>
    <iframe src="http://www.facebook.com/widgets/like.php?href=<$MTEntryPermalink encode_js="1"$>" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>
  4. [保存] ボタンをクリックする

    Toolbar06

  5. [entry-footer-links-mixi] を開く（ただし[entry-footer-links-mixi] が無い場合は手順 8 に進む。）
  6. [テンプレートの内容] の [Twitter] ボタンの前に Evernote でコピーしたコードを挿入する
    ※ 以下は [entry-footer-links] のサンプルです。以下サンプルには TypePad ビジネスで利用している Evernote ソースが挿入されているので、ご自身で作成したソースと差し替えてください。
    ※ 特に太字でハイライトした Evernote 用の ID は各自で取得した文字列に置換してからご利用ください。 
    <p class="entry-footer-share entry-footer-share-buttons">

    <!-- はてな --!>
    <span class="entry-footer-links-hatena">
    <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="<$MTStaticWebPath$>images/b_entry.gif" width="16" height="12" style="border: none;" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a><a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>"></a>
    </span>

    <!-- delicious --!>
    <span class="entry-footer-links-delicious">
    <a href="http://del.icio.us/post" onclick="window.open('http://del.icio.us/post?v=4&partner=typepad&noui&jump=close&url=<$MTEntryPermalink encode_url_then_js="1"$>&title=<$MTEntryTitle encode_url_then_js="1"$>', 'delicious', 'toolbar=no,width=700,height=400'); return false;" class="share-link share-link-delicious"><$MTTrans phrase="Save to del.icio.us"$></a>
    </span>

    <!-- digg --!>
    <span class="entry-footer-links-digg">
    <a href="http://digg.com/submit?url=<$MTEntryPermalink encode_url="1"$>&phase=2" class="share-link share-link-digg"><$MTTrans phrase="Digg This"$></a>
    </span>

    <!-- Evernote --!>
    <script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
    <a href="#" onclick="Evernote.doClip({url:'<$MTEntryPermalink encode_js="1"$>',
      providerName:'<$MTBlogName$>',
      title:'<$MTEntryTitle$>',
      contentId:'entry-<$MTEntryID$>',
      code:'SixA6070'}); return false;">
    <img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>

    <!-- Twitter --!>
    <span class="entry-footer-links-twitter">
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    <a href="http://twitter.com/share" class="twitter-share-button"
       data-url="<MTIfNonEmpty tag="EntryShortURL"><$MTEntryShortURL encode_js="1"$><MTElse><$MTEntryPermalink encode_js="1"$></MTElse></MTIfNonEmpty>"
       data-counturl="<$MTEntryPermalink$>"
       data-text="<$MTEntryTitle$>"
       data-count="horizontal">Tweet</a>
    </span>

    <!-- mixiチェック --!>
    <$MTMixiCheck$>

    </p>

    <!-- Facebook --!>
    <iframe src="http://www.facebook.com/widgets/like.php?href=<$MTEntryPermalink encode_js="1"$>" scrolling="no" frameborder="0" style="border:none; width:450px; height:40px"></iframe>
  7. [保存] ボタンをクリックする

    Toolbar06

  8. [公開] ボタンをクリックする

    Toolbar07

  9. ポップアップウィンドウで [すべてのファイル] が選択されている事を確認し [公開] ボタンをクリックする

    Toolbar08

以上で、上級者テンプレートで作成されているブログ記事のフッターへ Evernote サイトメモリーボタンを設置するための作業は完了です。

Evernote サイトメモリーボタンを設置すると、閲覧者が Evernote サイトメモリーボタンをクリックすることで、閲覧者の Evernote に記事を簡単に保存することができます。

投稿した記事が Evernote 経由でより多く流布されていくことのキッカケとして、ぜひ設置にチャレンジしてみてください。

補足

サンプルソース

TypePad ビジネスブログには、以下のソースを挿入してします。

<!-- Evernote --!>
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({url:'<$MTEntryPermalink encode_js="1"$>',
  providerName:'<$MTBlogName$>',
  title:'<$MTEntryTitle$>',
  contentId:'entry-<$MTEntryID$>',
  code:'SixA6070'}); return false;">
<img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>
シックス・アパート 2010年10月20日発表 プレスリリース

投稿者 店長 日時 2010年10月26日 (火) 11:04 SMO, TypePad ビジネス, ソーシャル, テンプレート, デザイン |

このエントリーをはてなブックマークに追加 Clip to Evernote Check

トラックバック

このページのトラックバックURL：
http://bb.lekumo.jp/t/trackback/463013/25257253

Evernote サイトメモリーボタンを設置する〜上級者テンプレート編を参照しているブログ:

» 標準テンプレートを利用しているブログにも Evernote サイトメモリーを設置可能に (TypePad ビジネス ブログ)
標準テンプレートを利用しているブログに Evernote サイトメモリーを設置する方法 [続きを読む]

トラックバック送信日: 2010年11月18日 (木) 09:00

» Evernote から「ノート」を記事に挿入 (TypePad ビジネス ブログ)
記事の本文に Evernote に保存してあるノートを記事に挿入することができます。 [続きを読む]

トラックバック送信日: 2011年5月26日 (木) 17:40

コメント

コメントを投稿

コメントは記事の投稿者が承認するまで表示されません。

コメントは拒否されました。

Comment below or log in with TypePad and more...

Lekumo ビジネスブログ

最近の記事

カテゴリ

アーカイブ

もっと読む

RSS（XML）フィード

Google

運営会社

  • シックス・アパート株式会社
    住所: 東京都 千代田区 神田神保町3-17-15
    ヨシダFGビル5F
     電話番号: 03-6261-4640（代表）

Copyright 2003- Six Apart, Ltd. All rights reserved.