HOME   »   ブログ運営  »  「公式Twitterアプリでこの記事をつぶやく」ソーシャルボタンの作成&設置方法
RSSフィード
以前から、ブログ記事にはTwitterで共有できるためのソーシャルボタンを設置していました。

しかし、スマートフォンの場合、「このボタンから共有する人はいるのだろうか」という疑問を持っていました。

というのも、このボタンから記事をつぶやこうとした場合、Twitterにログインする必要があるのです。

ソーシャルボタンtwitterアイコン
▲Twitterボタンを押して記事を共有しようとした場合、このような画面になることは見た事がある人も多いと思います。

しかし、果たしてここからログインしてまで共有するでしょうか。面倒くさくなってツイートしなくなってしまう可能性大です。

僕は、iPhoneのSafariで記事を閲覧中に「この記事をTwitterで共有したい!」と思った時には、ブックマークレットを使用しています。

詳しくはこちらの記事→iPhoneのSafariで見ているページタイトルとURLをTweetbotでつぶやくブックマークレットを作ってみたをご覧ください。

この方法を利用しますと、Twitterにログインする必要はありません。

ログインする必要がないので、Twitterで共有するという障壁も小さくなります。

しかし、この方法は、ブックマークレットを登録していないと行うことが出来ません。

そこで、「ブックマークレットを登録していない人でも同じように共有できないか」、ということを考えていると。。。

いいことを思いつきました。

それは、上記記事と同じようなボタンを配置すればいいという事です。

どんな風になるかというと、
  1. ツイートボタンをタップすると、
  2. タイトルとURLがセットされている状態で
  3. スマートフォンの公式Twitterアプリが起動
するということです。つまり、画像で説明すると、

ソーシャルボタンtwitterアイコン
▲スマートフォン記事中のツイートボタンをタップすると(左)、タイトルとURLがセットされている状態で公式アプリが起動するということです(右)。

ということです。これならツイートするまでの障壁が格段に小さくなります。

なお、iPhone・Androidの公式アプリで動作することを確認しました。

この機能を持ったボタンの配置の仕方を残しておこうと思います。

スポンサーリンク

公式Twitterアプリでこの記事をつぶやくボタンを作成する方法

まずは、画像無しのリンクの作成です。画像無しのリンクが作成できれば90%完成です。

ここでは、2種類のリンクを紹介します。
  • FC2ブログの場合
  • 他のブログの場合

FC2ブログの場合

FC2ブログ(このブログ)の場合、以下のリンクで作動するはずです。

<a href="twitter://post?message=<%topentry_title> <%topentry_link>">Twitter起動</a>

ここで、<%topentry_title>,<%topentry_link>はFC2ブログ変数であり、それぞれ、エントリタイトル、エントリURLに対応しています。

このリンクが以下になります。
Twitter起動

ここまでくれば、90%完成です。あとは、リンクを文字列ではなく画像にするだけです。

画像はMacのPixelmatorというアプリで作成しました。作成の仕方は以下の記事で書きました。




作成した画像は以下になります。


この画像をリンクにします。ソースは以下のようになりました。

<a href="twitter://post?message=<%topentry_title> <%topentry_link>"><img src="http://blog-imgs-65.fc2.com/n/a/s/nasimeya/twittersharebutton.png" /></a>

img srcの後は、各個人で変更してください。

つまり、
<a href="twitter://post?message=<%topentry_title> <%topentry_link>"><img src="(アップロードした画像URL)" /></a>

となります。

実際の画像リンクは以下になります。


このリンクを、スマートフォンテンプレートの<!--topentry--> ~ <!--/topentry-->内で設置したい場所にはりつければOKです。

他のブログの場合

他のブログの場合、先ほど示した変数は用意されていません。(各ブログサービスで変数は用意されているかもしれませんが、ここでは触れません。)代替手段として、Javascriptを使用する手段があります。

ソースは以下になります。

<a href="javascript:location.href='twitter://post?message='+encodeURIComponent(document.title+'%20'+document.URL);void(0);"><img src="http://blog-imgs-65.fc2.com/n/a/s/nasimeya/twittersharebutton.png" /></a>

実際の画像リンクは以下になります。


このリンクを、設置したい場所にはりつければOKです。

まとめ

FC2ブログでもJavascriptを使用する方法が利用できるのですが、FC2ブログならば、変数を利用した方がいいと思いました。

というのは、Javascriptを使用せずに変数でリンクを生成した場合、画像を長押しするとリンク先が確認できるからです。

具体的には以下の画像を比較してもらえるとわかります。

ブログ用ソーシャルボタン
▲左がFC2ブログ変数を利用した場合で、右がJavascriptを利用した場合です。

左側だとリンク先が表示されているので、ツイート画面に移ることが予想できますが、右側はJavaScriptと表示されているだけなので、よくわかりません。

いずれにせよ、ログインせずツイートできるボタンが作成できます。

ブログを運営している人は是非検討してみてください。

また、この方法を利用すれば、他のソーシャルボタンに関しても同様に設置できるはずです。

関連記事













スポンサーリンク

過去記事セレクション

当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました



▼このカテゴリの最新記事
Relate Entry
Entry TAG
Twitter   ソーシャルボタン  
Comment
Trackback
Comment form
スポンサードリンク
楽天
2014年7月現在使用しているブログ用iPhoneアプリ16個
iPhoneホーム画面
人気エントリー
先月の人気記事
第1位(→0)
iPhoneにある写真(画像)をセブンイレブンで現像する方法

第2位(→4)
総計290個以上掲載!iPhoneアプリのURLスキーム一覧

第3位(↗︎2)
【iPhone】秘密の質問を忘れたのでAppleのサポートに電話してリセットしてもらった

第4位(↘︎2)
理系大学生なら絶対覚えておくべきWordの数式のショートカット

第5位(↘︎1)
iPhoneのパスコードを10回間違えると再入力までに60分必要

第6位(↘︎1)
SoftbankのiPhone4s→iPhone5sへ機種変更した時の料金試算

第7位(↗︎3)
iPhoneの画面を録画できるMac・Windowsアプリ「Reflector」のインストール方法・使い方

第8位(↘︎4)
iPhone/iPadのパスコードロックを10回間違えた時のデータ消去機能を実行してみた

第9位(↗︎4)
xRecというiPhone画面を録画できるアプリが再び登場!

第10位(↘︎2)
【iPhone】秘密の質問を忘れて間違えすぎるとApple IDが8時間ロックされる

第11位(→0)
iPhoneの写真を1枚5円で現像出来るネットプリントジャパン!

第12位(→0)
パラメータ有りiPhoneアプリのURLスキーム一覧

第13位(↗︎30)
青春18切符で東京から大阪へ~東海道線を突っ走る旅(1日目)

第14位(↗︎55)
青春18切符を利用した旅行時に活躍したiPhoneアプリのまとめ

第15位(↗︎16)
セリアでiPhoneの防水ケースを購入!風呂場で使うときに便利!

全記事表示リンク
サイト内検索
プロフィール

nasimeya

Author:nasimeya
Twitterアカウント→@nasimeya
iPhone5S/iPad3/iPad mini/MacBookAir13inch/Nexus5を現在所持しており、アプリとか紹介を主にしています。LAMYなど文房具もちょくちょく。ブログは楽しく書くことを心掛けております。

日にの観察ブログの更新は停止しています。

新しいブログはこちら⇒なしめやブログ(http://nasimeyablog.com

2013年5月現在利用している主力iPhoneアプリ26個
iPhoneホーム画面
2013年5月現在利用しているブログ用iPhoneアプリ13個
iPhoneホーム画面
iPad mini用おすすめアプリ8選

PAGE TOP