独自のソーシャルボタンを使用してページを最適化します

こんにちは

ユーザーがソーシャルネットワークでリンクを共有できるようにすることの利点は明らかです。 ただし、パフォーマンスとページの読み込み時間を犠牲にしたくはありません。



この記事では、利用可能なすぐに使用できるソーシャルボタン、それらを使用する際に発生した問題、およびいくつかの一般的なソーシャルネットワーク用のボタンを作成する簡単な方法について説明します。

ソーシャルボタンの既製のソリューション

私たちが製品を作り始めたとき、私たちはサイトでボタンを共有することを真剣に考えませんでした。 既製のサービスを取得して、ページに追加しました。

• pluso.ru-ロシア語版
• addthis.com-英語版の場合

しかし、時間が経つにつれて、すべてがそれほどスムーズではないことに気付きました。 すなわち：

• 過剰なトラフィック
• ajaxを介して常に正しく動作するとは限りません
• 広告
• 長いロードまたはまったくロードしない
• 特にコンテンツがajaxを介して絶えず更新される場合、ブラウザのメモリを消費します

そのため、ユーザーがソーシャルネットワークでリンクを共有できるようにする他のオプションを探し始めました。

githubには多くの既製のソリューションがあります。例えば：

• github.com/Julienh/Sharrre
• github.com/carrot/share-button
• github.com/kni-labs/rrssb
• github.com/sapegin/social-likes
• github.com/mattberridge/Simple-Social-Sharing-Buttons
• などなど

実際、これで停止できますが、5つの異なる共有ボタン（VK、Facebook、Twitter、Google +、LinkedIn +電子メールで送信）が必要なだけなので、独自のオプションを作成することにしました。 ご存知のように、うまくやりたいなら、自分でやりましょう。

独自のボタンを作成する

サイトでソーシャルアイコン付きのフォントを既に使用しているため（ソーシャルネットワーク経由の認証ボタンおよびグループへのリンク用）、フォントを取得しました。追加のメモリは必要ありません。

また、たとえば、Awesome Fontを使用するbootstrap-lipis.imtqy.com/bootstrap-socialなどの既成の要素を使用することもできます（Font Awesome自体は非常に大きいため、特定のアイコンのみが必要な場合は、必要なアイコンのみを選択することをお勧めしますfontello.com ）

JSのコードを検討してください（Vkontakteの一部が提供されています。記事の最後に、必要なすべてのソーシャルボタンを含む完全な例へのリンクがあります）。

そのため、まずオブジェクトを作成して初期化関数を追加します。この関数では、イベントをトリガーするオブジェクトのクラスと、eventListenerページの各オブジェクトに共有および追加するデータを指定します。

var cubeShare = { title: 'CubeCamp.ru', width: 600, height: 400, init: function() { var share = document.querySelectorAll('.share-btn'); for(var i = 0, l = share.length; i < l; i++) { var url = share[i].getAttribute('data-url') || location.href, title = share[i].getAttribute('data-title') || '', desc = share[i].getAttribute('data-desc') || '', el = share[i].querySelectorAll('a'); for(var a = 0, al = el.length; a < al; a++) { var id = el[a].getAttribute('data-id'); if(id) this.addEventListener(el[a], 'click', {id: id, url: url, title: title, desc: desc}); } } } }; 

次に、既に作成されたクラスに追加することにより、eventListenerを説明します。

  addEventListener: function(el, eventName, opt) { var _this = this, handler = function() { _this.share(opt.id, opt.url, opt.title, opt.desc); }; if(el.addEventListener) { el.addEventListener(eventName, handler); } else { el.attachEvent('on' + eventName, function() { handler.call(el); }); } } 

最後に、ポップアップウィンドウを開きます。ここに、ソーシャルネットワークが共有するために提供する実際のページを読み込みます。 他のネットワークを追加するには、それに応じて切り替える必要があるページを追加する必要があります。

  share: function(id, url, title, desc) { url = encodeURIComponent(url); desc = encodeURIComponent(desc); title = encodeURIComponent(title); switch(id) { case 'vk': this.popupCenter('https://vk.com/share.php?url=' + url + '&description=' + title + '. ' + desc, this.title, this.width, this.height); break; default: break; }; }, popupCenter: function(url, title, w, h) { var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left; var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top; var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width; var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; var left = ((width / 2) - (w / 2)) + dualScreenLeft; var top = ((height / 3) - (h / 3)) + dualScreenTop; var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); if (window.focus) { newWindow.focus(); } } 

jQueryを使用する場合、次のように初期化できます。

 $('.share-btn a').on('click', function() { var id = $(this).data('id'); if(id) { var data = $(this).parent('.share-btn'); var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || ''; cubeShare.share(id, url, title, desc); } }); 

またはjQueryなし：

 cubeShare.init(); 

この方法で共有ボタンを呼び出すこともできます。

 cubeShare.share(id, url, title, desc); 

ここで：

• id-値fb、vk、gb、tw、in、mailのいずれか
• url-完全リンク
• タイトル-タイトル
• desc-説明

VKontakteボタンのHTMLコードの例：

 <div class="share-btn" data-url="http://www.cubecamp.ru" data-title="" data-desc="  "> <a class="btn btn-social-icon btn-sm btn-vk" data-id="vk"><i class="ccon-vkontakte"></i></a> </div> 

ブロック内の値：

• クラスshare-btn
• data-url属性は完全な参照です。 そうでない場合、ブラウザ（location.href）から値を取得します
• データタイトル属性-タイトル（オプション）
• Data-desc属性-説明（オプション）

完全な例

統計と結論

• Addthis-約11のサービスリクエストと約200 kbのトラフィック（約2.6 kbのキャッシュ）
• Pluso-約9個のサービスリクエストと約45kbのトラフィック（約1.4kbのキャッシュ）
• この記事で説明されている解決策は、3.5kbスクリプト自体（約200bのキャッシュ）+選択したアイコンです。

ソーシャルボタンなどの些細なことでも、特にユーザーがモバイルネットワーク経由でデータを使用する場合、ページの読み込み速度に深刻な影響を与える可能性があります。 独自のボタンの作成に少し時間を費やした後、速度を上げ、独自のデザインを作成し、統計などの追加機能を追加する機会を得ます。 そして、サードパーティのサービスに対する追加のリクエストはありません+突然読み込まれなくても心配する必要はありません。