3つのステップでソーシャルボタンを作成する



こんにちは、Habr!

本日、フロントエンドのシニア開発者であるDataArtのDmitry Kabakovが、小さくても便利なチュートリアルを共有します。

現代の「Google World」では、サイトの社会的要素がますます重要になっています。 しかし、通常のソーシャルウィジェット/コードは、ほとんどの場合、サイトのデザインに適合しません。

どうする? 作成する必要があります!

チュートリアルには次のものが必要です。

ステップ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'); } }); 

要するに、スクリプトを要求します。


同様に-各ネットワークに対して(Google +の場合、PHPスクリプトを接続する必要があります)。

ステップ3.設計

それはすべてあなたの想像力と、もちろん、スキルに依存します。 以下に設計オプションを提案します。


codepen.io/Dmitriy-ateo/pen/JdYbYQ

まとめ

その結果、プラグインは機能を引き継ぎ、外観は私たちに任されています。 接続が簡単なため、プラグインはさまざまなページで使用できます。 lazy-load-scriptsを接続することにより、ページに表示されるとおりにソーシャルボタンをロードできます。

キャッチは何ですか?

プラグインを使用すると、作業が大幅に簡素化されますが、もちろん、このアプローチには欠点もあります。 まず、このプラグインはすべてのソーシャルネットワークをサポートしているわけではなく、基本的なネットワークのみをサポートしています。 第二に、Google +の場合、PHPスクリプトを追加で接続する必要があり、実装にいくつかの困難が追加されます。

投稿者:Dmitry Kabakov、シニアフロントエンド開発者。

Source: https://habr.com/ru/post/J265991/


All Articles