iMémorandum de café, thé, iPhone, iPad, Mac, etc.
ボタンの取得方法や具体的な設置云々は追記に書きます。
「とりあえず設置したい！」という方は何も考えずに以下のコードを<div class='post-header'>や<div class='post-footer'>, <div class='post-footer-line post-footer-line-2'/>の下あたり（好みの位置があると思うので、色々と試してみて下さい）に設置してみて下さい。
<a class='twitter-share-button' data-count='horizontal' data-via='***' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
ただし、***の部分はご自身のTwitterアカウントを入力して下さい。
私はhfmというアカウント名なので***にhfmを入力しています。
追記に細かな取得方法や、もう少しちゃんとした設置方法を記載します。
追記に細かな取得方法や、もう少しちゃんとした設置方法を記載します。
まずはこちらのツイートボタン取得ページへ行きます。
 |
| 3種類から好きなボタンを選びます |
 |
| ツイート内テキストにはdata:post.titleを入力します |
 |
| URLにはdata:post.urlを入力します |
 |
| 言語を選びます。"ツイート"より"Tweet"の方が短いので私は英語一択。 |
 |
| 自分のアカウントが入っていればokです。 |
 |
| 上のおすすめユーザにアカウントを入れると、こちらの黄色枠の表示が変わります。アカウントを追加すれば、こちらの表示も増加します。 |
*data:post.titleとはBloggerの独自タグで、各記事のタイトルを自動で生成します。
*data:post.urlは各記事のURLを自動生成します。
さて、ここまでのステップを踏むと、ツイートボタン生成ページの最下部にあなたのコードが表示されているはずです。
それをコピーする前に注意したいのが、Bloggerの独自タグの存在です。
data-url="data:post.url"とdata-title="data:post.title"の2つの属性をそれぞれ
expr:data-url="data:post.url"とexpr:data-title="data:post.title"に変更しましょう。
2つの属性の前にexpr:を追加しています。
以下はほんのちょっぴりヲタクな話（分かる人はやっておくべき？）
ツイートボタンのコードはリンクタグとJavaScriptの読込みタグで構成されていますが、これらのタグをこのまま<div class='post-header'>等に入れてしまうと、各記事ごとにJavaScriptの読込みタグを生成してしまいます。
（動作としては問題ないですが）気持ちが悪いので<script~>コードだけ<head>~</head>内に設置しましょう。
そして<a~>Tweet</a>タグだけを先述のdivタグ直下あたりに入れておくと、ちゃんと機能します。
0 件のコメント:
コメントを投稿