一見したところ-ここで特別なことは何ですか-完成したhtml / jsコードを入れて準備ができていますか？ しかし、微妙な点は細部にありました。1つの社会の場合はどうでしょう。 あるテキストをネットワークに送信し、別のテキストを別のテキストに送信する必要がありますか？ 写真と説明をすべてのネットワークに転送する方法は？ また、1ページにテキストと画像のいくつかの異なるオプションがある場合はどうなりますか？ ソーシャルネットワークで既にキャッシュされているリンク情報を消去する方法は？ これらすべての質問に対する答えを見つける必要がありましたが、この記事から学ぶことができます。
最も簡単なオプション：
サイトのページに「共有」ブロックを配置するには、http：//api.yandex.ru/share/に移動し、ウィザードを使用してボタン付きの目的のタイプのウィジェットを作成します。次のようなコードを取得します。
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div>
このコードを使用すると、サイトのユーザーはネットワーク上のリンクを共有できます。リンクは次のようになります。
ここで、「だれが株式を8％割引でソフトウェアを購入したいのか」というフレーズは、ユーザー自身が書いたもので、以下はソーシャルネットワークでのサイトへのリンクの様子です。 あまりきれいではありませんよね？
ソーシャルネットワークで写真、キャプション、説明を共有します。
これは、たとえば次のメタタグを使用して実行できます。
<meta property="og:image" content="http://allsoft.ru/bitrix/templates/allsoft2011/images/8let/dragon_normal.jpg" /> <meta property="og:title" content=" – !" /> <meta property="og:description" content=" : «»! , !" />
ソーシャルネットワーク内のリンクは次のようになります。
ここで、「今日はallsoft.ruの誕生日-8年:)」はユーザーが作成したテキストで、残りはメタタグからの情報です。 これらのメタタグの詳細については、Facebookページdeveloper.facebook.com/docs/shareを参照してください。他のソーシャルネットワークもこれらを完全に理解しています。
このメカニズムの仕組み：
1.ユーザーがボタンをクリックすると、ウィジェットはページリンクをソーシャルネットワークサーバーに渡します。
2.ソーシャルサーバー ネットワーク自体がこのリンクにアクセスし、ページに関する情報（タイトル、説明、画像）を読み取ります。
3.ソーシャルサーバー ネットワークはページに関するサイド情報をキャッシュし、ソーシャルネットワークのページに表示します
開発中に発生する可能性のある問題：
1.外部からアクセスできない、http-authorizationによって閉じられた、またはローカル-ソーシャルなサーバー上のサイトを開発している場合。 ネットワークはページに関する情報を取得できないか、リンクをまったく共有できません（たとえば、「Odnoklassniki」はこのように動作します）、またはタイトルと説明なしで表示します（最初の最も単純なバージョンの図のように）
2.ソーシャルネットワークサーバーがページに一度アクセスすると、ページに関する情報がキャッシュされます。したがって、タイトルと説明を変更し、サイトの側で変更する場合、ソーシャルネットワークでは変更されません。以前にキャッシュされた情報を使用します。 （これを修正する方法-以下を参照してください。）
1ページに異なる説明を転送する方法。
たとえば、allsoft.ruでコミックテストでプロモーションページを作成する場合、テストでユーザーが採点したさまざまなポイント数が、ソーシャルネットワークにさまざまな説明を送信する必要がありました。 ソーシャルネットワークのページの説明はリンクをクリックすることで受け取るため、説明ごとに異なるリンクが必要です。 さらに、Twitterでは140文字しか埋め込むことができないため、別の短い説明が必要です。
これを行うには：
1.テスト結果が異なる場合、Yandexの「共有」ブロックAPIに異なるリンクを転送する必要があります。 この例では、http：//allsoft.ru/promo/allsoft8let/？Share = normal、 allsoft.ru / promo / allsoft8let /？share = high 、 allsoft.ru / promo / allsoft8let /？share = lowおよび http： //allsoft.ru/promo/allsoft8let/テスト外のブロック用。
2.したがって、URLのスクリプトページに渡されるパラメーターに応じて、ページは異なるメタタグで形成する必要があります。
3. Twitterの個別の説明を送信するには、タグではなくjs-codeの別のYandex「Share」APIブロック形式を既に使用する必要があります。
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：titleメタタグとは異なるタイトルを指定します。
したがって、「3つの異なるテスト結果に加えて、テスト外のページへの一般的なリンク」タスクには、4つのタグがあります。
<span id="ya_share_normal"></span> <span id="ya_share_high"></span> <span id="ya_share_low"></span> <span id="ya_share"></span>
上記のJavaScriptの4ブロックのコード。
キャッシュされたソーシャルネットワークのタイトルと説明を変更する方法。
1. Facebookに最適な方法があります。デバッガーdeveloper.facebook.com/tools/debugにアクセスして、リンクのURLを入力します。ページに関する情報が表示されると同時に、キャッシュがリセットされ、[共有]ボタンに影響します。
2.また、推奨されませんが、1）リンクにパラメーターを追加しますか？V = 2 2）bit.lyおよび同様のサービスを使用してリンクを削減します。 長所と短所の詳細については、こちらを参照してください（ umairj.com/146/how-to-clear-facebook-shares-cache
3.残念ながら、Facebookなどの方法は、他のソーシャルネットワークにはありません。 したがって、共有ブロックのリンクまたはAPIをYandexから変更する方法2を使用する必要があります。
new Ya.share({ element: 'ya_share', elementStyle: { 'type': 'none', 'quickServices': ['facebook','twitter','odnoklassniki','vkontakte','moimir'] }, title: 'Allsoft 8 ! — 11 31 !', description: ' ', link: 'http://allsoft.ru/promo/allsoft8let/', serviceSpecific: { twitter: { title: 'Allsoft 8 ! — 11 31 !' } } });
APIを介して別のタイトルと説明を転送する場合、ソーシャルネットワークは以前にメタタグからキャッシュされた情報を更新します（Facebookを除く-しかし、その方法はあります1）
また、画像を転送して画像を変更することもできます。
まあ、それがすべてのようです。 allsoft.ru/promo/allsoft8letへようこそ。急いでこのリンクを友達と共有してください。今日がアクションの最終日です！
作成者： Vladimir Hvorostov-Softline Web Developer