テキストリンクだけでツイートボダンを作る

テキストリンクだけでツイートボダンを作る
このエントリーをはてなブックマークに追加
PR

Twitterのつぶやきボタンをテキストリンクだけで作ってしまう方法です
通常は公式が提供しているツイートボタンを設置するのですが、デザインが気に入らない場合とかは
独自にテキストリンクにして、CSSでデザインする事が出来ます

 

ツイートボタンをテキストで作る

通常のボタンコード

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

通常のリンクにもaタグのテキストリンクが存在するのが分かります
script部分をそぎ取れば一応機能するのですが、これでは不十分で少し手を加えてやる必要があります

テキストリンク化したツイートボダン

<a href="http://twitter.com/share?url=ページのURL&text=ページのタイトル&via=含めたいTwitterアカウント名" target="_blank">
この記事をツイートする!
</a>

ページのURL、ページのタイトル、含めたいTwitterアカウント(@は不要)
それぞれを加えてやれば、テキストリンクだけで動作します

 

WordPressなら自動化も出来る

このままだと、手作業でリンク等を設定しないといけないので大変です
少ないページなら手作業でもいいですが、WordPressなら自動化出来ます

<a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title("");?>&via=含めたいTwitterアカウント名" target="_blank">
この記事をツイートする!
</a>

ページURLを<?php the_permalink(); ?>
ページタイトルを<?php the_title(“”);?>
としてやれば、WordPressの場合ページに合わせて自動化できます

ただパーマリンクに日本語が使われている場合は、うまく動作しません
そんなときはページURLをショートリンクに変更してやればうまくいきます

ページURLを<?php wp_get_shortlink(); ?>

こうすることでURLに日本語が含まれませんので、動作します。

PR

COMMENT

コメントを残す

PR

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

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

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

Twitter Facebook Google+ Feedly RSS

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