<?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>SNS | ウダ2Blog</title>
	<atom:link href="https://uda2.com/blog/tag/sns/feed/" rel="self" type="application/rss+xml" />
	<link>https://uda2.com/blog</link>
	<description>大阪でフリーランスとしてWEB制作している管理人が気になった技術をメモったり、作ったツールの紹介などを綴っているブログです。</description>
	<lastBuildDate>Tue, 30 Oct 2018 15:53:26 +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>
		<item>
		<title>Instagram APIでフレブルBUHI画像閲覧</title>
		<link>https://uda2.com/blog/buhi/</link>
					<comments>https://uda2.com/blog/buhi/#respond</comments>
		
		<dc:creator><![CDATA[uda2]]></dc:creator>
		<pubDate>Tue, 10 Mar 2015 06:33:56 +0000</pubDate>
				<category><![CDATA[制作日記]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[BUHI]]></category>
		<category><![CDATA[SNS]]></category>
		<category><![CDATA[犬]]></category>
		<category><![CDATA[ｊQuery]]></category>
		<guid isPermaLink="false">http://uda2.com/blog/?p=1857</guid>

					<description><![CDATA[<p>InstagramやPinterestなど画像系SNSのAPI使ってなんかできないかなとチュートリアル系サイトでを見てると Instagram APIから画像データを取得する方法 Instagram APIを使ってねこ大</p>
The post <a href="https://uda2.com/blog/buhi/">Instagram APIでフレブルBUHI画像閲覧</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></description>
										<content:encoded><![CDATA[<p>InstagramやPinterestなど画像系SNSのAPI使ってなんかできないかなとチュートリアル系サイトでを見てると<br />
<a href="http://iaseteam.eshizuoka.jp/e1237677.html" target="_blank">Instagram APIから画像データを取得する方法</a><br />
<a href="http://blog.ruedap.com/2011/02/28/instagram-api-of-exclusive-use-for-cat-lovers-nekostagram" target="_blank">Instagram APIを使ってねこ大好き専用の「Nekostagram」を作ってみた</a><br />
と猫を集めてるのがあり、<a href="http://lab.appa.pe/2014-12/sns-active-ranking.html" target="_blank">12のメジャーなSNSのアクティブ率を比較してみた &#8211; App Ape Lab</a>によると昨年末の国内Android端末ではInstagramがアクティブ率2位になっているので、とりあえずフレブル系の犬を集めるためハッシュ名を「<a href="http://iconosquare.com/tag/buhi/" target="_blank">#buhi</a>」と考えてたら既にありました。（海外でもブヒっていうんですね。）<br />
ハッシュがあるなら、Instagramから画像を引っ張ってきて表示するサイトを作るだけなんでやってみた。<br />
<span id="more-1857"></span><br />
<a href="https://instagram.com/developer/#" target="_blank">Instagram Developer Documentation</a>でデベロッパー登録して、PHPでoauthで認証してアクセストークンを拾って、そのアクセストークンで検索して表示という感じの流れで、APIでよくあるパターンのやつで、今回のタグ検索の仕組みまでは半日でできた。難しいとこは毎度のことだが英語なので翻訳しまくりになるのと古い写真と新しい写真の何順で送られて来て何を送れば次のデータが入手可能なのかを理解できず結局送られてくるデータをjsonをパースするPHPを作って検証しながら進める必要があった。（なお、データは新しいものから順に送られて来ます。）</p>
<p>ここから、ロゴやらデザインやらUIやら検証やらで丸一日ぐらいかかって、計1.5日ぐらいで出来た。</p>
<p>フレブルの写真をInstagramで検索して続々と表示するだけのWEBサイト「<a href="http://ipetcards.com/buhi/" target="_blank">BUHI</a>」です。</p>
<p>今回はお手本が既にある制作なので一日ぐらいで作りたがったがUI的な部分に時間がかかってしまった。<br />
機能的には下記のような感じです。<br />
・スマホ対応<br />
・上にスクロールしすぎたら新着データを読む<br />
・下にスクロールし底に近くなったら古いデータを読む<br />
・Googleがかなり下までスクロールするのである程度で止める。<br />
・読み込み中はボタンの色を変えて連続読み込みを停止する。<br />
・動画にも対応<br />
・ホバー又はクリックでテキスト情報表示へ切り替え<br />
・右上に「いいね数」表示</p>The post <a href="https://uda2.com/blog/buhi/">Instagram APIでフレブルBUHI画像閲覧</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></content:encoded>
					
					<wfw:commentRss>https://uda2.com/blog/buhi/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>ログール、あし＠、edita、gooあしあとはどうなの？</title>
		<link>https://uda2.com/blog/editagoo/</link>
					<comments>https://uda2.com/blog/editagoo/#respond</comments>
		
		<dc:creator><![CDATA[uda2]]></dc:creator>
		<pubDate>Sun, 01 Jun 2008 11:13:41 +0000</pubDate>
				<category><![CDATA[うだうだ]]></category>
		<category><![CDATA[SNS]]></category>
		<category><![CDATA[あしあと]]></category>
		<category><![CDATA[アクセスアップ]]></category>
		<guid isPermaLink="false">http://uda2.com/wordpress/2008/06/editagoo.html</guid>

					<description><![CDATA[<p>このウダ2Blogで「gooあしあと」をやって心躍る！期間限定激安高校「大特価情報部」「あし＠」をやってる。 元々、「gooあしあと」は毎日見てるGIGAZINが付けてたので付けてみたがGIGAZINがやめたのでどうしよ</p>
The post <a href="https://uda2.com/blog/editagoo/">ログール、あし＠、edita、gooあしあとはどうなの？</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></description>
										<content:encoded><![CDATA[<p>このウダ2Blogで「gooあしあと」をやって<a href="http://tokkabu.blog21.fc2.com/" target="_blank">心躍る！期間限定激安高校「大特価情報部」</a>「あし＠」をやってる。<br />
元々、「gooあしあと」は毎日見てるGIGAZINが付けてたので付けてみたがGIGAZINがやめたのでどうしようかと思って探してみたら、タイトルの４つサービス「ログール」「あし＠」「edita」「gooあしあと」が挙がってきた。<br />
<a href="http://www.accesstrade.net/at/c.html?rk=01002dr7003mcr" target="_blank">edita<img decoding="async" src="http://www.accesstrade.net/at/r.html?rk=01002dr7003mcr" width="1" height="1" border="0" alt="" /></a><br />
サブタイトルにもあるようにコミュニティがメインな感じだ、趣味のブログとか日記系のブログをやってる人に向いてそうだ。<br />
あし＠<br />
これもコミュニティよりなんだけどカテゴリの垣根が薄いので日記系のブログ向け。</p>
<p>gooあしあと<br />
今まで貼っ付けただけで気にしてなかったけど、アナライザっぽい機能が付いている。しかも意外と上等なアナライザだ。<br />
だけどカテゴリがあって無いようなものだし、コミュニティも力を入れてる様子があまりなくメッセージも送れなさそう。<br />
<a href="http://logoole.yahoo.co.jp/" target="_blank">ログール</a><br />
内容はgooあしあとに近いアナライザに力を入れてるタイプの様だ。<br />
ただyahoo!がやってるんで、コレに登録するかどうかが検索結果に影響されるかもしれない。<br />
ちなみにyahoo!のソーシャルブックマーク「Yahoo!ブックマーク」はyahoo!の検索結果に出てくるんでアクセス数に影響する。<br />
このブログはコミュニティ向けでは無いし、今のところログールが後発でユーザー数が少ないみたいなんでもう少し様子見してどうするか決めることにした。<br />
おそらく、これらのサービスはブログにSNS（mixiみたいなの）の機能を付けるのが目的であってアクセス数を増やす為のものではないだろうし、足跡残したぐらいでアクセス数が上がるとは思ってないけど、付ける前と後では一日のユニークユーザー数が10％ぐらいは上がった気がする。</p>The post <a href="https://uda2.com/blog/editagoo/">ログール、あし＠、edita、gooあしあとはどうなの？</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></content:encoded>
					
					<wfw:commentRss>https://uda2.com/blog/editagoo/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
