Clever Geek Handbook

ソーシャルボタンのカスタマイズ

私たちの多くは、何らかの形で、ソーシャルネットワークのボタンをカスタマイズする問題に直面しており、多くの人がまだ直面しています。 最近、Sports.ruでは、「いいね」の外観をカスタマイズするだけでなく、異なるテキストブロックに関連するソーシャルボタンのいくつかのブロックを同じページに配置するという問題を解決する必要がありました。



このトピックでは、特別なプロジェクト （慎重に、広告）でこの問題をどのように解決したかを説明し、既製の、そして非常に柔軟なソリューションを共有します。






次の機能を実行するjQueryプラグインが作成されました。 現時点では、プラグインはFacebook Share、Vkontakte Share、Twitterをサポートしています。





既知の問題

デフォルトでは、プラグインは特定のhtml構造で動作するように調整されていますが、松葉杖を作成せずに単純に再構成できることを保証します。

将来的には、他のサービスとの統合を実装する予定です。



使い方は？



HTML 



<div class="event-container" id="event_5"> <h2> </h2> <img src="image.png" alt="" /> <div class="summary"> <p>   </p> </div> <div class="likes-block"> <a href="?hash=event_5" class="like l-fb"> <i class="l-ico"></i> <span class="l-count"></span> </a> <a href="?hash=event_5" class="like l-vk"> <i class="l-ico"></i> <span class="l-count"></span> </a> <a href="?hash=event_5" class="like l-tw"> <i class="l-ico"></i> <span class="l-count"></span> </a> </div> </div>


Javascript 



  jQuery(document).ready(function($) { $('.like').socialButton(); $.scrollToButton('hash', 3000); });


説明



クラス（l-fb、l-tw、l-vk）を使用して、プラグインは処理するボタンを決定します。 前述したように、クラス名とキー要素セレクターをオーバーライドできます（デフォルト構成のソースのデフォルトを参照）。 これを行うには、再定義されたパラメーターを含むハッシュをsocialButton（）メソッドに渡すだけです。



ここで、アドレスhttp://path.to/page.html?hash=news_123にアクセスすると、プラグインは3秒でnews_123 id-shnikを使用してマテリアルに「スクロール」します。



デフォルトでは、プラグインはヘッダーとしてh2を使用し（見つからない場合はdocument.title）、最初のp-boxの説明として、リンクとして、同様のクラスを持つリンクのhref属性の値を使用します。 ところで、絶対URLと相対URLの両方がサポートされています。



最後に



プラグインを賢く使用してください;ページ上でソーシャルで100ブロックを彫刻しないでください。 ボタン。 各ボタンは、カウンターAPIへのリクエストです。 ページに多くのマテリアルがある場合は、動的ロードを実装します。



デモはどこにありますか？ ソースはどこにありますか？



ここのソース： GitHub

例は次のとおりです。



ご清聴ありがとうございました。コメント欄で質問をお待ちしています。 この記事がお役に立てば幸いです、％username％！


More articles:


All Articles