jQueryでツイッターのリンクを作成する方法【記事のURLを自動取得】

ヨッチ

こんにちは。代表のヨッチです。
ミライヨッチにお越しいただき、ありがとうございます。

ブログ記事を書いていて、ツイッターのリンクを作成したいと思ったことはありませんか？
記事に埋め込むこともできるので、ボタンとは違った使い方ができますよね。

jQueryを使えば、記事のURLを自動的に取得できます。
あとは取得したURLでリンクを作成すれば、簡単にツイートしてもらえます。

この記事では、jQueryを使ってツイッターのリンクを作成する方法をお伝えしますね。
すでに用意されたテンプレがあるので、サクッと実装してしまいましょう！

jQueryでツイッターのリンクを作成する方法

jQueryがすでに導入されているサイトなら、ソースコードを追記すれば準備完了です。

<script>タグを追記してから、<a>タグで記事内にリンクを挿入します。

【1】jQueryのソースコードを入力する

まずは、以下のサンプルコードを</body>直前に記入しましょう。

<script>
// ツイートURL取得
$(function(){
	var url_tw = location.href;
	var title_tw = $('title').html();

	var text_tw = encodeURIComponent(title_tw);
	var tweet_url = 'https://twitter.com/share?url=' + url_tw + '&text=' + text_tw;
	$('a.share_tw').attr("href", tweet_url);

});
</script>

WordPressで使用する場合のサンプルコード

先ほどのサンプルコードは、通常のjQuery用として紹介しています。

WordPressで使用する場合は、このままでは動作しません。
なぜなら、WordPress独自の書き方に変更する必要があるからです。

先ほどの3行目の書き方を以下のように変更しましょう。

jQuery(function($){

このコードに置き換えることで、ワードプレスでも問題なく動くようになります。

【2】記事内にHTMLでリンクを挿入する

jQueryの準備ができたら、記事内にHTMLでリンクを挿入します。
以下のサンプルコードを入力すればOKです。

⇒ <a class="share_tw" href="" target="_blank" rel="nofollow noopener">ツイートしてね</a>

実際には、このようにリンクが表示されます。
⇒ ツイートしてね

Classの割り当てについて

このように記事のURLが自動取得されるのは、「share_tw」というClassがある<a>タグです。
Classで判別して、「href」を記事URLで上書きしています。

なので、もし「share_tw」というClassをすでに使っていたら、別のClassを割り当てましょう！
別のClassを割り当てるときは、<script>タグ・<a>タグどちらにも変更を加えます。

<script>タグは、9行目の「share_tw」を変更します。

$('a.share_tw').attr("href", tweet_url);

<a>タグは、割り当てられているClass「share_tw」を変更します。

⇒ <a class="share_tw" href="" target="_blank" rel="nofollow noopener">ツイートしてね</a>

【まとめ】どの記事でもURLを取得してツイートのリンクを作れる！

jQueryを使えば、記事ごとにソースに変更を加えずに済みます。
どんな記事でもURLを自動取得できるので、より効率的に管理できますよ。

<script>タグで下準備さえしておけば、どの記事でも有効な方法です。
あとは<a>タグでリンクを挿入するだけなので、難しいことは一切ありません。

もしClassが重複してしまうのが気になる場合は、少しだけ複雑なClassに変更しておきましょう。

サンプルコードをコピペするだけで使えるので、試しに使ってみてはどうでしょうか？