Clever Geek Handbook

ソーシャルボタン（Facebook、VK、Twitterなど）のJavaScriptを削除します。

ソーシャルネットワークのJavaScriptライブラリを削除し、ページの読み込み速度を加速し、RESTful APIを共有といいね！に使用した方法。











なぜHTMLなどなのか？



Twitter、Google +、LinkedIn、vk.com、Facebookが提供するすべての「共有」ボタンと「いいね」ボタンは、独自のJavaScriptコードをプロジェクトに埋め込むことを義務付けています。接続された各スクリプトはリクエストを実行し、 side」はページの読み込み速度を遅くし、ユーザーのデバイスの負荷を増やします。 ユーザーは、DNSルックアップ、HTTPリクエストなどのプロセスが完了するまで待つことを余儀なくされ、レスポンスにはボタン自体で使用されるスクリプト自体、スタイル、画像が含まれます。

以下は、ソーシャルネットワークでのユーザーの承認の確認、受信した情報の解析、DOMの再構築、および新しい要素の描画のプロセスです。 ボタン自体の外観に必要なすべてのプロセスが終了した後、没入型スクリプトは引き続き動作し、サードパーティのCookieを設定し、ユーザー、ユーザーのアクション、および設定を監視します（ソーシャルネットワークは「正しい」広告を表示します）。

別のポイント-すべての共有/ボタンは、それらの動作とページ上のスタイルの両方の制御外です。

RESTful API（別名HTTP GET）とTwitter Bootstrap 3 + Font Awesome bunchを使用して、すべての一般的なソーシャルネットワークから共有ボタンと類似ボタンを実装することにしました。 このアプローチは、アプリケーションやソーシャルネットワークの承認を必要としないオープンなREST機能に適用できます。



準備する



TWBS3とFAを接続します。 ソーシャルメディアブランドの色を見つけて、それらのCSSスタイルを記述します。 Google+およびSurfingbirdでは、ボタンにロゴを「正しい」方法で配置する追加のスタイルを作成します。 スタイル：

追加のCSSスタイルコード 
i.fb, span.fb{ color: #3b5998; } i.tw, span.tw{ color: #00aced; } i.google, span.google{ color: #dd4b39; } i.linkin, span.linkin{ color: #007bb6; } i.vk, span.vk{ color: #45668e; } i.pinterest,span.pinterest{color: #cb2027;} i.surfingbird{ max-height: 12px; min-width: 25%; } i.surfingbird::before{ content: url(http://bootstrap-ru.com/cdn/i/surf.png); position: relative; left:0px; top: -7px; float: left; } .google-plus-one{ overflow: hidden; position: relative; } .google-plus-one i{ position: absolute; left: -4px; bottom: -5px; } .google-plus-one span{ font-size: 16px; font-weight: 900; line-height: 10px; margin-left: 15px; } .btn-sm.google-plus-one span{ font-size: 14px; } .btn-sm.google-plus-one i{ bottom: -3px; } .btn-lg.google-plus-one span{ font-size: 20px; margin-left: 18px; } .btn-lg.google-plus-one i{ bottom: -5px; } .btn-xs.google-plus-one span{ font-size: 12px;} .btn-xs.google-plus-one i{ bottom: -7px; }






ボタンのHTMLレイアウトを作成する



ソーシャルネットワークからHTTPエンドポイントを見つけ、GETを介して送信できるパラメーターを見つけます。 アイコンを選択し、以前に作成したCSSスタイルを確認します。 次のマークアップを使用します。 

 <a class="btn btn-default" href=“addre.ss?param=_VALUE_” > <i class="fa fa-social-icon additional-class”></i> </a>




Facebookシェア



追加テキストでURLを共有するための標準ボタン。

HTTPエンドポイント： http://www.facebook.com/sharer.php



: http://www.facebook.com/sharer.php





パラメータ：





Facebook Like



特定のURLの標準的な「いいね」。

HTTPエンドポイント： http://www.facebook.com/plugins/like.php



: http://www.facebook.com/plugins/like.php





パラメータ：





Twitterツイート



ページへのリンクと追加テキストを含む「ツイート」。

HTTPエンドポイント： http://twitter.com/share



: http://twitter.com/share





パラメータ：





Google Plus One（+1）



+1からURL

HTTPエンドポイント： https://apis.google.com/_/+1/fastbutton



: https://apis.google.com/_/+1/fastbutton





パラメータ：





Google Plusシェア



URLを共有（「共有」）します。

HTTPエンドポイント： https://plus.google.com/share



: https://plus.google.com/share





パラメータ：





LinkedInシェア



URLを共有（「共有」）します。

HTTPエンドポイント： http://www.linkedin.com/shareArticle



: http://www.linkedin.com/shareArticle





パラメータ：





VK.com（Vkontakte）シェア



URLを共有（「共有」）します。 サイトの名前、説明、画像を指定する機能。

HTTPエンドポイント： http://vk.com/share.php



: http://vk.com/share.php









Pinterestピン



PinterestでメディアファイルとURLを共有します。

HTTPエンドポイント： http://www.pinterest.com/pin/create/button/



: http://www.pinterest.com/pin/create/button/









Surfingbird Surf！



URLを共有（「共有」）します。 Surfingbirdは提供されたURLページを解析しないため、以下のすべてのパラメーターが必要であることに注意してください。 また、Font AwesomeにはSurfingbirdアイコンがありません。これを画像として追加します。

HTTPエンドポイント： http://surfingbird.ru/share



: http://surfingbird.ru/share









.btn-groupで結合されたボタンの最終コード 
 <div class="btn-group"> <button class="btn btn-default disabled" > Share: </button> <a class="btn btn-default" target="_blank" title="Like On Facebook" href="http://www.facebook.com/plugins/like.php?href=_URL_" > <i class="fa fa-thumbs-o-up fa-lg fb"></i> </a> <a class="btn btn-default google-plus-one" target="_blank" title="+1 On Google" href="https://apis.google.com/_/+1/fastbutton?usegapi=1&size=large&hl=en&url=_URL_" > <i class="fa fa-google-plus fa-2x google"></i><span class="google">1</span> </a> <a class="btn btn-default" target="_blank" title="On Facebook" href="http://www.facebook.com/sharer.php?u=_URL_&t=_DESCTEXT_" > <i class="fa fa-facebook fa-lg fb"></i> </a> <a class="btn btn-default" target="_blank" title="On Twitter" href="http://twitter.com/share?url=_URL_&text=_DESCTEXT_" > <i class="fa fa-twitter fa-lg tw"></i> </a> <a class="btn btn-default" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&url=_URL_" > <i class="fa fa-google-plus fa-lg google"></i> </a> <a class="btn btn-default" target="_blank" title="On LinkedIn" href="http://www.linkedin.com/shareArticle?mini=true&url=_URL_" > <i class="fa fa-linkedin fa-lg linkin"></i> </a> <a class="btn btn-default" target="_blank" title="On VK.com" href="http://vk.com/share.php?url=_URL_&title=_TITLE_&description=_DESCTEXT_&image=_URL_TO_MEDIA" > <i class="fa fa-vk fa-lg vk"></i> </a> <a class="btn btn-default" target="_blank" title="Pin It" href="http://www.pinterest.com/pin/create/button/?url=_URL_&description=_DESCTEXT_&media=_URL_TO_MEDIA" > <i class="fa fa-pinterest fa-lg pinterest"></i> </a> <a class="btn btn-default" target="_blank" title="Surf!" href="http://surfingbird.ru/share?url=_URL_&description=_DESCTEXT_&screenshot=_URL_TO_MEDIA&title=_TITLE_" > <i class="fa surfingbird fa-lg"></i> </a> </div>






動作ボタンの完全なセットの例は、 jsfiddle.netおよびcodepen.ioにあります。



便利なリンク：



More articles:


All Articles