モバイルソーシャルネットワークボタン。ソーシャルメディアボタン

2014年6月12日 10.2K

噛みませんか？そして彼らはすでに訪問者に食事を与えるために多額のお金を費やしています。サイトにソーシャルメディアボタンを設置しましたか? それは明らかだ！病気の症状はすべて明らかであり、現場は非社会的です。治療させていただきます。

Web サイトにソーシャルメディアボタンが必要なのはなぜですか?

サイトページでの利用可能状況ソーシャルボタンは必須の属性やファッションアクセサリーであるだけではありません。まず第一に、ソーシャルボタンは、リソース所有者が Web サイトのプロモーションにかかる費用を節約するのに役立ちます。この場合、プロモーションは訪問者の協力によって行われます。そして、所有者は自分のサイトを質の高いコンテンツで満たし、新規ユーザーの流入を待つことしかできません。

ただし、これらのボタンが必要なのは Web サイトの所有者だけではありません。それらの配置はソーシャルネットワーク自体にとっても重要です。これらの各ボタンは、ソーシャルポータルにつながるリンクです。そして、このリンクの交換のおかげで、それはサポートされています上級ソーシャルネットワーク自体内のユーザーアクティビティ。だからこそ人気があるソーシャルメディアすでにサイトを提供しています準備ができたコードあなたのボタン。

通常のソーシャルボタンとは何ですか?

たとえば、VKontakte ソーシャルボタンのスクリプトを考えてみましょう。彼女のコード:

コードのこの部分は、サイトページのいわゆる「ヘッダー」に配置する必要があります。このコードは、ソーシャルボタンがクリックされたときに実行されるスクリプトのアドレスを指定します。コードの 2 番目の部分は、ボタンイメージの表示を担当します。

2 番目のコードは、ボタンが表示されるページの部分に配置する必要があります。

ボタンの外観を簡単に調整できます。これを行うには、特別なセクションに移動する必要がありますテクニカルサポートソーシャルネットワーキングサイトで。ここでは、ボタンのコードの生成に応じてボタンのスタイルを設定できます。簡単な宿泊オプション

すべての人気ソーシャルネットワークのボタンを Web サイトに一度に配置できる、特別なサービスがあります。これは、それぞれに個別にスクリプトを挿入するよりもはるかに簡単です。これらのサービスの中で最も人気のあるサービスを見てみましょう。

AddThis – このサービスには英語のインターフェイスがあります。しかし同時に、世界中のあらゆるソーシャルネットワークにボタンを追加することができます。

ソーシャルボタンバーの位置は、いくつかのテンプレートで選択できます。無料版のアカウントでは、スライドサイドパネル。もあります無料版 WordPress用のプラグイン。サービスの Web サイトに登録すると、ソーシャルボタンのクリックに関する統計にアクセスできるようになります。

Share42 - 微調整機能を備えた明確でシンプルなインターフェイス外観ソーシャルボタンパネル。この場合、セットアッププロセスが伴いますステップバイステップの説明実行する必要があるアクションの説明も含まれます。したがって、このサービスは経験の浅いウェブマスターにも適しています。

もう一つのプラスこのサービスのいくつかの一般的な CMS をサポートするソーシャルボタンパネルスクリプトの生成です。ソーシャルボタンとWordPress

人気の CMS 用に多くのプラグインが作成されていますグループインストールソーシャルボタン。 Social Share Buttons for WordPress プラグインをインストールする例を見てみましょう。

この拡張のポジティブな側面は完全にロシア語インターフェース、セットアップが簡単で、Runet の人気のソーシャルネットワークに合わせて「調整」されています。

WordPressのソーシャルボタンプラグインをインストールする手順です。

1) に移動します管理パネルサイト。左側で「プラグイン」、「新規追加」タブを選択します。
2) 「プラグインのインストール」ページで、検索フィールドに拡張機能の名前を入力し、「プラグインの検索」ボタンをクリックします。

3) 検索結果で名前を見つけます必要な拡張子。次に、「インストール」リンクをクリックします。

4) アーカイブをダウンロードしてインストールした後、適切なリンクをクリックしてプラグインをアクティブ化します。

5) アクティブ化すると、左側のツールコンソールが表示されます。新しいセクション「共有ボタン」:

WordPress 用の実績のあるプラグインをさらにいくつか紹介します。

固定ソーシャルボタン – このプラグインを使用すると、サイトにフローティングソーシャルパネルを追加できます。このパネルは、上部、下部、または側面に「貼り付ける」ことができます。
HTML ソーシャル共有ボタン – このプラグインには、HTML のみで作成されたソーシャルボタンが含まれています CSSを使用してそしてhtml。

ソーシャルボタンとJoomla

このエンジンがソーシャルボタンと連携するために、多くのプラグインも作成されています。 SocButtons を例として使用して、拡張機能のインストールプロセスを見てみましょう。このプラグインの特徴:

最も一般的なエンジンのバージョンをすべてサポートします。
セットアップが簡単。
外観の特徴はボタンごとに個別に設定されます。
軽量インストールパッケージ。

手順：

1) Joomla サイトの管理部分に移動し、「Extension Manager」アイコンを選択します。
2) ここで、拡張機能をダウンロードするためのソースを決定します。

3) 拡張機能をインストールした後、「プラグインマネージャー」に移動し、有効化するだけです。インストールされた拡張機能。これを行うには、ページの上部にある緑色のアイコンをクリックします。

4) 設定するには、リスト内の拡張機能名をクリックします。このプラグインでは、各ソーシャルボタンの表示設定が個別に設定されます。

Joomla 用の実証済みの拡張機能をさらにいくつか紹介します。

ソーシャルブックマーク – このプラグインにはいくつかのバージョンが存在します。それぞれの方法で、ソーシャルパネルを特定の位置 (水平、垂直、またはフローティングにすることもできます) に配置できます。
JL のような – このプラグインは生成しません追加の読み込み外部スクリプトを使用すると、ソーシャルネットワークからの投票の統計を保持できます。

スクリプトかプラグインか?

プラグインのインストールが最も簡単で、クイックオプション。ほとんどの場合、インストール後はサイト全体が適切に動作します。ただし、エンジンのバージョンを新しいものに更新すると、すぐにすべてが崩壊する可能性があります。

ブログサイトの読者の皆さん、こんにちは。おそらくタイトルからすでに推測していると思いますが、いわゆるソーシャルボタンについて説明します。これは、状況と条件をうまく組み合わせることで、Web サイトに記事を呼び込むのに非常に役立ちます。高品質記事自体、ソーシャルネットワークやサービスからの訪問者が多数います。

ソーシャルシグナルも考慮されますサーチエンジンサイトをランキングするとき。たくさんの Twitter、Google+、Facebook (VKontakte やその他のネットワークも考慮される可能性があります) で質の高いアカウントにシェアすることで、一定のステップを上に上げることができ、おそらくトップにランクインしてそこに留まることができます。行動要因あなたを失望させません。

一般に、インターネット上のソーシャルネットワークでコンテンツを共有するためのスクリプト (ボタン) を提供するサービスは多数ありますが、そのすべてを信頼できるわけではありません (悪意のある理由で簡単にユーザーを利用したり、その他の方法で使用したりする可能性があります)。また、コードが適切に配置されておらず、サーバーのコンピューティング能力がそれほど強力ではない場合、単純に「サイトをハングアップ」する可能性があります。ただし、これらの欠点のない適切なオプションがあり、この出版物の最後にそれらをリストしました。

特定のソーシャルネットワークへのシェア数をボタン上に表示することも可能です。さらに、このブロックを使用して作成された投稿だけでなく、すべての投稿が考慮されます (データは API 経由でロードされます)。確かに、すべてのソーシャルネットワークがサポートされているわけではありません (Facebook、Google+、Moi Mir、Odnoklassniki.ru、VKontakte のみ) が、主要なもののほとんどはサポートされています。 Twitter が最近このリストから削除されたのは悲しいです。理由は... API を介したこのデータの提供を停止しました。

たとえば、ここでは、長さに制限があるため、Twitter で共有するタイトルを短くしたり (これを行う方法は以下を参照)、共有カウンターを表示するかどうかを設定したり、メニューを開く方向を設定したりできます。追加のボタンソーシャルネットワークなど。一般的には、あちこちを調べて見てください。

一般に、サイトにソーシャルネットワークをインストールすることを提案するネイティブ共有ボタン (これについては以下を参照) と比較して、Yandex ブロックは読み込み速度、コンパクトさ、インストールと構成の容易さの点で優れています。例えば、以前はTwitterの公式ボタンがサーバーの問題で読み込まれないことがよくあり、Javaで作ったスクリプトが長時間読み込まれなかったことがありました。左側のメニュー私のブログ。この問題は現在解決されている可能性がありますが、サイトの読み込み速度の最適化という点では、多くのスクリプトは常に 1 つのスクリプトよりも劣ります。

Yandex はそのイメージに非常に敏感な高収入の営利組織であるため、アクセシビリティに問題がある可能性は低いと思います。さらに、持っている場合は、これらのボタンのクリックの統計を追跡できるため、便利です。

通常サイズのアイコンを含むブロックに加えて、カウンターを含むブロックを作成することもできます。Yandex は、追加のソーシャルネットワークを含むドロップダウンメニューを追加することも提案しています。これは、必要な数のボタンを表示した後に配置されるスポイラーの下に隠されます。主要なソーシャルネットワーク (VKontakte、MoiMir、など):

このブロック (ドロップダウンメニューを使用) のボタンにカウンターを追加したい場合は、サイト上のコード (Div タグの間) にもう 1 つの属性を挿入するだけです: data-counter=""、それだけです。先ほども言いましたが、これはこれ以上簡単ではありません。以下で説明する小さなボタンにカウンターを追加することもできます。

データサービス = "vkontakte、odnoklassniki、facebook、gplus、twitter、moimir、blogger、digg、reddit、linkedin、lj"

すべてのアイコンを小さなボタンのサムネイルに置き換えることもできます。これは、ブロックを挿入するときに個人的に便利だと思いました上部このブログのすべての記事:

最初の部分には、開始と終了の SCRIPT タグに、Yandex サーバーからロードされるスクリプトへのパスが含まれており、2 番目の部分には、テンプレート内の場所に配置する必要がある挿入コード自体が含まれています。このブロックが表示されます。

Yandex から Web サイトにソーシャルボタンを挿入する方法

したがって、ソーシャルメディアボタンを表示する必要がある場所に、Div ブロックとともにスクリプト呼び出しコードを挿入します。さて、その読み込みがメインページの読み込み速度に影響を与えないように、Yandexのドキュメントに記載されているアドバイスに従って、それにasync="async"属性を追加して、それを開始しました非同期ロード脚本：

サイトのエンジンの多数のファイルの中から、最下部の部分の形成に関与するファイルを見つけるときに問題が発生する可能性があります。 HTMLコード終了タグ /BODY または Head を形成するタグを付けます。また、テーマファイル内で、(ボタン自体を配置するために) Div タグにコードを挿入する必要がある場所も見つけます。

原則として、WordPress と Joomla の両方で、これは使用されるテーマのファイルの 1 つで行われます。なぜならこのブログはWordPressで運営されているので、WordPressについてお話します。

WordPress を使用している場合、スクリプト呼び出しコードを挿入するには、フォルダーからファイル footer.php (Body 終了タグまたは header.php (そこに Head タグがあります) が見つかります) を編集のために開く必要があります。

/wp-content/messages/フォルダー名_with_theme_used/footer.php

あとはそれを貼り付けるだけです適切な場所サイトのテンプレートを使用するか、サイトページ上のボタンを含むブロックの位置を担当する Yandex ソーシャルボタンコードの 2 番目の部分を記事に直接挿入します。

ちなみに、もう一度予約しておきます。このブロックからボタンを削除したい場合は、Yandex Web サイトのコンストラクターに再度アクセスする必要はありません。このリストからそのエントリを削除するだけです (「vkontakte」など、その後にあるカンマも一緒に)。まあ、わかります...

CSS を使用してブロック内のボタンの位置を変更することもできます。

Li.ya-share2__item (背景:なし!重要;パディング:0 7px 0 7px!重要;)

なぜなら私はアダプティブを使用していますモバイルデバイス次に、画面解像度の低いデバイス用に同様の行を追加し、少し小さいインデントを設定しましたが、詳細は次のとおりです。

Li.ya-share2__item (パディング:0 3px 0 3px!重要;)

私の WordPress ブログに関しては、一般的に次のようなことが当てはまります。 Joomla では、このブロックを挿入するには、カスタム Html コードモジュールを使用して、記事テキストのすぐ下のテンプレート位置に配置するのがおそらく最も簡単です。

公式ソーシャルメディアボタン

多くのソーシャルネットワーク自体は、誰もがボタンコードをダウンロードする機会を提供しており、多くの場合、その外観や機能をカスタマイズすることもできます。たとえば、で投稿を共有するためのスクリプトコードを構成して受け取ることができます。

ご覧のとおり、かなり多くの設定があり、VKontakte ボタンの外観に加えて、シェア数を示すカウンターの表示をカスタマイズすることもできます。

Facebookボタンを取得できるようになります。ニーズに合わせて非常に柔軟にカスタマイズでき、Web サイトにコードを配置すると、碑文が自動的にロシア語に翻訳されるため、英語の碑文に混乱する必要はありません。

URL フィールドには何も挿入しないことをお勧めします。そうすれば、このコードが配置されているページが共有されます。

次のようになります。

そしてもちろん、比較的最近登場した公式Twitterボタンについても触れずにはいられません。そのコンストラクターが見つかります。当然のことながら、リツイートの数をカウントする機能が提供され、その外観を設定する機会もあります。

次に、上で説明した原則に従って結果のコードをわずかに最新化して、長いタイトルが切り取られ、共有時にユーザーにさらなる問題が発生しないようにしました。

Web サイトのソーシャルメディアボタンを取得するためのその他のオプション

すでに述べたように、ソーシャルネットワークボタン用のスクリプトを無料で取得して Web サイトに配置できる、あらゆる種類のオンラインサービスが数多くあります。それらはすべて、「心から」（Dimoxa サービスの場合のように）、他のサービスの運営に必要なデータを収集する（ApTuLike の場合のように）、または営利目的（ウイルスやその他の違法な詐欺行為）を追求しています。サイト上のトラフィック）。たとえば、以下で説明するプラグインのような、単純に有料のソリューションもあります。

この種類の中から何を選ぶべきかを言うのは難しいです。私が自分自身で試す機会があったこと、および以前にすでに書いたことについて少しお話します。

一般的には、自分で見て、比較し、選択してください。

頑張って！ブログサイトのページでお会いしましょう

");"> にアクセスすると、他のビデオも見ることができます。

興味があるかもしれません

WordPress ブログのソーシャルネットワークやブックマークに追加するためのボタンを作成します (プラグインやスクリプトなし) 可能性が高い - サイト用のスタンドアロンソーシャルボタン
Uptolike のモバイルサイト用ボタン + メッセンジャーでリンクを共有する機能 UpToLike - 拡張機能を備えたサイト用のソーシャルボタンビルダー

ここでは、「プロモーションで 8% 割引でソフトウェアを購入したい人はいますか?」というフレーズが表示されます。ユーザー自身が書いたもので、以下はソーシャルネットワーク上でサイトへのリンクがどのように表示されるかを示しています。あまり美しくないですよね？

ソーシャルネットワーク上のリンクは次のようになります。

ここで、「今日は allsoft.ru の誕生日です - 8 年目です :)」はユーザーが書いたテキストで、残りはメタタグからの情報です。これらのメタタグの詳細については、Facebook ページ (developers.facebook.com/docs/share) で読むことができます。他のソーシャルネットワークもメタタグについてよく理解しています。

このメカニズムは一般的にどのように機能しますか?
1. ユーザーがボタンをクリックすると、ウィジェットはページへのリンクをソーシャルネットワークサーバーに送信します。
2. ソーシャルサーバーネットワーク自体がこのリンクにアクセスし、ページに関する情報 (タイトル、説明、画像) を読み取ります。
3. ソーシャルサーバーネットワークはページ情報を横にキャッシュし、ソーシャルネットワークページに表示します

1 ページに異なる説明を送信する方法。
たとえば、allsoft.ru でコミックテストを含むプロモーションページを作成する場合、テストでユーザーが獲得したさまざまなポイント数に応じて、さまざまな説明をソーシャルネットワークに送信する必要がありました。ソーシャルネットワークはリンクをクリックすることでページの説明を受け取るため、説明ごとに異なるリンクが必要になります。さらに、Twitter では 140 文字しか許可されないため、別途短い説明が必要です。

New Ya.share(( element: "ya_share_normal", elementStyle: ( "type": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] ), link: "http://allsoft.ru/promo/allsoft8let/?share=normal"、serviceSpecific: ( twitter: ( title: "テスト結果: ドラゴンはほぼあなたの長所です! あなたはまだドラゴン学を教えることはできませんが、正しい道を！" ) ) ));
1. ここで、ya_share_normal はページ () 上の要素の ID です。この要素にはソーシャルボタンのあるブロックが表示されます。link はリンクです。さらに、Twitter の serviceSpecific でタイトルを示します。これは、OG のものとは異なります。タイトルメタタグ。

したがって、「3 つの異なるテスト結果とテスト外のページへの共通リンク」というタスクには 4 つのタグがあります。

上記の 4 つの JavaScript コードブロック。

ソーシャルネットワークによってキャッシュされたタイトルと説明を変更する方法。
1. Facebook にとって最善の方法があります。Facebook のデバッガーにアクセスします。

著者より: こんにちは。現在、ソーシャルネットワークは発展し、累計30億人以上が登録している。これは潜在的に非常に強力な視聴者であるため、今日は Web サイトにソーシャルメディアボタンを追加する方法を説明します。

WordPress サイトに追加する

まず言っておきますが、WordPress をお持ちの場合、最も簡単な方法は、この問題用のプラグインをインストールすることです。どれの？たとえば、私は Juiz Social Post Sharer を使用しました。一般に、プラグイン検索に「ソーシャル」という単語を入力するだけで、そこに何があるかを確認できます。ここでの唯一の利点は、おそらく何も設定する必要がないことです。

Yandex は、ボタンを自分でカスタマイズしてインストールできるページも開発しました。このページでは、必要なサービスを選択できます (約 25 個あります)。右側でブロックの外観を選択できます。これらは、ユーザーがボタンをクリックした回数を示すカウンターである可能性があります。これは、その資料が読者にとって有益かどうかを追跡するのに役立ちます。

JavaScript。ファストスタート

当然のことながら、3 つのオプションをすべて使用する必要はありません。1 つのオプションを使用するほうが良いでしょう。ただし、ブロックがページの最初と最後の両方にあるサイトを見たことがあります。

次に、記事を表示するコードが含まれるファイルを見つける必要があります。たとえば、wordpress では、通常、single.php などと呼ばれます。したがって、記事の後にボタンを含むブロックを配置する必要がある場合は、the_content という行を探してください。ここにコードを貼り付けることができます。テンプレートの開発者がコードにコメントを追加すると、非常に役立ちます。

サイトファイルはいくつかの方法で編集できます。たとえば、これをエンジン管理パネル (外観 - エディター) から直接実行します。この場合、コードは強調表示されないため、ナビゲートするのはそれほど便利ではありません。もう 1 つの方法は FTP 経由です。 FTP クライアントを使用してサイトに接続し、wp-content – テーマに移動します。ここで、現在アクティブなテンプレートを見つける必要があります。そこにアクセスして、同じ single.php を見つけるか、名前が似ているものを探します。

コードファイル自体で、検索 (Ctrl + F) を使用して行 the_content を見つけます。このコードをその後のどこかに貼り付けます。

コメントは、上のこのスクリーンショットで緑色で強調表示されているものです。ご覧のとおり、開発者は記事のテキスト自体がこの場所に表示されることを明確に示しています。これは素晴らしいことです。記事の直後にコードを貼り付けるだけで、望ましい結果が得られます。

Pluso のボタン

JavaScript。ファストスタート

Web アプリケーションの作成方法の実践的な例で JavaScript の基礎を学びます

ボタンのスタイルを選択し、背景、位置、サイズをカスタマイズできます。カウンターが組み込まれたアイコンを選択することもできます。 Pluso ボタンのもう 1 つの利点は、その見事な外観と、ほぼすべてのデザインに統合できることです。

すべての設定が完了したら、コードをコピーして、対応するブロックを表示したい場所に貼り付けるだけです。

別のオプションは Share42 です

前のオプションが気に入らない場合は、サイトにソーシャルネットワーキングボタンを追加する別の方法があります。これはshare42.comのサービスです。おそらく、作成時にはソーシャルサービスボタンが 42 個あったのに、現在は 43 個あるため、このように名付けられたと考えられます。

すべてがすでに Web サイトに段階的な説明の形式で表示されているため、プロセスについては詳しく説明しません。これらのアイコンのデザインは変更できず、サイズのみ変更できます。ただし、見た目は悪くありません。

必要なアイコンをマウスでクリックして選択する必要があります。これとは別に、ブラウザのお気に入りへの追加、RSS へのリンク、「トップに戻る」ボタンなどの興味深い機能の存在にも注目したいと思います。

次に、パネルのタイプを選択できます: 水平または垂直? 2 番目のボタンを選択すると、ボタンの数を制限できます。エンコードは UTF-8 のままにすることをお勧めします。また、サービス自体のアイコンをボタンのセットに追加して、ページからユーザーがそのサービスにアクセスして、自分自身でもこれらのボタンをインストールできるようにすることもできます。

また、RSS アイコンを追加する場合は、フィードのアドレスを指定する必要があります。ボタンのクリック数を表示したい場合は、最後の 2 つのチェックボックスをオンにする必要があります。

その下にはボタンが2つあります。最初のボタンでは、設定したソーシャルボタンがどのように見えるかを確認できます。 2 番目の方法を使用すると、スクリプトがダウンロードされます。 FTP 経由で Web サイトのルートフォルダーにアップロードする必要があります。

次の手順では、サービスページでこのフォルダーへのパスを指定します。多くの場合、site.com をドメイン名に置き換えるだけで十分です。これですべてです。残っているのはコードを挿入することだけです。最初にリソースが実行される cms を選択します。コードを挿入する場所はすでに理解しているはずです。

ソーシャルボタンを作成できる通常のサービスが他にもいくつかあることは間違いありません。また、ソーシャルボタンを追加するスクリプトやプラグインも大量にあります。今日は、私が考える最良の選択肢をリストアップしました。

さて、今日はソーシャルネットワークとサービスのボタンをインターネットプロジェクトに追加する方法を学びました。これで、あなたの有益な資料が、感謝している読者によってソーシャルネットワーク上で自動的に配布されるようになります。私にとっては以上です。

JavaScript。ファストスタート

Web アプリケーションの作成方法の実践的な例で JavaScript の基礎を学びます

ソーシャルネットワーク上のリンクは次のようになります。

モバイルソーシャルネットワークボタン。 ソーシャルメディアボタン

モバイルソーシャルネットワークボタン。ソーシャルメディアボタン