2011/08/03
12:38
Tag: - サイトメモリー by Evernote
- ツイートボタン by Twitter
- フォローボタン by Twitter
といってもhtmlは少し読めるだけなので、Javascriptのコードなんて書ける訳も無いわけで、力を借りたサイトは以下の２つです。
- サイトメモリーって何？ - Evernote
- 素材 - Twitter
各記事で作成したコードを、最初は各エントリに貼り付けていたのですが、毎回貼り付けるのは面倒くさいので、以下の方法で自動的に各エントリに入るようしました。
記事の指定は<div id=で指定されたidを入れればいいみたいなのですが、bloggerではたぶんここが該当すると思われた。
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
ここでこけました。exprは属性値を展開するためのもので、各エントリー毎に付与される”data:post.id”を指定してくれるものだと思うのですが、exprの使い方がよくわからない。一日ググってやっとこさ作成したコードが以下の通り。
<span>
<a expr:onclick='"Evernote.doClip({providerName:\"" + data:title + "\", title:\"" + data:post.title + "\", url:\"" + data:post.url + "\"}); return false;"' href='#'>
<img alt='Clip to Evernote' src='http://static.evernote.com/article-clipper.png'/>
</a>
</span>
ここで「"」=「"」のこと。expr内に"は使っちゃいけないみたい。
本当は「styling:'full'」の要素を入れたかったのだけど（文字データは白指定で、このままクリップするとEvernoteで記事が真っ白になってしまうから。）、入れ方がわからず詰んでしまったorz
・・・ので、逆転の発想で、黒ベースだったレイアウトを白ベースに一新して、この問題をクリア。無事に設置することが出来ました。黒ベースの方が格好いいと個人的には思うのだけど、ここは仕方が無い。
どなたか詳しい方いらっしゃいましたら、アドバイスをいただけると嬉しいです。
ブログ弄りって楽しいけど、時間があっという間に過ぎてしまいますね(^^;)
- 「デザイン」→「HTMLの編集」→「テンプレートを編集」
まずは「テンプレートを全てダウンロード」をクリックしてバックアップしましょう。
- 「ウィジェットのテンプレートを展開」にチェック
- </head>タグの直前くらいに以下のコードを追加
<script src='http://static.evernote.com/noteit.js' type='text/javascript'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
- <div class='post-header-line-1'/>の直後くらいに、<a ...>～</a>までのコードの前後を<span>，</span>で挟んだコードを追加。ここに、Evernoteのクリップボタンと、Tweetボタンを作りました。
（例）Tweetボタンの追加(記事毎のツイート数表示のため、下線部を追記しました：8/3)
<span>
<a
class='twitter-share-button'
data-count='horizontal'
data-lang='ja'
data-via='chimtty'
expr:data-text='data:post.title'
expr:data-url='data:post.url'
href='http://twitter.com/share'>ツイート</a>
</span>
- <div class='post-footer-line post-footer-line-3'>の直前に以下のコードを追加して、Twitterフォローボタンを作りました。
<span>
<a class='twitter-follow-button' data-lang='ja' data-show-count='false' href='http://twitter.com/chimtty'>Follow @chimtty</a>
</span>
記事の指定は<div id=で指定されたidを入れればいいみたいなのですが、bloggerではたぶんここが該当すると思われた。
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
ここでこけました。exprは属性値を展開するためのもので、各エントリー毎に付与される”data:post.id”を指定してくれるものだと思うのですが、exprの使い方がよくわからない。一日ググってやっとこさ作成したコードが以下の通り。
<span>
<a expr:onclick='"Evernote.doClip({providerName:\"" + data:title + "\", title:\"" + data:post.title + "\", url:\"" + data:post.url + "\"}); return false;"' href='#'>
<img alt='Clip to Evernote' src='http://static.evernote.com/article-clipper.png'/>
</a>
</span>
ここで「"」=「"」のこと。expr内に"は使っちゃいけないみたい。
本当は「styling:'full'」の要素を入れたかったのだけど（文字データは白指定で、このままクリップするとEvernoteで記事が真っ白になってしまうから。）、入れ方がわからず詰んでしまったorz
・・・ので、逆転の発想で、黒ベースだったレイアウトを白ベースに一新して、この問題をクリア。無事に設置することが出来ました。黒ベースの方が格好いいと個人的には思うのだけど、ここは仕方が無い。
どなたか詳しい方いらっしゃいましたら、アドバイスをいただけると嬉しいです。
ブログ弄りって楽しいけど、時間があっという間に過ぎてしまいますね(^^;)
