解説のようなもの
今回は一つも外部のライブラリを使用しませんでした。
jQueryがあればもっと簡単にできると思います。
どのブログでも対応できるようにライブラリを使っていません。
(jQuery入れてないブログとかあまり見たことはないですが)
あとあえて古いJavaScriptの書き方をしています。
今回の開発でわかったことがありました。
SNSをシェアするAPIに共通しているのがAPIのエンドポイントとパラメータのURLを指定するだけでシェアができるといった点です。
面白いことにmixiだけSSL対応していなかったのでhttp://
となっています。
ソースコード上はhttps://
にしていますがhttp://
に遷移します。
可読性が悪いところがあるのでちょっと修正したいです。。
それともっとDRYな書き方ができるかもしれないので考えてみます。
コード
ソーシャルシェアボタンのソースコードがこうなってます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
( function ( d, location ) { "use strict"; var origin = location.origin, pure_location = location.href.replace( /\?.*$/, '' ), site_title = d.title, sns_all = { twitter: { api_path: 'https://twitter.com/intent/tweet?', title_param: 'text', url_param: 'url', title_encode: true, url_encode: false, display: 'Twitter' }, facebook: { api_path: 'https://www.facebook.com/share.php?', title_param: 'title', url_param: 'u', title_encode: false, url_encode: true, display: 'Facebook' }, google: { api_path: 'https://plus.google.com/share?', url_param: 'url', title_encode: false, url_encode: false, display: 'Google+' }, hatena: { api_path: 'https://b.hatena.ne.jp/add?', title_param: 'title', url_param: 'url', title_encode: true, url_encode: false, display: 'はてブ' }, pocket: { api_path: 'https://getpocket.com/edit?', title_param: 'title', url_param: 'url', title_encode: false, url_encode: true, display: 'Pocket' }, line: { api_path: 'https://line.me/R/msg/text/?', title_encode: false, url_encode: false, url_param: '', display: 'LINE' }, slack: { api_path: 'http://slackbutton.herokuapp.com/post/new/?', url_param: 'url', title_encode: false, url_encode: true, display: 'Slack' }, mixi: { api_path: 'https://mixi.jp/recent_voice.pl?', url_param: 'status', title_encode: false, url_encode: false, display: 'mixi' }, chatwork: { api_path: 'https://www.chatwork.com/packages/share/new.php?', title_param: 'title', url_param: 'url', title_encode: true, url_encode: true, display: 'ChatWork' }, evernote: { api_path: 'https://www.evernote.com/noteit.action?', title_param: 'title', url_param: 'url', title_encode: false, url_encode: false, display: 'Evernote' }, feedly: { api_path: 'https://feedly.com/i/subscription/feed/' + origin + '/feed', title_encode: false, url_encode: false, display: 'Feedly' }, linkedin: { api_path: 'https://www.linkedin.com/cws/share?', url_param: 'url', title_encode: true, url_encode: true, display: 'LinkedIn' }, skype: { api_path: 'https://web.skype.com/share?', url_param: 'url', title_encode: false, url_encode: true, display: 'Skype' }, tumblr: { api_path: 'https://www.tumblr.com/widgets/share/tool?', title_param: 'caption', url_param: 'url', title_encode: true, url_encode: true, display: 'Tumblr' }, rss: { api_path: origin + '/feed', title_encode: false, url_encode: false, display: 'rss' } }, _a_tag_generator = function ( title, href ) { var a = d.createElement( 'a' ); a.setAttribute( 'href', href ); a.setAttribute( 'target', '_blank' ); a.innerHTML = title; return a; }, _href_generator = function ( sns ) { var title = sns.title_encode ? encodeURIComponent( site_title ) : site_title, url = sns.url_encode ? encodeURIComponent( pure_location ) : pure_location, href = sns.api_path, params = ''; params += sns.title_param ? sns.title_param + '=' + title : ''; params += '' !== params ? '&' : ''; params += sns.url_param ? sns.url_param + '=' + url : ( '' === sns.url_param ? url : '' ); return href + params; }, _set_a_tag = function ( selector, sns ) { var href = _href_generator( sns ), a_tag = _a_tag_generator( sns.display, href ); selector.append( a_tag ); }, _init = function () { var sns_prefix = 'sns_button_', selectors, i; for ( i in sns_all ) { selectors = d.getElementsByClassName( sns_prefix + i ); Array.prototype.forEach.call( selectors, function( selector ) { _set_a_tag( selector, sns_all[ i ] ); }); } }; _init(); })( document, window.location ); |
参考
SNSボタンの設置とカスタマイズ方法
WebサイトにSNSシェアボタンを設置&効果測定する方法のまとめ
各種シェアボタンを独自デザインで設置する
【スラック】使い方のまとめ
チャットワークでシェア | チャットワーク(ChatWork)
WordPressテーマにEvernoteのクリップボタンを取り付けるカスタマイズ方法
bradvin/social-share-urls: Social Share URLs
スポンサードリンク