ソーシャルメディアカウンター。 ソーシャルメディアボタン
ブログサイトの読者の皆様、こんにちは。 もちろん、このタスクにはプラグインを使用できますが、 自分でやるのはそれほど難しいことではありません、そして特に私はすでに彼らのために働いているので、より少なくなるでしょう（与えられたリンクの記事を見てください）。 私はすでに詳細に書いたソーシャルメディアのアイコンを取得しました（Dimoksがこれに反対しないことを願っています）。
また、メールにも適していると思いました。
ボタンからスプライトを作成し、Htmlコードをサイトに挿入します
結局 必要なグループソーシャルネットワークでページを作成しました。つまり、必要なリンクをすべて受け取ったので、サイトにボタンを追加することで戸惑うことがあります。 もちろん、私の投稿に従って、各ソーシャルネットワークに適したアイコンを選択し、必要に応じて、とで必要なサイズに縮小することができます。
そうではありません 一番いい方法..。 どうして？ ソーシャルネットワークの各画像をアップロードするために、サーバーに個別のリクエストが行われます。 アイコンが12個ある場合は、10個のリクエストを意味します。これにより、サーバーとに追加の負荷が発生します。 そのような廃棄物は、特にそれが長い間続いているので、私たちには適していません。
私は車輪の再発明（スプライトの作成）をしないことに決めましたが、Share42コンストラクターによって作成されたものを使用しました（それを操作する方法の説明へのリンクはすぐ上にあります）。 その中で、必要なアイコンであるソーシャルネットワークを選択でき、コードとともにCSSスプライトを受け取ります。 物理的に一人で グラフィックファイル、必要なすべてのソーシャルメディアアイコンとサブスクリプションが含まれます RSSフィード（および必要に応じて電子メール）。
アイコンサイズが24x 24のニュースを購読するために、4つのメインネットワークと2つのアイコンを選択したので、スプライトは次のようになります（まだそこに到達していますが、問題ではありません）。
これで、すべての要素が揃いました。グループまたはソーシャルメディアページへのリンクと、サイトに表示するためのアイコンです。 これらすべてを正しく準備することだけが残っています。 レイアウト。 私のブログはWordPressを利用しているので、ボタンコードをのいずれかに貼り付けます。 私の場合、それはsidebar.phpと呼ばれます。 HTMLコードそれは非常に単純であることがわかります：
まあ、そして最も興味深い。 助けを借りて、この特定の場所に背景として表示されるスプライトの領域を決定します（この場合、この背景はハイパーリンクの下に配置されます）。 これがどのように発生するかを説明するのに非常に長い時間がかかるので、リンクの記事を読むとすべてが明らかになります（例が示されています）。 怠け者の場合は、24の倍数ではない数字を試してみてください。
はい、FTPを使用してスプライトファイルをサイトにアップロードし、バックグラウンドでそのパスを指定します（）。 それで全部です。 上記のリンクの資料を注意深く読んでもうまくいかない場合は、何も起こらない場合は、コメントで状況を説明してください（詳細-コードを挿入するには、PHPタグで角かっこで囲むのを忘れてください角かっこ）。
頑張って！ ブログサイトのページでお会いしましょう
あなたはに行くことによってより多くのビデオを見ることができます");">
あなたは興味があるかもしれません
ブロックレイアウト-2列、3列、および流体サイトレイアウトを作成します
噛みませんか？ そして、私たちはすでに訪問者の餌にたくさんのお金を費やしました。 そしてボタン ソーシャルネットワークサイトにインストールされていますか？ 晴れ！ 顔の病気のすべての症状-サイトの関連性。 扱います。
ウェブサイトにソーシャルメディアボタンが必要なのはなぜですか？
サイトページでの可用性 ソーシャルボタン必須の属性、またはファッションアクセサリーだけではありません。 まず第一に、ソーシャルボタンはリソース所有者がウェブサイトのプロモーションでお金を節約するのに役立ちます。 この場合、プロモーションは訪問者の助けを借りて行われます。 そして、所有者は自分のサイトを高品質のコンテンツで埋めて、新しいユーザーの流入を待つことしかできません。
しかし、これらのボタンはサイト所有者だけのものではありません。 それらの配置は、ソーシャルネットワーク自体にとっても重要です。 これらの各ボタンは、ソーシャルポータルへのリンクです。 そして、このリンクの交換のおかげで、 高いレベルソーシャルネットワーク自体の中でのユーザーアクティビティ。 そのため、人気のソーシャルネットワークは、ボタンの既製のコードをWebサイトに提供します。
通常のソーシャルボタンとは何ですか？
たとえば、VKontakteソーシャルボタンのスクリプトを見てみましょう。 彼女のコード：
コードのこの部分は、サイトページのいわゆる「ヘッダー」に配置する必要があります。 このコードは、ソーシャルボタンがクリックされたときに実行されるスクリプトのアドレスを指定します。 ボタン画像の表示を担当するコードの2番目の部分は次のとおりです。
2番目のコードは、ボタンが表示されるページの部分に配置する必要があります。
ボタンの外観は簡単に調整できます。 これを行うには、特別なセクションに移動します 技術サポートソーシャルネットワーキングサイトで。 ここでは、コードが生成されるボタンのスタイルを設定できます。
簡単な配置オプション
すべての人気のソーシャルネットワークのボタンを一度にWebサイトに配置できる特殊なサービスがあります。 これは、それぞれのスクリプトを個別に挿入するよりもはるかに簡単です。 これらのサービスの中で最も人気のあるものを考えてみましょう。
- AddThis-このサービスには英語のインターフェースがあります。 しかし同時に、それはあなたが世界のあらゆるソーシャルネットワークにボタンを追加することを可能にします：
ソーシャルボタンバーの場所は、いくつかのテンプレートで選択できます。 スライドアウトサイドバーは、アカウントの無料バージョンで利用できます。 もあります 無料版 WordPressのプラグイン。 サービスWebサイトに登録すると、ソーシャルボタンによるクリックの統計にアクセスできるようになります。
- Share42は、ソーシャルボタンパネルの外観を「微調整」する機能を備えた、明確でシンプルなインターフェイスです。 この場合、セットアッププロセスには ステップバイステップの説明実行するアクションの説明付き。 したがって、このサービスは、経験の浅いWebマスターにも適しています。
もう一つのプラス このサービスは、いくつかの人気のあるCMSをサポートするソーシャルボタンバーのスクリプト生成です。
ソーシャルボタンとWordPress
人気のあるCMSのために、ソーシャルボタンのグループインストール用の多くのプラグインが作成されています。 プラグインのインストール例を見てみましょう WordPressのソーシャル共有ボタン.
この拡張のプラス面は完全に ロシア語のインターフェース、Runetの人気のソーシャルネットワークのカスタマイズと「調整」の容易さ：
WordPress用のソーシャルボタンプラグインをインストールする手順。
1）サイトの管理パネルに移動します。 左側で、[プラグイン]タブの[新規追加]を選択します。
2）ページ「 プラグインをインストールする「検索フィールドに拡張機能の名前を入力し、「プラグインの検索」ボタンをクリックします。
3）検索結果で、必要な拡張子の名前が見つかります。 次に、[インストール]リンクをクリックします。
4）アーカイブをダウンロードしてインストールした後、適切なリンクをクリックしてプラグインをアクティブ化します。
5）それをアクティブにした後、 新しいセクション共有ボタン：
プラグイン設定はいくつかの項目で構成されています。
WordPress用のいくつかの実績のあるプラグイン：
- 修正されたソーシャルボタン-このプラグインを使用すると、フローティングソーシャルパネルをサイトに追加できます。これは、上部、下部、または側面が「粘着性」である可能性があります。
- Htmlソーシャル共有ボタン-このプラグインには、 cssを使用するおよびhtml。
ソーシャルボタンとJoomla
ソーシャルボタンを操作するための多くのプラグインもこのエンジン用に作成されています。 例としてSocButtonsを使用して拡張機能をインストールするプロセスを見てみましょう。 このプラグインの機能：
- エンジンの最も人気のあるすべてのバージョンのサポート。
- セットアップが簡単。
- 外観特性はボタンごとに個別に設定されます。
- インストールパッケージの軽量。
手順：
1）Joomlaのサイトの管理部分に移動し、アイコン「 エクステンションマネージャー».
2）ここで、拡張機能をロードするためのソースを定義します。
3）拡張機能をインストールした後、「 プラグインマネージャー「そしてただアクティベートする インストールされた拡張機能..。 これを行うには、ページの上部にある緑色のアイコンをクリックする必要があります。
4）構成するには、リスト内の拡張機能の名前をクリックします。 このプラグインでは、表示設定はソーシャルボタンごとに個別に設定されます。
Joomlaのいくつかの実証済みの拡張機能：
- ソーシャルブックマーク-このプラグインは一度に複数のバージョンで存在します。 それぞれ、ソーシャルパネルを特定の位置に配置できます（ 水平、垂直、またはフロート);
- JL Like-このプラグインは外部スクリプトの追加の読み込みを実行せず、ソーシャルネットワークからの投票の統計を保持することができます。
スクリプトまたはプラグイン？
プラグインのインストールは、最も簡単で最速のオプションです。 ほとんどの場合、インストール後、サイト全体が正常に機能します。 ただし、エンジンバージョンを新しいバージョンに更新すると、すぐにすべてが崩壊する可能性があります。
エンジンとプラグインのバージョンが一致しないため、サイトの運用に問題が発生する可能性があります。 ほとんどの場合、それらはデザイン要素の誤った表示に関連しています。 私たちの場合、これらはソーシャルメディアボタンです。 次に、特殊なプラグインの代わりにベアスクリプトを使用する方が良い場合があるという理解が得られます。
に 新しいバージョン phpエンジンの場合、メソッドと関数の構造はめったに変更されません。 したがって、スクリプトはそのような更新のプロセスを簡単に「転送」します。
ソーシャルボタンのコードは、専門サービスの1つから取得できます。 それらの概要は上に示されています。 例としてShare42サービスを取り上げましょう。 人気のあるエンジンのソーシャルボタンの作成をサポートします。 手順。
私のブログへようこそ。 今日は、HTMLで組版する方法と cssボタンソーシャルネットワーク。 完全なゼロから始めて、目的の結果に到達しましょう。 前方！
マークアップと基本スタイル
リンクのURLにハッシュを入れるだけです。 もちろん、実際に使用する場合、各リンクには、移行が行われる作業アドレスが必要です。
今のところ、次のスタイルを追加しましょう。
共有（幅：280px;マージン：0自動;パディング：10px;背景：＃D3CDEE;）。share i（マージン-右：15px;色：黒;テキスト-変換：大文字;）
リンク（寸法、パディング、背景）とラベルのコンテナのスタイルを少し変更しました。
アイコンを飾る
ソーシャル（表示：インラインブロック;幅：40px;高さ：40px;背景：＃bdc3c7;垂直整列：中央;マージン-右：10px;）
display：inline-blockプロパティを使用して、リンクをブロック要素として表示しましたが、同時に、連続して立つ機能を保持しました。 次に、ブロックが互いに隣接しないように、右側でサイズとインデントを指定します。
さて、なぜ垂直整列が必要なのですか：中央？ このプロパティは、コンテナ内のテキストを垂直方向の中央に正確に配置するように配置します。 また、この段階ですでにセルを視覚的に確認できるように、セルに背景を付けます。 結果は空白になります。 いよいよアイコンを追加します。
最終段階
準備された各ブロックに独自のアイコンを配置することは、これまたはその社会を識別するために残っています。 ネット。 これを行うには、最も正しい方法を使用することを提案します。スプライト画像を接続し、背景の配置を使用してすべてをその場所に配置します。
つまり、このような画像が必要です。 私はそれを約120から40持っています。
次のルールをcssスタイルに追加します。
Social-vk（background：url（icon.png）;）。social-fb（background：url（icon.png）-40px 0;）。social-tw（background：url（icon.png）-78px 0;）
その結果、アイコンで完全に装飾されたブロックが得られます。 
どうやって手に入れたのか分かりますか？ そうでない場合は、説明します。 各リンクブロックのサイズは40x 40です。したがって、背景画像を120 x 40に設定すると、ブロックに完全に含めることができず、結果として、できるだけ多くのリンクブロックが含まれます。
デフォルトでは、この場合、背景画像の幅と高さの最初の40ピクセルが取得されますが、高さを指定すると、すべてが正常になります。画像は高さのブロックに完全に収まります。 したがって、FacebookとTwitterのアイコンの背景の位置を登録するだけです。
次のように背景に書き込みます：background：url（icon.png）-40px 0、social-fbブロックの場合、背景画像は指定された位置から正確に表示される必要があることを明示的に示します-左に幅40ピクセル、必要がないため、オフセットなしの高さです。 本当に簡単です。
他に何ができますか？
たぶん、あなたはまだソーシャルネットワークのブロックにいくつかの追加のデザインを追加したいと思うでしょう。 いくつかのアイデアがあります。 まず、すべてのアイコンに丸めを追加できます。
ソーシャル（境界線半径：5px;）
次に、それらにフレームを追加できます。
ボーダー：3px無地紫;
設計上、この場合、紫が適しているようです。 リンクコンテナ自体の角を丸めることもできます。 
繰り返しますが、多くの設計オプションがあります。 そしてもちろん、簡単に色を変えることができます。 この記事では、そのようなデザインオプションを提供しますが、黄色、緑、赤、その他のアイコンなど、独自の方法で簡単に作成できるようになりました。
結果
ご覧のとおり、自分でも簡単にソーシャルボタンをサイトに追加できます。htmlとcssがこれに役立ちます。 少なくとも視覚的には、特定の各サイトのデザインに必要なアイコンをデザインできます。
これで、今日の記事レッスンは終わりです。 次回は、cssで何か他のものを作成しましょう
親愛なる友人の皆さん、こんにちは。 今日の記事は、サービスやプラグインなしでソーシャルボタンのブロックを作成することに専念します。 また、このブロックには、サイト訪問者がページを印刷したり、記事のリンクをに送信したりできるボタンも含まれます。 Eメールそしてあなたの記事に住宅ローンを作ります。 このようなボタンは、今日のほぼすべてのWebサイトにあります。 現在のみ、サービスまたはプラグインを使用して実装されています。 自分でそれを行う方法を紹介します。
クライアントサイトやブログで使用したサービス-そして。 これらのサービスにより、タスクの実装が容易になります。
サービスやプラグインに対するカスタムソーシャルボタンの利点は何ですか
- もちろん、ウェブサイトの読み込み速度は議論の余地のない要因です。 したがって、たとえば、ブログで使用するPLUSOサービスは、最良のシナリオでは、負荷に633ミリ秒を追加します。
そして、このブロックでは、ソーシャルボタンの必要な画像のみが使用され、結合されます。 すべてのスタイルは最小限に抑えられています。 さらに、シンプルなhtmlフレームワーク。
- 私が提案する方法には、外部リンクは含まれていません。 いいえ、リンクはありますが、すべて内部リンクのようになります。 あなたが望むならいつでもそれらを持つことができます。 そして、それらはまったく表示されなくなります。
- 非常に 簡単インストール..。 ブロックのhtmlコードをウェブサイトページのソースコードに挿入し、スプライトをロードし、追加するだけで十分です。 cssスタイルこれでインストールは完了です。 ボタン画像を使用してファイルへのパスを修正する必要があります。
- このアイテムは、ソーシャルボタンの独自のブロックの方向にプラスマイナスではありません。 秘訣は、それ自体のブロックにボタンクリックのカウンターがないことです。 そして、これはマイナスとして数えることができます。 しかし、その一方で、各ボタンを付けることは可能であり、訪問者がボタンをクリックしてソーシャルネットワークで記事を共有した回数を正確に知ることができます。
- サイトのサービスによって収集された統計は、サードパーティと共有されなくなります。
ソーシャルボタンのブロックをソースコードに挿入する
ボタンが記事の後にある場合は、クラシックバージョンを検討します。
これは、記事の表示を担当するファイル（single.php）を開き、ソーシャルボタンのブロックをソースコードに追加することで実行できます。 または、テーマの関数ファイル（functions.php）を使用して実行することもできます。
私は両方のオプションを示します、そしてあなたはあなたに合ったものを選びます。
single.phpソースコードにブロックを挿入する
警告：開始する前に、single.phpファイルのバックアップコピーを作成してください。
WordPress管理パネルを開く- "外観" — "編集者" — 「1つのエントリ（single.php）」.
ソースコードで、記事の出力が終了し、コメントまたはページごとのナビゲーションが開始される場所を探します。 これは、ソーシャルボタンブロックのhtmlコードを挿入する必要がある場所です。
スクリーンショットを注意深く見て、記事の出力を担当するコードに導かれますとコメント..。 そして、以下のコードを貼り付けます。
もちろん、テンプレートにはいくつかの違いがありますが、きっと理解できると思います。これについて難しいことは何もありません。 その上、あなたはバックアップを持っています、恐れることは何もありません。
そして、ソーシャルボタンブロック自体のhtmlコードは次のとおりです。
コードの説明：これは、ソーシャルネットワークへのリンクを含むclass.shareを持つ1ブロックのDIVです。 リンクは別のポップアップウィンドウで開きます。この関数onClick = window.openがこれを担当します。 記事へのリンクの置換は、このコードで実行されます..。 各リンクには、ボタン画像を割り当てるための独自のクラスがあります。
これで、ソースコードからの挿入は完了です。 そして、cssスタイルを接続する必要があります。
テーマ関数を介してsingle.phpソースコードにブロックを挿入する
警告：作業を開始する前に、functions.phpファイルのバックアップコピーを作成してください。
このオプションを使用するには、functions.phpファイルを開き、最後に次のコードを追加する必要があります。
/ *ソーシャルボタンを挿入します* / add_action（ "comments_template"、 "soc_button"）; 関数soc_button（）（？> また、コードを貼り付けた後は注意してください。スペースやその他の文字を使用しないでください。 または、phpコードを閉じるだけですか？>。 そうしないと、サイトが機能しなくなります。コードの説明：ソーシャルメディアボタンが表示される場所は、comments_templateAPIキーを介して定義されます。 このキーは、コメントの前の場所を決定するために使用されます。 ソーシャルボタンのコード自体は、逆のphp開始タグと終了タグで囲まれています。 コードでは、それらを赤でマークしました。 これは挿入の全体のトリックです htmlコードテーマ関数を介してPHPで。
これでこの方法は終わり、サイトへの画像のアップロードに進みます。
ボタン画像をサーバーにアップロードする
例として、ソーシャルボタンの画像を使用していくつかのスプライトを用意しました。 あなたはそれらをダウンロードすることができます。
例として使用しているスプライトはわずか3.97kbで、必要なボタンのみが含まれています。 また、これはスプライトであるため、データベースへのリクエストは1つだけであり、ボタンごとに個別にリクエストすることはできません。
画像をダウンロードするか、独自の画像を準備してサイトにアップロードします。 これで問題ないはずだと思います。 さらに、cssスタイルでボタンを装飾するには、このスプライトへのリンクが必要になります。
CSSスタイルを含む
もちろん、このステップは最初に行うことができますが、私はすべての複雑な技術的作業を最初に行うことを好みます。その後、cssスタイルで楽しい小さなことを始めます。
したがって、サイトのデザインを担当するstyle.cssファイルを開きます。 そして、これらのスタイルを挿入します。
共有（display：inline-block; vertical-align：inherit; margin：5px 0 0 2px; padding：0px; font-size：0px; width：40px; height：40px; background：url（ "http：// test ..png "）繰り返しなしスクロール0px 0px透明;）。share a.vkontakte（背景：url（" http：//test..png "）繰り返しなしスクロール-168px 0px透明;）。share a.google （背景：url（ "http：//test..png"）繰り返しなしスクロール-252px 0px透明;）。share a.livejournal（背景：url（ "http：//test..png"）繰り返しなしスクロール-336px0px透明;）。share a.twitter（背景：url（ "http：//test..png"）繰り返しなしスクロール-42px 0px透明;）。share a.mail（背景：url（ "http ：// test..png "）繰り返しなしスクロール-294px 0px透明;）。share a.odnoklassniki（背景：url（" http：//test..png "）繰り返しなしスクロール-126px 0px透明;） .share a.pinterest（background：url（ "http：//test..png"）no-repeat scroll -210px 0pxtransparent;）。share a.liveinternet（background：url（ "http：//test..png "）繰り返しなしのスクロール -378px0px透明; ）.share a.evernote（background：url（ "http：//test..png"）no-repeat scroll -420px 0pxtransparent;）。share a.bookmark（background：url（ "http：// test .. png "）繰り返しなしスクロール-462px 0px透明;）。share a.email（背景：url（" http：//test..png "）繰り返しなしスクロール-504px 0px透明;）。share a.print（背景：url（ "http：//test..png"）繰り返しなしスクロール-546px 0px透明;）。share a.digg（背景：url（ "http：//test..png"）繰り返しなしスクロール-588px 0px透明;）。share a.spring（背景：url（ "http：//test..png"）繰り返しなしスクロール-630px 0px透明;）
コードの説明： the.shareクラスは、ブロックの一般的な外観、各ボタンのサイズ、パディングを定義し、単一の背景を設定します。 そして、各リンクには独自のクラスがあり、そのような各リンクには、backgroundプロパティを介してボタンの外観が割り当てられます。 ボタンはcssスプライトとして実行され、各ボタンの幅と高さは40ピクセルで、間に2ピクセルのパディングがあり、各ボタンの画像を正確に定義できます。 つまり、最初のボタンは0として指定され、2番目のボタンは42として指定されます。 コードでは、これらの値はオレンジ色で示されています。 スプライトへのリンクもオレンジ色で強調表示され、スプライトへのパスに変更します。
これで、独自のソーシャルボタンのブロックを作成するプロセス全体が完了します。 安全にチェックに進むことができます。
また、プロセス全体が明確に示されているビデオチュートリアルもあります。ポールには、ボタン自体の操作が示されています。 あなたのウェブサイトやブログを見て、埋め込んでください。
これで終わりです。 彼はその仕事に対処した。 皆さんの幸運を祈り、新しい記事やビデオチュートリアルでお会いしましょう。
に 近々ウェブサイトやブログにソーシャルメディアボタンをインストールすることが流行しており、これは驚くべきことではありません。 まず、ボタンを使用すると、「いいね」と「ハート」を増やすことができます。これは、ソーシャルネットワークでの記事の宣伝にプラスの効果があります。 第二に、ソーシャルネットワーク上のサイトの個々のページへのリンクを共有できるボタンの種類があります。これにより、Vkontakte、Facebook、Odnoklassniki、Twitterなどから追加の訪問者が集まります。 第三に、タイプされた記事 たくさんの「いいね」と「心」は、サイトの読者から非常に信頼されています。
したがって、あなたのウェブサイトが発展するのを助けるためにあなたのウェブサイトにソーシャルメディアボタンをインストールする方法を知ることは非常に重要です。 最も人気のあるソーシャルネットワークがレビューされます
- と接触している
- フェイスブック
- クラスメート
- グーグル「+1」
- ツイッター
- 私の世界
ここでは、ソーシャルネットワーク自体が提供する標準ボタンのインストールについて説明します。 この場合、各ボタンは他のボタンとは別に取り付ける必要があり、時間がかかりますが、見た目もとても良いです。
1.1。 と接触している
1.1.1保存ボタン
ボタンは十分な柔軟性があり、その碑文は任意のボタンに変更できます（デフォルトでは「保存」）。 
まず、のページに移動する必要があります。このページには、ボタンを表示するためにサイトにインストールする必要のあるスクリプトコードも表示されます。
ここでは、5つのうちの1つを選択できます スタイル：ボタン、カウンターのないボタン、リンク、アイコンのないリンク、アイコン。
分野 " 文章「標準を変更することができます」「保存」ラベルを独自のものに。
URLアドレスとして、ボタンでページのアドレスを選択するか、別のページのアドレス（任意）を選択できます。 最初のケースでは、ボタンはボタン自体が配置されているページへのリンクを共有します。 2番目のケースでは、ボタンは、場所に関係なく、指定したリンクを共有します。
埋め込みコード 2つの部分で構成されています : 最初のものはタグの間のどこかに配置する必要があります
と、2番目はボタンを表示する場所です。 段落のサイトへのボタンのインストールについて読む .1.1.2いいねボタン
ボタンの2番目のバージョンはウィジェットです " 好き"。 サイトにインストールする方が簡単です。 最終的には、サイトの適切な場所に配置する必要があるコードが1つだけ届きます。
ボタンをカスタマイズするには、に移動します このリンク..。 ここでは、いくつかのパラメータも入力する必要があります。
サイトの名前-ここにあなたのサイトの短くて本名を示す方が良いです。
ウェブサイトアドレス-住所を入力してください ホームページあなたのサイト。
メインサイトドメイン-サイトのメインミラーを指定します（これは、演算子「ホスト」のパラメーターとして見つけることができます）。これを行うのが難しい場合は、-提案されたVKONTAKTEをそのままにします。
ボタンオプション-これらはボタンのさまざまなスタイルであり、ボタンに影響します 外観.
ボタンの高さ-幾何学的寸法「私は好き」。
ボタン名-利用可能な2つのオプションがあります（私はそれが好きです、それは面白いです）。
埋め込みコード-Vkontakteソーシャルネットワークのボタンを表示するために必要なコード。
1.2 Facebook
このページのボタンを設定します。 として問題が発生する可能性があります フォームへのコメントは 英語しかし、以下であなたは読むことができます 簡単な説明各フィールド。
URLにお気に入り--url-ボタンのページのアドレス（フィールドに入力されていない場合は、ボタンが配置されているページのアドレスが使用されます）。
送信ボタン-チェックマークの存在には次のものが含まれます 新しい機会-Facebookへのリンクを送信します（追加のボタンが表示されます-「送信」）。 有効にすると、2つのボタンが同時に表示されます。
レイアウトスタイル-ボタンのスタイルは、その外観に影響します（標準と見なされます） ボタン_カウント).
幅-ボタンの幅（ピクセル単位）。
顔を表示-有効にすると、このボタンをすでにクリックした人のアバターが表示されます。
フォント-ボタンフォントの種類。
カラースキーム-ボタンの横のスペースの背景（白と黒）。
表示する動詞-ボタン名（それが好きです、私はそれをお勧めします）。
取得するコード-スクリプトコードを生成するボタン。
1.3クラスメートと私の世界
これらのソーシャルネットワークはロシア語圏のインターネットで広く人気を博しており、そこには膨大な数の人々が住んでいます。そのため、Odnoklassnikiサービスの「Class」ボタンと「MyWorld」Webサイトの「Like」のインストールをおろそかにしないでください。 。
ボタンを設定するには、に移動する必要があります。 ボタンを個別に追加して、それぞれを独自の方法でカスタマイズすることも、両方のボタンを同時に編集することもできます。 
身長サイズ-ボタンの幾何学的サイズ。
意見-ボタンフレームの外観。
-ボタンの選択（クラスなど）
カウンター-ボタンを押したときのカウンターのオンとオフを切り替えます（右側、上部-カウンターの場所）。
ボタンのテキスト-ボタンに使用できる3つの名前のいずれかを選択します。
埋め込みコード-サイトにインストールする必要があるスクリプトコード。
1.4グーグル「+1」
短期間で多くの視聴者を獲得した新しいソーシャルネットワーク。 「+1」ボタンのないサイトを想像するのは難しいです。 ソーシャルネットワークへのリンクを追加して「プラス記号」の数を増やすだけでなく、TOPでのサイトの結果に影響を与える可能性があります 検索エンジングーグル。
これに関するすべての詳細、およびボタンのインストールと構成が記載されています。
1.5 Twitter
最も人気のあるショートメッセージサービスは無視できません。 このソーシャルネットワークから自分自身にボタンをインストールして、人々がTwitterであなたのサイトへのリンクをどれだけ早く共有するかを見てください。 これのボタンをカスタマイズできます。
まず、目的のボタンを選択する必要があります（最初のオプションである「リンクの送信」ボタンに関心があります）。
その後、入力する必要のあるいくつかのフィールドを含むフォームがページに表示されます。
リンクを送信-ボタンが配置されているページの選択、またはその他。
文章-ボタンの横に表示されるテキストの選択（ボタン自体ではありません）。
カウンターを表示-ボタンの押下回数のカウントを有効または無効にします。
使って-リンクメッセージをTwitterに追加する方法の選択（実際には何にも影響しません）。
マーク-Twitterで公開されるラベルの選択（実際には何にも影響しません）。
大きなボタン-ボタンの幾何学的サイズを大きくします。
Twitterの適応を拒否する-Twitterスタイルの拒否（フィールドをオフのままにしておくことをお勧めします）。
言語-ボタンの言語の選択。
右側では、サイトに追加する必要のあるコードが生成されます。
1.6 Ya.ru
これを行うには、必要なスクリプトコードを形成するいくつかのフィールドに入力する必要があります。
サイズ-小さいまたは大きいボタンサイズ。
スタイル-ボタンまたはアイコンのどちらかを選択します。
メーターの可用性-ボタンを押したときのカウンターのオン/オフ。
ボタンの外観-ボタンの外観の例。
見出し-ページのタイトルの選択（任意または現在のページのタイトル）。
埋め込みコード-サイトに追加される必要なコード。
2.サイトの準備完了ボタン
ただし、各ボタンのコードをサイトに追加する必要がない場合は、ソーシャルメディアボタンのグループをすぐに形成する標準のスクリプトを使用できます。 この場合、そのようなスクリプトのコードを1つ追加するだけで、最も人気のあるソーシャルネットワークのボタンがすぐにインストールされます。
ブロックを構成して必要なソーシャルネットワークを選択するには、このリンクをたどってください。 以下のスクリーンショットは、提案されたものから目的のソーシャルネットワークのボタンを選択し、ブロックの外観をわずかに編集できることを示しています。
サービスのセット-サイトのソーシャルネットワーキングボタンの選択（チェックマークが付いているボタンがサイトに表示されます）。
コード-サイトに追加する必要のあるスクリプト。
2.2PLUSOボタン
最近、ソーシャルメディアボタンコンストラクターPLUSOが広く人気を博しています。 このリンクを使用してサイトにアクセスできます。
コンストラクターは十分な柔軟性があり、多くの設定があるため、サイトのデザインに完全に適合するようにソーシャルメディアボタンを作成できます。
まず、提供されているいくつかのボタンとカウンターのスタイル（水平、垂直、色付き、無色など）を選択する必要があります。
次に、を選択していくつかのパラメータを設定する必要があります
- ブロックの場所（垂直、水平）;
- ボタンの色（明るい、暗い）;
- ブロックサイズ（大、小）;
- カウンター（存在または不在）;
- 背景（無色または着色）;
コードは指定したパラメーターに従って生成され、その後サイトに挿入する必要があります。
Share42
サイトのボタンをデザインできるもう1つのサービスは、Share42.com / ruです。
このジェネレーターを使用すると、ボタンのサイズをカスタマイズしたり、利用可能な膨大な数のソーシャルネットワークから目的のソーシャルネットワークを決定したり、アイコンの外観を編集したりできます。
ボタンのサイズと目的のソーシャルネットワークを選択してから、追加オプションの構成に進みます。
アイコン付きのパネルタイプ-ボタンのブロックの表示（「垂直フローティング」オプションは非常に興味深い）。
アイコンの表示数を制限する-表示されるボタンの数の選択（他のボタンはリンクの後ろに非表示になります）。
サイトエンコーディング-サイトのエンコーディングの選択。
Share42.comサイトアイコンを追加-おそらく、チェックボックスをオフにする必要があります。
カウンターを表示-ボタンクリックのカウンターを有効にします（jQueryが実行されている場合のみ）。
このスクリプトのインストールは非常に複雑ですが、Share42Webサイト自体に段階的に説明されています。
3.サイトにボタンをインストールする方法
サイトに投稿する必要のあるコードが2つの部分で構成されている場合（Vkontakteボタンの場合のように）、各部分は別々にインストールされます。 コードが2つの部分に分割されていない場合は、この手順をスキップできます。
コードの最初の部分をタグの間に追加する必要があります
と..。 これを行うには、WordPress管理パネルに移動し、テンプレートエディターに移動します。
テンプレートエディタで、ファイルを見つける必要があります "タイトル" （ヘッダ。php）、そうでない場合は、- 「メインテンプレート」（index.php）..。 今、あなたはタグを見つける必要があります
必要なタグが見つかったら、コードの最初の部分を投稿できます 終了タグの直前頭>他のスクリプトのコードに誤って触れないようにするためです。
コードの2番目の部分は、サイト用に選択されたソーシャルメディアボタンを表示する場所に配置されます。 コードが1つの部分のみで構成されている場合は、この操作のみを実行するだけで十分です。
ほとんどの場合、ボタンは記事の前または最後に追加されます。 もちろん、より単純なのが2番目のオプションです。 検討します。
記事の終わり（ページの本文）を見つける必要があります。 これを行うには、ファイルを編集する必要があります 「1つのエントリ」（独身。php）.
次に、記事のメインコンテンツの表示を担当するオペレーターを見つける必要があります。 私の場合、これはボタンコードの直後の「the_content」です。
同様に、記事の最初にコードを配置することができます。タイトルと記事のテキストの間の場所を見つける必要があります。
