<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>シェア | ウダ2Blog</title>
	<atom:link href="https://uda2.com/blog/tag/%e3%82%b7%e3%82%a7%e3%82%a2/feed/" rel="self" type="application/rss+xml" />
	<link>https://uda2.com/blog</link>
	<description>大阪でフリーランスとしてWEB制作している管理人が気になった技術をメモったり、作ったツールの紹介などを綴っているブログです。</description>
	<lastBuildDate>Sun, 03 Jun 2018 15:36:46 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>SNSシェアボタンズ</title>
		<link>https://uda2.com/blog/sns_share_button/</link>
					<comments>https://uda2.com/blog/sns_share_button/#comments</comments>
		
		<dc:creator><![CDATA[uda2]]></dc:creator>
		<pubDate>Sun, 03 Jun 2018 23:30:49 +0000</pubDate>
				<category><![CDATA[制作日記]]></category>
		<category><![CDATA[SNS]]></category>
		<category><![CDATA[シェア]]></category>
		<guid isPermaLink="false">https://uda2.com/blog/?p=2217</guid>

					<description><![CDATA[<p>今までSNSのボタンを付けるのが面倒なので各SNSの公式で用意されてるシェアとかのボタンを集めてきてjavascriptで自動的にタイトルとURLを設定するスクリプトを作ってました。最初はソーシャルネットワークではなくソ</p>
The post <a href="https://uda2.com/blog/sns_share_button/">SNSシェアボタンズ</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></description>
										<content:encoded><![CDATA[<p>今までSNSのボタンを付けるのが面倒なので各SNSの公式で用意されてるシェアとかのボタンを集めてきてjavascriptで自動的にタイトルとURLを設定するスクリプトを作ってました。最初はソーシャルネットワークではなくソーシャルブックマーク用に作ったのですが時流に合わせるウチにSNSボタンが多くなってきたり、ボタンがカウンター付きで重かったのでGoogleに遅いと思われないようにスクロールしないと読み込まないようにしたりと改廃してきましたが、見た目もリンクも古くなったので作り直しました。</p>
<p>今回新たに作った「SNSシェアボタンズ」は前回同様にサイトの情報から各SNSのシェアボタンを自動生成し、ボタンはカウンター無しでアイコンは埋め込みSVGで早くてきれいで設置しやすくなり、レスポンシブになっています。詳しくは下記をご覧ください。<br />
<a href="https://uda2.com/snssb/">SNSシェアボタンズ</a></p>
<p><span id="more-2217"></span><br />
改めてSNSシェアボタン作るに当たってそれぞれのSNSのリンクを見直したので調査結果を残しておきます。</p>
<p><strong>LINE</strong><br />
正直LINEは主にスマホで使われるSNSで、スマホはブラウザにシェア機能が付いてるのにサイト内にシェアボタン要るの？とも思いますが圧倒的シェアなので付けておきます。<br />
LINEが別サイトに転送されてるのを発見したので調べると昨年の1月にLINEのSNSシェアボタン周りがリニューアルされ、旧仕様から<a href="https://social-plugins.line.me/ja/how_to_install#lineitbutton" rel="noopener" target="_blank">新仕様</a>に転送されていたようです。<br />
旧仕様：<em>https://twitter.com/share?url=～&#038;text=～</em><br />
新仕様：<em>https://twitter.com/intent/tweet?url=～&#038;text=～</em><br />
旧仕様はテキストしか指定できなかったのでテキストの末尾にURLを入れるのが常套手段でした。<br />
新仕様はfacebookと似た仕様になっていてガイドライン的にはURLのみのようですが旧仕様のようにテキストも指定すると、ちゃんと反映されました。<br />
URLだけの仕様でも一応LINEがmetaデータからタイトル・サムネイル・概要を引っ張ってきて表示されるのでテキストは不用な気もしますがスマホだと文字数的に限界があるのでテキストを指定した方がいい場合もあります。</p>
<p><strong>twitter</strong><br />
元々twitterはtwitter.com/shareで始まる<a href="https://publish.twitter.com/" rel="noopener" target="_blank">シェア</a>が用意されていたのですが、数年前にtwitter.com/intent/tweetで始まる<a href="https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent.html" rel="noopener" target="_blank">ツイート</a>が追加されました。<br />
シェア：<em>https://twitter.com/share?url=～&#038;text=～</em><br />
ツイート：<em>https://twitter.com/intent/tweet?url=～&#038;text=～</em><br />
ツイートの方が機能は多いですが、シェアを使ってるサイトの方が圧倒的に多いです。今回はシェアの方を使う事にしました。</p>
<p><strong>facebook</strong><br />
調べても公式の仕様は見つけられなかったが公式の<a href="https://developers.facebook.com/docs/plugins" rel="noopener" target="_blank">デベロッパーサイト</a>などでシェアボタンのリンク先が下記だったのでコレを採用しました。<br />
<em>https://www.facebook.com/sharer/sharer.php?u=～</em><br />
ただ他のサイトは下記のURLが多いです。<br />
<em>http://www.facebook.com/share.php?u=～</em><br />
ただし<a href="http://www.notitle-weblog.com/entry/2016/05/18/070000" target="_blank">ぴえええええ！Facebookのシェアボタンのコードを修正して下さい（はてなブログ向け）！！ &#8211; NO TITLE</a>によると「share」でなく「sharer」にしないとスマホでエラーが出るらしいです。<br />
<em>http://www.facebook.com/sharer.php?u=～</em></p>
<p><strong>Google+</strong><br />
<a href="https://developers.google.com/+/web/share/" target="_blank">公式</a>に仕様が載ってます。<br />
<em>https://plus.google.com/share?url=～</em></p>
<p><strong>はてなブックマーク</strong><br />
公式にはオリジナル画像でのボタン設置は載ってませんでした。<br />
<a href="http://b.hatena.ne.jp/help/entry/bookmarklet" target="_blank">ブックマークレット</a>の先に旧式のブックマークレットを解析したURLが<br />
<em>http://b.hatena.ne.jp/add?url=～&#038;title=～</em><br />
<a href="http://b.hatena.ne.jp/guide/bbutton" target="_blank">はてなブックマークボタン</a>のURLを元にしたURL。本来は登録されてるブックマークを開く為のURLですしURLのhttp://やhttps://を削除する必要があったりと変則的です。<br />
<em>http://b.hatena.ne.jp/entry/～</em><br />
あと、公式な出典は見つけられませんでしたが下記のURLも使えるようです。<br />
<em>http://b.hatena.ne.jp/bookmarklet?url=～&#038;btitle=～</em></p>
<p><strong>Pocket</strong><br />
<a href="https://getpocket.com/publisher/button_docs" target="_blank">Pocketボタン</a>にはオリジナル画像のボタンの記述は無かったが<a href="https://help.getpocket.com/article/1007-saving-to-pocket-manually" target="_blank">Saving to Pocket Manually</a>を解析してURLを。<br />
<em>https://getpocket.com/edit.php?url=～&#038;title=～</em></p>The post <a href="https://uda2.com/blog/sns_share_button/">SNSシェアボタンズ</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></content:encoded>
					
					<wfw:commentRss>https://uda2.com/blog/sns_share_button/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
	</channel>
</rss>
