はてなダイアリーにtwitterの「ツイートする」「フォローする」ボタンをつける
なかなか上手くいかなかったのでとりあえずメモ。
普段からやってる人なら悩まないのかな〜
↓公式「ツイートボタン」説明
http://d.hatena.ne.jp/hatenadiary/20100813/1281694731
↓公式「フォローボタン」説明
http://d.hatena.ne.jp/hatenadiary/20110602/1307008019
その他にも「簡単に貼り付けられる」と紹介しているページ多数。
なのですが実際に貼り付けると上手くいきません。
まずtwitter公式から持ってきたタグ。そのままで動きません。
<a href="https://twitter.com/yasuharutwi" class="twitter-follow-button" data-lang="ja">@yasuharutwiをフォロー</a> <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> ↑ここに「http:」が入っていない。
その他いろいろ失敗したので結論のスクリプトだけ書いておきます。
ヘッダに追加したもの
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> <a id="twitter-header-icon" href="http://twitter.com/yasuharutwi"><img src="/images/icon-twitter.png" alt="Twitter" title="このページ作者のTwitterへ" border="0" width="20" height="20" class="icon"></a> <a href="https://twitter.com/yasuharutwi" class="twitter-follow-button" data-lang="ja" data-show-count="false">@yasuharutwiをフォロー</a>
「yasuharutwi」は自分のtwitterアカウントに書き換えましょう。
レイアウトが合わなかったので、class="ad"のdiv内に入れています。
記事に追加したもの
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="http://d.hatena.ne.jp/yasuhallabo/20111105/1320472632" data-via="yasuharutwi" data-lang="ja">ツイート</a>
「data-url」で各記事のURLを指定しています。題名は勝手に入るので省略してOKです。
記述後すぐに動作確認すると文字だけ表示されますが、リロードするとボタンが正しく表示されます。
data-countのところを変えるとボタンのデザインを変更することができます。
記事のURLを勝手に指定してくれる機能を探したのですが見つからず…。
まいっか!
- 作者: 浅田次郎
- 出版社/メーカー: 集英社
- 発売日: 2009/02/26
- メディア: 単行本
- 購入: 2人 クリック: 6回
- この商品を含むブログ (10件) を見る