ぬんびりぶろぐ

アイロンビーズ/スマートフォン/Webサービス/開発などについて書いてるブログです。ゆっくりしていってね。

【Twitter】フォロー&ハッシュタグをつけてつぶやく を簡単に仕込む!(サンプルコード付き)

 

 
 

f:id:nunchaku:20120904180250p:plain

ブログやアプリのキャンペーンでTwitterを利用したものをよく見かけます。

たとえばお客さまに、

Twitterで特定のアカウントをフォローしたうえで
ハッシュタグをつけてツイートしてもらう

とか!こういうことをするときは、

Twitter公式のボタンを使うとかんたんに作成することができます。

 

↓↓↓できあがりはこんな感じ↓↓↓

【STEP1】フォローボタンをクリックしてフォロー

【STEP2】ツイートボタンをクリックして、ツイート

↑↑↑ここまで↑↑↑

 

サンプルコード

<p>【STEP1】フォローボタンをクリックしてフォロー</p>
<p>
<!--「フォローする」ボタンのコード 開始-->
<a href="https://twitter.com/nun_" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large">@nun_さんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!--「フォローする」ボタンのコード 終了-->
</p>

<p>【STEP2】ツイートボタンをクリックして、ツイート</p>
<p>
<!--「ハッシュタグ」ボタンのコード 開始--> 
<a href="https://twitter.com/intent/tweet?button_hashtag=%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E6%B5%81%E8%A1%8C%E3%82%8A%E3%81%9D%E3%81%86%E3%81%AA%E8%A8%80%E8%91%89&text=%E3%81%AC%E3%82%93%E3%81%B3%E3%82%8A" class="twitter-hashtag-button" data-lang="ja" data-size="large" data-related="nun_" data-url="http://bit.ly/smartphoneg">Tweet #%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E6%B5%81%E8%A1%8C%E3%82%8A%E3%81%9D%E3%81%86%E3%81%AA%E8%A8%80%E8%91%89</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!--「ハッシュタグ」ボタンのコード 終了--> </p>

 

  • コメントアウトや改行は適宜詰めちゃってください。
    コードを貼り付ける場所をわかりやすくするために入れてるだけです。
  • ハッシュタグのほうのテキストはエンコードされています。

 

「フォローする」ボタンのコード生成ページ

素材 / Twitterボタン 「フォローする」

https://twitter.com/about/resources/buttons#follow

 

サンプルコードで設定している項目はこちら

f:id:nunchaku:20120904174724p:plain

 

「ハッシュタグ」ボタンのコード生成ページ

素材 / Twitterボタン 「ハッシュタグ」

https://twitter.com/about/resources/buttons#hashtag

 

サンプルコードで設定している項目はこちら

f:id:nunchaku:20120904174744p:plain

 

まとめ

Twitterのキャンペーンは私も応募したことがあります。
ツイートするだけで応募できる手軽さが魅力(。・∨・。)b
キャンペーンをするときには、ついツイートしたくなるようなキーワードを入れるとか、みんながほしいものを賞品にするとか、いろいろ工夫して楽しく活用したいです^^