テキストリンクだけでツイートボダンを作る
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
短縮URL:
COMMENT