こんにちは、Habr！
本日、フロントエンドのシニア開発者であるDataArtのDmitry Kabakovが、小さくても便利なチュートリアルを共有します。
現代の「Google World」では、サイトの社会的要素がますます重要になっています。 しかし、通常のソーシャルウィジェット/コードは、ほとんどの場合、サイトのデザインに適合しません。
どうする？ 作成する必要があります！
チュートリアルには次のものが必要です。
- jQuery sharrreプラグイン;
- FontAwesomeアイコン
- HTML / CSS3の知識;
- あなたの時間の10分
ステップ1.構造の作成
最良の選択肢は、主要なソーシャルネットワークのリストだと思います。
<ul class="socials"> <li id=”twitter” class="social"></li> <li id=”facebook” class="social"></li> <li id=”linkedin” class="social"></li> <li id=”pinterest” class="social"></li> </ul>
それで十分だと思います。 内部は、Sharrreスクリプトで指定されます。 カスタムテンプレートが必要ない場合は、構造を省略できますが、今はそうではありません。
テンプレートはほとんど同じです。FontAwesomeアイコンクラスのみを変更します（ソーシャルネットワークに対応するアイコンクラスを配置します）。
<span class="fa fa-twitter"></span> <a class="box" href="#"> <div class="count" href="#">{total}</div> </a>
ステップ2. Sharrreプラグインの接続
構造を把握し、プラグインを差し込みます。
$('#twitter').sharrre({ share: { twitter: true }, template: '<span class="fa fa-twitter"></span><a class="box" href="#"><div class="count" href="#">{total}</div></a>', enableHover: false, buttons: { twitter: { via: 'your_account' } }, click: function (api, options) { api.simulateClick(); api.openPopup('twitter'); } });
要するに、スクリプトを要求します。
- ソーシャルネットワークを1つだけ表示します。
- カスタムテンプレートを適用します。
- ネットワークの基本機能を隠します。
- クリックすると、ソーシャルボタンの機能を実行します。
同様に-各ネットワークに対して（Google +の場合、PHPスクリプトを接続する必要があります）。
ステップ3.設計
それはすべてあなたの想像力と、もちろん、スキルに依存します。 以下に設計オプションを提案します。
codepen.io/Dmitriy-ateo/pen/JdYbYQ
まとめ
その結果、プラグインは機能を引き継ぎ、外観は私たちに任されています。 接続が簡単なため、プラグインはさまざまなページで使用できます。 lazy-load-scriptsを接続することにより、ページに表示されるとおりにソーシャルボタンをロードできます。
キャッチは何ですか？
プラグインを使用すると、作業が大幅に簡素化されますが、もちろん、このアプローチには欠点もあります。 まず、このプラグインはすべてのソーシャルネットワークをサポートしているわけではなく、基本的なネットワークのみをサポートしています。 第二に、Google +の場合、PHPスクリプトを追加で接続する必要があり、実装にいくつかの困難が追加されます。
投稿者：Dmitry Kabakov、シニアフロントエンド開発者。