The WordPress Iframe Tweet Button Installation Guide ／ ワードプレスでツイートボタンをインストールする方法
15 8月
ワードプレスでツイートボタンをインストールする方法
昨日、ツイッターからのオフィシャルツイートボタンがリリースされて、すぐに使おうと思った。Ｔｗｅｅｔｍｅｍｅより機能があって、特にツイートした後でフォローお勧めの画面がワンダフル☆
やっとキレイにボタンをインストールできたが、思ったとおり、スムーズに進まなかった。それは、ウェブデザイナーの人生ですｗ
だからココで得たノウハウをシェアしよう思った！このガイドは一応ワードプレス向けのガイドだけど、普通のウェブサイトでも参考になると思う。
With the release of the official tweet button from twitter yesterday, I of course had to integrate it into my blog. Official being part of it, new being another, and the extra “recommend you to follow” function being the biggest part!
I’ve got it all ironed out at this point, as you can see, but just as I guessed the process didn’t go smoothly. Such is the life of those in web design =D
Anyhow, I thought I’d share the process I went through in case it helps others!
This guide is primarily focused on how to get it all to work in WordPress, but even for websites it can help as a reference.
ボタンを使うチャレンジ：
１．Ｊａｖａｓｃｒｉｐｔ（ジャバスクリプト）を使わないこと
２．機能を全部使えるようにする
３．フェイスブックのボタンとキレイに並ぶ
The Plan for the Button
1. To not use Javascript
2. To get all the snazzy new functions to work
3. To line it up nicely with the facebook button
-
１．Ｊａｖａｓｃｒｉｐｔ（ジャバスクリプト）を使わないこと
1. To not use Javascript
日本では分からないけど、セキュリティーのため、俺は自動的にＪａｖａｓｃｒｉｐｔを向こうにするプログラムＮｏＳｃｒｉｐｔ（ファイアフォックスのアッドオン）を使っている。だからＪａｖａｓｃｒｉｐｔを使えば、有効しないとツイートボタンが出なくなる。
ラッキーなことで、Ｊａｖａｓｃｒｉｐｔのほかにｉｆｒａｍｅを使うオプションもあった。トリッキーなところは、ツイートするボタンの公式サイトでは、Ｊａｖａｓｃｒｉｐｔのコードしか作ってくれない。ｉｆｒａｍｅなら自分でコードを作らないと残念。そのコードを、次のセクションにシェアする。
Not sure about all you readers, but I use the NoScript addon for Firefox while browsing, so by default Javascript is disabled whenever I browse a new site. Which would mean that by default, the tweet button wouldn’t show up until I allowed Javascript on the site, so I wanted to avoid it if possible.
Luckily, aside from Javascript, you can implement it with an iframe, so that’s what I used. The tricky part is just that the official tweet button website only generates Javascript code for you, so you need to figure out how to code the iframe yourself. I’ll be sharing the code for that in the next section.
-
２．機能を全部使えるようにする
2. To get all the new snazzy functions to work
ツイッターのデベロッパーサイトのツイートボタンページでｉｆｒａｍｅのコードを見つけたが、カスタマイズされた例がない。でも、まあ、重要なのはつかるコードだよね。下にある。
The code for the iframe version of the button can be found on the twitter developer site, but it doesn’t have an example on how to customize it. But, well, what’s important is just the code that works, right? Here it is:
<iframe
style=”width: 130px; height: 20px;”
allowtransparency=”true”
frameborder=”0″
scrolling=”no”
src=”http://platform.twitter.com/widgets/tweet_button.html?url=<?php echo urlencode(get_permalink($post->ID)); ?>
&via=RaimanAu
&text=<?php the_title(); ?>
&related=designmejp
&lang=ja
&count=horizontal
“></iframe>
上のコードをテーマのファイルのｉｎｄｅｘ．ｐｈｐとｓｉｎｇｌｅ．ｐｈｐにそのまま貼り付けたら、すぐ使える。（管理画面⇒外観⇒テーマ編集⇒右にあるメニュー）
テーマのデザインによるけど、普段、コードの<?php the_title(); ?>と<?php the_content(); ?>の間に使えばベストだと思う。分からなかったらしたのイメージを見てください！
If you go ahead and paste the above code into your theme’s index.php and single.php files, you can use it right away! (Admin panel -> Appearance -> Editor -> Menu on the right)
It will depend on the design of your blog’s theme, but normal, if you paste the script somewhere between <?php the_title(); ?> and <?php the_content(); ?>, it will show up where you want it to be. If you don’t really understand, then have a look at the image below and it should help!
では、カスタマイズの説明です！上のコードの強調されたテキストは注意するところ。
And now here’s how to customize it! The text in bold in the code above is where you need to pay attention to.
-
via=RaimanAu
RaimanAuの代わりに、自分のツイッターのユーザーネームを書き込む。この機能は自動的に＠ユーザーネームをツイートに入れる。
Instead of RaimanAu, you’re going to want to put your own twitter username. This function automatically adds the @username to the tweet that gets generated.
-
text=<?php the_title(); ?>
<?php the_title(); ?>はワードプレスが使うコードで、ツイートに、投稿のタイトルを自動的に取る。そのまま変えないほうがいい。
<?php the_title(); ?> is code used by WordPress to get the title of your post and puts it in the tweet. Leave this as it is.
-
related=designmejp
ツイートした後に、フォローお勧めの画面のアカウントはここで設定する。今は@designmejpを勧めている。１つ以上のアカウントを勧めたかったら、user1:user2の形に入れればＯＫ！
After tweeting using the tweet button, this code brings up a recommended account to follow! Right now it’s following @designmejp. If you want to add more recommendations, then use the format user1:user2.
-
lang=ja
ツイートボタンの言語を選べるコードです。今の所で選べられる言語は日本語（ｊａ）、英語（ｅｎ）、とスペイン語（ｅｓ）です。
This sets the language of the tweet button. Right now, the available languages are English (en), Japanese (ja), and Spanish (es).
-
count=horizontal
ボタンのタイプを決める。ここで入れられるのはnoneとhorizontalとverticalです。下のイメージに、違いを見せる。
This determines the type of button that you have. You have three options: none, horizontal, and vertical. The corresponding button is shown in the image in below.
-
style=”width: 130px; height: 20px;”
ボタンの幅と高さを決める。言語とタイプによる、これを変える必要がある。サイズはしたのイメージにある。
This sets the size of the button, which actually changes depending on the language and the count type. The dimensions are shown in the image below.
もうすぐ終わり！パート３へ！
Whew, now we’re almost done! On to part 3!
-
３．フェイスブックのボタンとキレイに並ぶ
3. To line it up nicely with the facebook button
フェイスブックの「いいね！」ボタンと同じ行に並べたかったら、ちょっと工夫しないと出来ない場合が多い。
まずはフェイスブックのボタンの幅を３００pxなどに編集する必要がある。じゃないと、ボタンは行の見えないところまで伸びて、ツイートボタンを置きたい場所がなくなってしまう。インストールによって、フェイスブックボタンのプラグインの設定、またはコードに直接変えられる。フェイスブックボタンの幅は普通４５０ｐｘだと思う。
それが出来たら、次のステップはツイートボタンを右端に付ける。ｉｆｒａｍｅのコードにちょっと加えれば出来る。
<div style=”float:right; margin-top:2px;”>
をコードの前に付けて、
</div>
をコードの後に付ける。
上にあるツイートボタンのコードのイメージには、出来上がった例がある。このコードは、ｉｆｒａｍｅのコードを全部見えないボックスに置いて、ボックスを右寄せにして、上に２ｐｘの余白を付ける。
上の余白の理由は、小さいツイートボタンとフェイスブックのサイズは若干違うから、付けたらキレイに見えることです。そして大きいボタンの場合に、２ｐｘを０ｐｘにすればいい！
If you’re looking to line up the tweet button on same row as a facebook like button, like on my site on the main page, you actually have to do a little adjusting to get it to work properly.
The first step is to change the width of the facebook button to something like 300px. By default, the width is 450px, which makes the button invisibly extend way to the right and can take up all the space on the line, which leaves no space for the tweet button! Depending on how you installed the facebook button, you can change the width in the plugin settings or directly in the code.
Once you’ve done that, all that needs to be done is to add a little bit more code to the iframe code! What you want to do is add the following code:
<div style=”float:right; margin-top:2px;”>
before the iframe code, and then the code below:
</div>
after the iframe code.
What this does is put the iframe into an invisible box, align it to the right side, and add a 2px margin to the top of it.
Why the margin? Because the facebook button is slightly larger than the small tweet button, and if both of them are aligned to the top of the post, the difference is a little jarring. If you move the button down the 2px, though, it looks a lot cleaner!
And in the case where you’re using the larger tweet button, just change the 2px to 0px and you’re all set!
-
最後に、参考のために、このプロジェクトに役に立ったサイト：
http://twitter.com/goodies/tweetbutton
http://dev.twitter.com/pages/tweet_button
http://dev.twitter.com/pages/tweet_button_faq
Finally, the sites above are what I used for reference in getting all this done!
-
もっと質問があれば、是非コメントで聞いてください！
If you have any comments or questions, feel free to share them!
-
Oh and last but not least, props to all of the people who left tons of helpful comments on the tweet button post at mashable.com! Sorting through all the comments there helped inspire me to create this =D
