忍者ブログ

ツイートボタン(1) デベロッパーズサイト

Date:2010/10/31 15:50

ツイッターボタンの追加方法です。

以前、ツイッターボタンの追加の方法を紹介したのを覚えているでしょうか?
あの方法でも、全然問題ないのですが、
記事のURLが長いので、短縮URLとか作れるように改造できないかなーなんて
調べていたら、Twitterの公式サイトに埋込み式のサービスが既にあることを発見!!
わざわざ、自分で作らなくっても、こういうのがあるのはありがたいですね~

http://twitter.com/about/resources/tweetbutton

ここで必要情報を入力すると、コードを自動生成してくれます。
これをテンプレート内の任意の場所に貼るだけ。。。
短縮URLも、タイトルの埋込みも、Twitterアカウントの埋込みも
ぜーーんぶ、やってくれます!



さて、、、
忍者ブログに特化した小技を紹介。
自動生成されたコードに、忍者ブログのタグを埋め込んでみよぅ!

デフォルトのままで、テンプレートに保存するとちょっとかゆいところに手が届かない。
トップページなど複数の記事がまとまっているページでツイートボタンを押されると、
まとまっているページのURLがそのままツイートされてしまう。
どのページでツイートボタンをクリックしても、
その記事そのもののURLがツイートされるのが望ましいですよね?
(ちょっとわかりにくい???^^;)

↓↓↓こちらが、忍者ブログのテンプレートに貼り付けるコードの例。
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="http://<!--g_user_id--><!--$entry_link-->" ←リンク先
data-text="<!--$entry_title-->" ← タイトル表示
data-count="none" ← ツイートボタンを押した数を表示
data-related="[ツイッターのアカウント]" ← おすすめユーザ
data-lang="ja"> ← 言語
Tweet</a>

これを上から順に追っていきます。
リンク先の部分。ここがツイートボタンを押したときにリンク先として表示されるURLになる。
Z.e.R.Oの場合、http://<!--g_user_id--><!--$entry_link--> としておく

タイトル表示の部分には、ツイートしたときにいっしょに表示してくれるテキストになる
ここでは、記事のタイトルをテキストにしたいので、<!--$entry_title-->としておく

おすすめユーザってところに、ツイッターのアカウントを入れておくと
ツイートボタンを押したあとに、おすすめユーザですからフォローしてみませんか?
みたいなダイアログが表示されることになる。

参考に自動生成されたコードをちょっといぢってみてください~。



こちらのサイトも参考になります。
FC2ブログの各記事に「ツイートボタン」を設置する方法

忍者ブログの場合は、
<%topentry_title>のかわりに → <!--$entry_title-->
<%topentry_link>のかわりに → http://<!--g_user_id--><!--$entry_link-->
を入力します~。


サイト内関連記事:
ツイートボタン(1) デベロッパーズサイト
ツイートボタン(2) パラメーター
PR

コメント(3) Category:Blogテンプレート | Date:2010/10/31 15:50

コメント

1. D15 [追記]
忍者ブログに特化した記事、後半追記しました!
posted by D15 at 2010/11/01 22:52 [ コメントを修正する ]
2. 忍 [素晴らしい]
いや~、ありがとうございます。
参考になりました (^-^)/
posted by 忍 at 2011/10/09 18:48 [ コメントを修正する ]
3. D15 [ありがとうございます]
いえ~、こちらこそ参考になったようでうれしいです。
ちなみに、↓↓↓は忍者の独自タグのリファレンスページです。

参考までに~~^^
http://www.ninja.co.jp/blog/help/manual/markup_tag/2794/
posted by D15 at 2011/10/09 19:17 [ コメントを修正する ]

コメントを投稿する



Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<剪定 | HOME | おもいつき>>
忍者ブログ[PR]