Twitterのつぶやきボタンをテキストリンク化するバージョン2

Twitterのつぶやきボタンをテキストリンク化するバージョン2
このエントリーをはてなブックマークに追加
PR

Twitterのつぶやきボタンのリンクが少し変わっていたので
改めて、現在のバージョンでのテキストリンク化とjavascriptによってポップウィンドウにする方法です

 

現在のTwitterのツイートボタンのリンク

通常通り設置されているツイートボタンのリンクを取得します


 

 

ボタンからURLをコピーします
コピーしたURLは以下です(このページURLではありません)

https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fabout.twitter.com%2Fresources%2Fbuttons&text=Twitter%20Buttons%20%7C%20About&tw_p=tweetbutton&url=https%3A%2F%2Fabout.twitter.com%2Fresources%2Fbuttons&via=9bb_

 

URLエンコードされている箇所があるので、見やすいように変換したもの

https://twitter.com/intent/tweet?original_referer=https://about.twitter.com/resources/buttons&text=Twitter Buttons | About&tw_p=tweetbutton&url=https://about.twitter.com/resources/buttons&via=9bb_

 

URLの分析

https://twitter.com/intent/tweet?以下にパラメータを付けることで、ツイートリンクの内容を決めている
パラメータは&で連結する

各パラメータ

  • original_referer= 記事元のURLを指定することでリファラー元とする(twitter Card Analyticsのためと思われる)
  • text= ツイートテキスト(ページのタイトル等)
  • tw_p= ツイート形式
  • url= ツイートするURL
  • via=ツイートするアカウント+ツイート画面にフォローを推奨する表示

これをそれぞれに合わせたものにして、テキストリンクにすれば機能します

 

 

javascriptを使ってページのタイトルとURLを自動で取得する

URLの仕組みがわかったのであとは、そのURLに合わせた形式を自動でjavascriptで行うようにして、ポップアップウィンドウで表示する様にします

<a href="#" onclick="d=document,e=encodeURIComponent,t=(d.selection)?d.selection.createRange().text:(window.getSelection)?window.getSelection():(d.getSelection)?d.getSelection():'',f='http://twitter.com/intent/tweet?text='+e(t+d.title)+'&original_referer'+e(location.href)+'&url='+e(location.href)+'&via=9bb_';if(!window.open(f,'','width=500,height=250'))location.href=f;void(0);return false">この記事をTwitterでつぶやく</a>

基本的に変更する箇所はviaのところを自分のアカウント名に変更してください
@は要りません

 

実際のリンク

この記事をTwitterでつぶやく

あとはClass等をつけて好きなデザインにしたり
画像にしたり出来ます

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)