投稿者 tel | 2014年1月30日

Tweetボタンに渡すURLを変える

Twitter Buttons
https://about.twitter.com/resources/buttons

上記のページからツイートボタンを作成できるけど、このボタンだとページをロードした時に渡すURLとかテキストが決まってしまう。
また、iframeに実際のリンクとかが展開されているので外からhrefを変えることもできない。

なのでページ内で動的にいろいろ変えたい場合は下記のドキュメントのにあるようにリンクに直接ツイートするURLを設定すれば良さそう。

Tweet Button
https://dev.twitter.com/docs/tweet-button

<a href="https://twitter.com/share">Tweet</a>

shareのあとに続けて?url=でURLとかを指定できる。JavaScriptでURLを指定するときはちゃんとencodeURIComponentで変換する。

// urlを設定
a.href = 'https://twitter.com/share?url=' +  encodeURIComponent(url);

あとは見た目をツイートボタンっぽくするためにCSSで装飾する。(上記のドキュメントにCSSも載っていたがボタンっぽい見た目にはならなかった)

.tweet {
 width: 80px;
 background-image: linear-gradient(#fff, #dedede);
}

.tweet-button {
 text-decoration: none;
 display: block;
 padding: 2px 5px 2px 28px;
 background: url("https://twitter.com/favicons/favicon.ico") 4px center no-repeat;
 border: 1px solid #ccc;
 border-radius: 3px;
 font-size: 11px;
 font-weight: bold;
 color: #555;
}
<p><a href="https://twitter.com/share" id="tweet-button" target="_blank">Tweet</a></p>

これでこんな見た目になる。

tweet_ss


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。