<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>はなとみかん &#187; JavaScript</title>
	<atom:link href="http://hanatomikan.com/tag/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://hanatomikan.com</link>
	<description>「はなとみかん」はWebデザイン、ホームページ作成、ネットショップ（ショップサーブ、楽天市場、Yahoo!ストア）のデザイン・カスタマイズなどをしているフリーランスのWebデザイナーです。</description>
	<lastBuildDate>Tue, 04 Jan 2011 01:16:14 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://hanatomikan.com/tag/javascript/feed" />
		<item>
		<title>Tweet Thisボタンをつけてみた</title>
		<link>http://hanatomikan.com/blog/wordpress/tweet-this%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e3%81%a4%e3%81%91%e3%81%a6%e3%81%bf%e3%81%9f</link>
		<comments>http://hanatomikan.com/blog/wordpress/tweet-this%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e3%81%a4%e3%81%91%e3%81%a6%e3%81%bf%e3%81%9f#comments</comments>
		<pubDate>Tue, 19 Jan 2010 08:37:44 +0000</pubDate>
		<dc:creator>はなとみかん</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[Twitter]]></category>
		<category><![CDATA[カスタマイズ]]></category>
		<category><![CDATA[プラグイン]]></category>

		<guid isPermaLink="false">http://hanatomikan.com/?p=708</guid>
		<description><![CDATA[なんとなくTweet Thisボタンを付けてみたくなって設置するまでの長い道のり？のお話ｗ結局最後は・・・]]></description>
			<content:encoded><![CDATA[<p><img src="http://hanatomikan.com/wp-content/uploads/tweet_this225.gif" title="つぶやいてみる？" width="225" height="225" class="alignleft size-full wp-image-725" />Twitterユーザーが増えた今日この頃、ブログやニュースサイトに「Tweet This」ボタンが設置されているのをよく見るようになりました。</p>
<p>気になった記事についてスグに「つぶやける」のは便利ですよね。</p>
<p>私はたまにブクマ代わりに使ったりします。</p>
<p>で、これをこのサイトにも付けて見たくなったわけです。大した情報もないけど（爆）</p>
<h2>WPプラグインを探してみる</h2>
<p>WordPressを使っているのでまずはプラグインを探してみました。</p>
<ul>
<li><a href="http://richardxthripp.thripp.com/tweet-this">Tweet This</a></li>
<li><a href="http://wppluginsj.sourceforge.jp/simple-tweet/">Simple Tweet</a></li>
</ul>
<p>この２つのプラグインが使いやすそうだったのでインストールしてみました。<br />
両方ともTweet Thisボタンの設置だけじゃなく、ブログに新規投稿した時にTwitterに自動でtweetされる機能があります。<br />
お得ですｗ</p>
<h3>Tweet Thisについて</h3>
<p>使い方は簡単で、インストールして管理画面で設定を行えば勝手に記事の末尾にTweet Thisボタンが追加されます。<br />
タグの設置をしなくて良いのはメチャ簡単で◎！</p>
<p>でも私は勝手に入れられたくないんです！（わがままｗ）</p>
<p>多分、自分で任意の場所に設置できるんだろうけど、英語を読み解くのがおっくうになって挫折。<br />
（英語はメチャ苦手ｗｗ）</p>
<h3>Simple Tweetについて</h3>
<p><a href="http://dogmap.jp/">をかもと</a>さんが作ったとてもシンプルで使いやすいプラグインです。<br />
何より日本語が一番！</p>
<p>メインは「新規投稿した時にTwitterに自動でtweetされる」機能、Tweet Thisボタンはサブ機能なんですよね。</p>
<p>メイン機能は既にTwitter Toolsにあるので、同じ機能を持ったプラグインをいくつも入れるのはイヤ<br />
（わがままｗｗ）</p>
<p>ということで、両プラグインは今回は使用見送りとなりました（爆）</p>
<h2>JSを試してみる</h2>
<p>プラグインを検索している時にJSを使ったTweet Thisボタンを見つけたので試してみました。</p>
<ul>
<li><a href="http://ringoon.jp/2009/10/16/bitly-api-javascript-twitter.html">bitly API (javascript) を使ってTwitterボタンを設置する方法まとめ</a></li>
</ul>
<p>お！なかなかいい感じ♪<br />
<a href="http://bit.ly/">bitly</a>はユーザー登録してあるから丁度いいかも～♪</p>
<p>期待を胸に試してみたのですが記事にあるようにJSの後ろの方を</p>
<pre class="brush: jscript; title: ; notranslate">window.open(url, &quot;_blank&quot;);</pre>
<p>とするとポップアップブロックされてしまってちょっと不便。残念(´･ω･`)<br />
チョチョイとソースを直してしまうような知識ナシ！</p>
<h2>最後はやっぱり原点に戻る！</h2>
<p>これまたプラグインを検索していて見つけたサイトを参考にPHPに挑戦。</p>
<ul>
<li><a href="http://coliss.com/articles/blog/wordpress/wordpress-15-snippets-for-developers.html">WordPressをちょちょいと使いやすくする15のスニペット｜コリス</a></li>
</ul>
<p>そのものズバリがココにありました！</p>
<pre class="brush: php; title: ; notranslate">&lt;a href=&quot;http://twitter.com/home?status=I just read &lt;?php the_permalink(); ?&gt;&quot; title=&quot;Send this page to Twitter!&quot; target=&quot;_blank&quot;&gt;Tweet This!&lt;/a&gt;</pre>
<p>こんなに簡単なことだったとは（；^ω^）<br />
ここまでの道のりは長かった・・・（遠回りしすぎｗｗ）</p>
<p>でも少しわがままを言うと、<code>the_permalink()</code>のままだとURLが長い・・・</p>
<h3>そこで一工夫</h3>
<p>大してPHPの知識があるわけじゃない無いけどがんばってみました！これも勉強。</p>
<ul>
<li><a href="http://dogmap.jp/2008/11/06/post-to-twitter/">PHP で Twitter に投稿｜dogmap.jp</a></li>
</ul>
<p>Simple Tweetの作者<a href="http://dogmap.jp/">をかもと</a>さんとこで紹介されている「ショートURLを取得する方法」を使います。</p>
<pre class="brush: php; title: ; notranslate">$api_url  = &quot;http://tinyurl.com/api-create.php?url=&quot;;
$url = &quot;http://example.com/&quot;;   // 変換したい URL
$result = @file_get_contents( $api_url.$url );</pre>
<p><del datetime="2010-05-05T10:49:37+00:00">参考サイトでは<a href="http://tinyurl.com/">TinyURL.com</a>を使っていますが、Twitter Toolsで使っている<a href="http://bit.ly/">bitly</a>に変更。</del><br />
（なんとなく統一したい気分だったのでｗ）</p>
<p><span style="color:#FF0000;">単純に<code>http://bit.ly/api?url=</code>に変更するだけでは動かなくなったので、下記の記事を参考にfunctions.phpの記述を変更しました。（2010年5月5日）</span></p>
<ul>
<li><a href="http://blog.kechol.net/articles/articles/using-bitly-api-to-shorten-url.html">PHPでbit.lyのAPIを使って自分のサイトで短縮URLを使えるようにしてみる</a></li>
</ul>
<p>「yourAccountName」と「yourApiKey」部分は<a href="http://bit.ly/">bitly</a>に登録しているアカウント名と配布されているAPIキーに変更してください。</p>
<p>functions.phpに下記を追加。</p>
<pre class="brush: php; title: ; notranslate">function tweet_this_short_url() {
$long_url = get_permalink();
$req = &quot;http://api.bit.ly/shorten?login=yourAccountName&amp;apiKey=yourApiKey&amp;version=2.0.1&amp;longUrl=&quot;.$long_url;
	$contents = file_get_contents($req);
	if(isset($contents)) {
		$url = json_decode($contents, true);
	}
echo $url['results'][$long_url]['shortUrl'];
}</pre>
<p>変更前</p>
<pre><del datetime="2010-05-05T10:49:37+00:00">function tweet_this_short_url() {
	$api_url  = "http://bit.ly/api?url=";
	$url = get_permalink();
	$result = @file_get_contents( $api_url.$url );
	echo $result;
}</del></pre>
<p>single.phpに下記を追加。<br />
設置場所はループ内のお好きなところへどうぞ。</p>
<pre class="brush: php; title: ; notranslate">&lt;a href=&quot;http://twitter.com/home/?status=&lt;?php the_title(); ?&gt;｜&lt;?php bloginfo('name'); ?&gt; &lt;?php tweet_this_short_url(); ?&gt;&quot; title=&quot;Twitterでつぶやく&quot;&gt;Twitterでつぶやく&lt;/a&gt;</pre>
<p>これで思い通りの<strong>Tweet Thisが完成！</strong><br />
このサイトではテキスト部分をアイコンにしています。お好みで変更してください(´∀｀)</p>
<p>WordPressを使ってると何でもプラグインに頼ってしまうけど、今回のようにプラグインにしなくても簡単に出来ちゃうことって多いんだろうなぁ。<br />
あぁ、PHPをもっと自由自在に使えるようになりたい！</p>
]]></content:encoded>
			<wfw:commentRss>http://hanatomikan.com/blog/wordpress/tweet-this%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e3%81%a4%e3%81%91%e3%81%a6%e3%81%bf%e3%81%9f/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://hanatomikan.com/blog/wordpress/tweet-this%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e3%81%a4%e3%81%91%e3%81%a6%e3%81%bf%e3%81%9f" />
	</item>
	</channel>
</rss>

