IMUZA.com

Xserver << WordPress(ConoHa) << はてなブログ

Twitterシェアリンクはintent/tweetを使おう

unsplash-logoFrankie

Twitterシェアリンクはintent/tweetを使おう

2023.02.28 Facebook, Twitter, Wordpress

テーマをゼロから作ってみる（14）です。「SEO 対策に必要なこと」の「7-3 SNS連携機能」です。いわゆる SNS のシェアボタンを設置します。

タイトルにもしていますが、これまではツイッターのシェアボタンのリンク先に share を使っていたのですが、intent/tweet にしたほうがいいです。いや、しないといけません。

01Twitter ツイッター

Twitter, Facebook, はてなブックマーク, LINE の4つのシェアリンクをつくります。WordPresss 用の PHP コードではありますが、そのページの URL と タイトルが取得できれば何にでも使えます。

まずはツイッター、公式のドキュメントは次のリンク先です。

で、冒頭に書いたリンク先の share と intent/tweet の違いですが、share ではスマホのアプリが立ち上がりません。intent/tweet を使いましょう。

導入方法です。ツイッターのアイコンやボタンを自前で用意するのであれば、

<a href="https://twitter.com/intent/tweet?url={URL}&text={TEXT}">Tweet</a>

これでいけます。ツイッター公式のロゴは次のリンク先にあります。eps, png, psd, svg ファイルが揃っています。

公式のボタンを Javascript で読み込むのであれば、下のようにすれば自動でボタンが読み込まれます。ボタンのサイズなどいろいろオプションがあるようですが、私は svg のロゴを使っていますので詳しくは調べていません。

<a class="twitter-share-button" href="https://twitter.com/intent/tweet?url={URL}&text={TEXT}">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ということでツイッターのツイートボタンのコードは末尾にあります。

02Facebook フェイスブック

Facebook も Twitter と同じで、自前のボタンを使うのであれば Javascript を読み込む必要はありません。公式のドキュメントは次のリンク先です。

<a href="https://www.facebook.com/sharer/sharer.php?u={URL}">Facebook</a>

公式のロゴは下のリンク先にありますが、png と eps だけで svg は含まれていません。

私は Facebook サイト内のロゴから svg ファイルを抜き出しています。

03はてなブックマークボタン

はてなブックマークボタンも同様です。公式のドキュメントは次のリンク先です。

ブックマークのリンク先は次のどちらでもいけるようです。

<a href="https://b.hatena.ne.jp/entry/{URL}">はてなブックマーク</a>
<a href="https://b.hatena.ne.jp/add?mode=confirm?url={URL}">はてなブックマーク</a>

ロゴは下記リンクにありますが、こちらも svg はありませんのでそのページのロゴから抜き出します。

04LINE で送る

公式のドキュメントは次のリンク先にあります。

<a href="https://social-plugins.line.me/lineit/share?url={URL}">LINEで送る</a>

ロゴは下記リンク先にありますが、ai, psd, png だけです。

png でも軽いですし、svg に変換するかです。

05socials.php

現在作っている「ゼロから作る WordPress テーマ」では次のコードを socials.php として投稿ページ single.php に読み込む形で使っています。

デモページがあります。

  • ゼロから作るWordPressテーマ（現在停止中）
<?php
$url = esc_url(get_the_permalink());
$title = esc_html(get_the_title());

echo <<<END
<div class="socials">

<!-- Twitter -->
<a class="social-item tw" href="https://twitter.com/intent/tweet?url={$url}&text={$title}" target="_blank" rel="nofollow noopener" onclick="window.open(this.href, 'Twitterwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title="このエントリーをTwitterでシェアする">
	<svg viewBox="0 0 248 204">
		<path class="cls-1" d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04 C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66 c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64 c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76 c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26 c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"/>
	</svg>
	<div class="txt">Twitter</div>
</a>
	
<!-- Facebook -->
<a class="social-item fb" href="https://www.facebook.com/sharer/sharer.php?u={$url}" target="_blank" rel="nofollow noopener" onclick="window.open(this.href, 'FBwindow', 'width=650, height=500, menubar=no, toolbar=no, scrollbars=yes'); return false;" title="このエントリーをFacebookでシェアする">
	<svg viewBox="0 0 36 36">
		<path fill="#ffffff" d="M15 35.8C6.5 34.3 0 26.9 0 18 0 8.1 8.1 0 18 0s18 8.1 18 18c0 8.9-6.5 16.3-15 17.8l-1-.8h-4l-1 .8z"></path>
		<path fill="#1877f2" d="M25 23l.8-5H21v-3.5c0-1.4.5-2.5 2.7-2.5H26V7.4c-1.3-.2-2.7-.4-4-.4-4.1 0-7 2.5-7 7v4h-4.5v5H15v12.7c1 .2 2 .3 3 .3s2-.1 3-.3V23h4z"></path></svg>
	<div class="txt">Facebook</div>
</a>

<!-- はてなブックマーク -->
<a class="social-item hatebu" href="https://b.hatena.ne.jp/add?mode=confirm&url={$url}" target="_blank" rel="nofollow noopener" onclick="window.open(this.href, 'Hatebuwindow', 'width=650, height=600, menubar=no, toolbar=no, scrollbars=yes'); return false;" title="このエントリーをはてなブックマークに追加">
	<svg viewBox="0 0 500 500">
		<g class="cls-1">
			<path d="M278.2,258.1q-13.6-15.2-37.8-17c14.4-3.9,24.8-9.6,31.4-17.3s9.8-17.8,9.8-30.7A55,55,0,0,0,275,166a48.8,48.8,0,0,0-19.2-18.6c-7.3-4-16-6.9-26.2-8.6s-28.1-2.4-53.7-2.4H113.6V363.6h64.2q38.7,0,55.8-2.6c11.4-1.8,20.9-4.8,28.6-8.9a52.5,52.5,0,0,0,21.9-21.4c5.1-9.2,7.7-19.9,7.7-32.1C291.8,281.7,287.3,268.2,278.2,258.1Zm-107-71.4h13.3q23.1,0,31,5.2c5.3,3.5,7.9,9.5,7.9,18s-2.9,14-8.5,17.4-16.1,5-31.4,5H171.2V186.7Zm52.8,130.3c-6.1,3.7-16.5,5.5-31.1,5.5H171.2V273h22.6c15,0,25.4,1.9,30.9,5.7s8.4,10.4,8.4,20S230.1,313.4,223.9,317.1Z"/>
			<path d="M357.6,306.1a28.8,28.8,0,1,0,28.8,28.8A28.8,28.8,0,0,0,357.6,306.1Z"/>
			<rect x="332.6" y="136.4" width="50" height="151.52"/>
		</g>
	</svg>
	<div class="txt">ブックマーク</div>
</a>

<!-- LINE -->
<a class="social-item line" href="https://social-plugins.line.me/lineit/share?url={$url}" target="_blank" rel="nofollow noopener" onclick="window.open(this.href, 'LINEwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title="このエントリーをLINEに送る">
	<svg viewBox="0 0 300 300">
		<path class="fill_2" d="M259.877,136.778c0-48.99-49.115-88.846-109.482-88.846 c-60.365,0-109.482,39.856-109.482,88.846c0,43.917,38.949,80.702,91.563,87.659c3.563,0.769,8.416,2.354,9.644,5.4 c1.104,2.766,0.724,7.1,0.354,9.896c0,0-1.279,7.727-1.562,9.375c-0.476,2.767-2.201,10.823,9.483,5.901 c11.686-4.922,63.047-37.127,86.016-63.568h-0.005C252.273,174.045,259.877,156.385,259.877,136.778z M107.537,165.925H85.785 c-3.164,0-5.74-2.575-5.74-5.744v-43.505c0-3.166,2.576-5.741,5.74-5.741c3.166,0,5.739,2.576,5.739,5.741v37.764h16.013 c3.169,0,5.741,2.576,5.741,5.742C113.277,163.35,110.706,165.925,107.537,165.925z M130.037,160.182 c0,3.168-2.575,5.744-5.737,5.744c-3.164,0-5.739-2.575-5.739-5.744v-43.505c0-3.166,2.575-5.741,5.739-5.741 c3.162,0,5.737,2.576,5.737,5.741V160.182z M182.402,160.182c0,2.479-1.573,4.667-3.924,5.446 c-0.591,0.198-1.207,0.298-1.824,0.298c-1.791,0-3.505-0.858-4.587-2.298l-22.293-30.359v26.914 c0,3.168-2.573,5.744-5.741,5.744c-3.166,0-5.742-2.575-5.742-5.744v-43.505c0-2.474,1.579-4.662,3.924-5.445 c0.591-0.199,1.206-0.296,1.823-0.296c1.791,0,3.509,0.856,4.584,2.295l22.3,30.362v-26.917c0-3.166,2.578-5.741,5.74-5.741 c3.167,0,5.739,2.576,5.739,5.741V160.182z M217.602,132.688c3.169,0,5.742,2.576,5.742,5.743c0,3.163-2.573,5.739-5.742,5.739 h-16.008v10.27h16.008c3.164,0,5.742,2.576,5.742,5.742c0,3.168-2.578,5.744-5.742,5.744h-21.754c-3.16,0-5.74-2.575-5.74-5.744 v-21.738c0-0.007,0-0.007,0-0.013v-21.755c0-3.166,2.575-5.741,5.74-5.741h21.754c3.169,0,5.742,2.576,5.742,5.741 c0,3.166-2.573,5.741-5.742,5.741h-16.008v10.271H217.602z"/>
	</svg>
	<div class="txt">LINEで送る</div>
</a>
</div>
END;
和歌山県産 みかん デコポン しらぬい 不知火 でこぽん 2Ｓサイズ～3Ｌサイズ 赤秀 ※野菜ソムリエ推奨 のし...

和歌山県産 みかん デコポン しらぬい 不知火 でこぽん 2Ｓサイズ～3Ｌサイズ 赤秀 ※野菜ソムリエ推奨 のし…

3,480円(04/18 14:48時点)
Amazon
Twitter
Facebook
ブックマーク
LINEで送る