VKontakteで友達に知らせるボタンはどこにありますか。 VKontakte で CSS と JQuery を使用してダウンロードするクールな「Tell Friends」システムを作成する方法
ブログ読者の皆さん、こんにちは。 読者からの多くのリクエストに応えて、今日は、JQuery と CSS を使用してファイルをダウンロードするクールな「友達と共有」システムを VKontakte 上に作成します。
皆さん、このシステムは、もちろん、あなたがダウンロードしようとしているものやトラフィックの種類に応じて、あなたのリソースへのリンクの数が何倍にも増加すると言いたいのです。
また、このシステムは、Twitter 上のリンクの数を増やすクールな「」システムに非常に似ていることも言いたいと思います。 この場合、ほとんどすべてが同じですが、私が少し編集しただけです。 そして最終的にはすべてうまくいきました:-)
さて、システム自体の話に移りましょう。
VKontakte の「友達にファイルをダウンロードする」システムはどのように機能しますか?ほら、それほど難しいことではありません。 :-)
どうやってするの？まず、ボタンのあるページの簡単なテンプレートを描きました。 これは例で見ることができ、また、ソース コードで利用できるので、Web サイトで使用することもできます。 ユーザーはこのページにリダイレクトされ、ファイルのダウンロードという重要な操作を実行できるようになります。
次に、このテンプレートを作成したところ、次のものが得られました。
ご覧のとおり、ページはまったく大きくなく、複雑でもありません。
主なことはタグ間の先頭にあり、次のスクリプトを追加します。
jquery.min.js は JQuery ライブラリです。すでにお持ちの場合は再インストールする必要はありません。
jquery.vkAction.js - このスクリプトは VKontakte ウィンドウを開きます。
script.js - ただし、このスクリプトは「ダウンロード」ボタンをアクティブにします。
次に、CSS スタイルを追加してページを少し装飾しましょう。
CSSスタイルで示されているすべての画像は、img フォルダー内のソース コードにあります。
* (マージン: 0; パディング: 0; ) 本体 (マージン-トップ:-50px; 幅: 100%; 高さ: 100%; カラー:#555; 背景: url(img/body.jpg) 繰り返し 100% 0;フォントファミリー: "Ubuntu"、サンセリフ; フォントサイズ:0.85em; 行の高さ:135%; ul (リストスタイル:なし; ) a (色: #538e28; テキスト装飾:なし; ) a:hover ( color: #69b432 ) #wrapper (position:relative; border:0px Solid #d6d6d6; width: 1004px; height: 787px; background: url(img/bodycont.jpg) 50px 0px no-repeat; margin: 0自動; ) #copy( 位置:絶対; 左:330px; 下:0px; ボーダー:0px ソリッド #d6d6d6; フォントサイズ:11px; カラー:#bbb; ) #テキスト (位置:絶対; 左:0px; 上: 150px; ボーダー: 0px ソリッド #d6d6d6; 背景: url(img/text.png) 繰り返しなし; ボーダー: 0px ソリッド #d6d6d6;イーズイン; Webkit-transition: すべて 0.2 秒 0.01 秒 ) #vk:hover (不透明度: 1.0; ) #str1 (背景: url(img/str1.png) 繰り返しなし; 位置: 絶対; 左:140px; 上:290px; 境界線:0px 実線 #d6d6d6; 幅: 262px ; 高さ: 262px; ) #str2 (背景: url(img/str2.png) 繰り返しなし; 位置: 絶対; 右: 100px; 境界線: 0px ソリッド #d6d6d6; 幅: 262px; 高さ: 262px; ) .downloadButton(位置:絶対; 左:373px; トップ:580px; 幅:253px; 高さ:98px; オーバーフロー:非表示; 背景:url("img/dbuthov.png") 繰り返しなし; カーソル:デフォルト; ) 。 downloadButton.active(background:url("img/dbut.png") no-repeat; width:253px; height:98px;cursor:pointer; -moz-transition: すべて 0.2 秒 0.01 秒イーズイン; -o-transition : すべて 0.2 秒 0.01 秒イーズイン; -webkit-transition: すべて 0.2 秒 0.01 秒イーズイン; ) .downloadButton.active:hover( opacity: 0.9; )
ここですべてが理解できることを願っています。 まず、1004 x 787 ピクセルのブロックを作成し、そこに表示されるすべてのオブジェクトを絶対位置で配置しました。 これらは、VKontakte ボタンとダウンロード ボタン、および矢印と碑文そのものです。
何かわからないことがあれば、コメントで質問してください。
それでは、スクリプトに直接進みましょう。
JS(function($)( var win = null; $.fn.tweetAction = function(options,callback)( // ポップアップ ウィンドウの標準パラメータ: options = $.extend(( url:window.location.href ) 、オプション) ; return this.click(function(e)( if(win)( e.preventDefault(); return; ) var width = 550、height = 350、top = (window.screen.height - height)/2 , left = (window.screen.width - width)/2; var config = [ "scrollbars=yes","resizable=yes","toolbar=no","location=yes", "width="+width, "height= "+height,"left="+left, "top="+top ].join(",") // VKontakte API からのポップアップ ウィンドウ: win = window.open("http:/ /vkontakte.ru/share .php?"+$.param(options), "TweetWindow",config); (function checkWindow())( try( // このコードを try/catch に入れる必要があります: if(! win || win.closed) ( throw "Closed!"; ) else ( setTimeout(checkWindow,100); ) ) catch(e)( win = null; callback(); ))(); ; )(jQuery);
ご覧のとおり、このリンク http://twitter.com/intent/tweet? を変更しただけです。 これは http://vkontakte.ru/share.php? です。 つまり、Twitter のリンクを VK のリンクに置き換えました。 それ以上の変化はありませんでした。
では、次のスクリプトがどのようになるかを見てみましょう。
スクリプト.js
$(document).ready(function())( // tweetAction プラグインを使用します。 // サポートされているパラメータの完全なリストについては、http://dev.twitter.com/pages/intents#tweet-intent を参照してください $( " #tweetLink").tweetAction(( title: "JQuery と CSS を使用してダウンロードするための VKontakte 上の "Tell Friends" システムを作成する方法", url: "http://site/", description: "ここからダウンロードできますVKontakte でクールな「システム友達にダウンロードするように伝えて、それがどのように機能するか調べてください」 ),function())( // ウィンドウが閉じるとき: $(".downloadButton") .addClass("active") 。 attr("href","ファイルへの直接リンク") ));
重要このスクリプトをサイトに合わせて編集する必要があります。
タイトルフィールド: 連絡先に表示される投稿のタイトルを入力する必要があります。
説明フィールド: 投稿の説明を指定する必要があります。
以上です、皆さん。 アイデアとスクリプトを提供してくれたウェブサイトtutorialzine.comに感謝したいと思います。 それでは、またお会いしましょう。 :-)
ソーシャル ネットワークが Web サイトを宣伝し、新しい訪問者を呼び込むのにどのように役立つかについて。 しかし、今回は理論から実践に移り、VKontakte、Facebook、Twitter、Odnoklassniki、MoiMir、Google+、QIP などの人気のソーシャル ネットワークから Web サイトに「いいね！」ボタンを配置する方法について詳しく話したいと思います。ヤンデックス。
「いいね」とは何ですか?また、その用途は何ですか?
ただし、インターネット スラングでは、「いいね」はまったく異なる意味を持ち、次のようになります。
サイトへのトラフィックが 1 日あたり少なくとも 20 アクセスである場合は、次の理由からそのようなボタンをサイトに配置することを検討する必要があります。
- 「いいね！」はソーシャル ネットワークからの新しい訪問者を引き付けます。ブログ上のこの投稿またはその投稿に「いいね！」すると、ユーザーはソーシャル ネットワーク上の自分のページでその投稿について話すことができます。
- サイト訪問者を理解することができます。「いいね！」の数がサイト内の他のページを大幅に上回っている記事やサイトのページを分析することで、訪問者が何をより好むかを理解できます。
- これにより、検索エンジンでサイトが宣伝されます。検索エンジンは長い間、ソーシャル ネットワークとのやり取りを学習してきました。そのため、「いいね！」が SEO にその痕跡を残します。
「いいね！」という褒め言葉だけでも、それがサイトにとってどれほど有益で重要であるかを理解するのに十分だと思います。 したがって、安全にインストール手順に進むことができます。
手順へのクイックジャンプ
VKontakteの「好き」
1. に移動します ウィジェットをサイトに接続するためのページ.
3. ウィジェットの外観を好みに合わせてカスタマイズし、既製のコードを取得します。
4. ウィジェット コードをサイト ページ テンプレートに挿入する必要があります。
Facebookからの「いいね！」
1.「いいね！」ボタンの設定ページに移動します。
2. ウィジェットを設定し、「コードを取得」ボタンをクリックします。
3. 表示されたウィンドウで、受信したコードをコピーし、サイト テンプレートに貼り付けます。
ツイッターからの「ツイート」
1. に進みます。
2. ボタンのタイプを選択します。
3. ボタンの外観をカスタマイズします。
4. 結果のコードをコピーしてテンプレートに貼り付けます。
"クラス！" オドノクラスニキから
「クラス！」ボタンを取得するのもさらに簡単です。 ソーシャルメディアの「いいね！」ボタンとともに。 「MyMir」ネットワーク。 これはまさに次にお話しすることです。
2 in 1: MoyMir の「いいね」 + Odnoklassniki の「クラス」
1.「いいね！」「Cool!」ウィジェットの設定ページに移動します。 。
2. ウィジェットを好みに合わせてカスタマイズします。
3. 結果のコードをコピーしてサイト テンプレートに貼り付けます。
Google+ からの「+1」
1. に移動します 「+1」ボタン設定ページ.
2. ボタンの外観をカスタマイズします。
3. 受信したコードをコピーし、テンプレートに貼り付けます。
オールインワン: 怠け者向け!
すべてのソーシャル ネットワークを個別に設定するのが面倒な場合は、すべての一般的なソーシャル ネットワークに共有機能 (「友達に教える」機能) を備えたユニバーサル ボタンを配置する機会を提供する既製のソリューションとスクリプトを使用できます。 ここではサイトとの強いつながりはなく、このようなボタンは SEO 効果よりも便宜のために作成されていることに注意してください。
ボタン コードを取得して Web サイトに貼り付けます。
受け取ったコードをどこに挿入するか?
Web サイトに「いいね」ボタンを配置するには、まず、Web サイトのどのページに配置するのが最も収益性が高く、最適であるかを決定する必要があります。 サイトにボタンを配置するには次のオプションがあります。
- ホームページ;
- サイトのすべてのページ。
- 投稿・資料ページ。
車輪を再発明してフォーラムの投稿や連絡先情報ページなどにボタンを配置する必要はありません。そのようなボタンは好まれません。 ボタンを挿入する場所を決定したら、サイトのコントロール パネル (your-site.ucoz.ru/admin) にログインし、次の場所に移動します。
- ページエディター → サイトページの管理 → サイトのメインページを編集(サイトのメインページにのみボタンコードを配置したい場合);
- デザイン管理 → モジュール（オプション） → 素材のページとそのコメント(素材ごとに「いいね」ボタンを配置したい場合);
- デザイン管理→グローバルブロック「サイトのトップ」(サイトのすべてのページにコードを配置したい場合)。
受け取ったボタン コードをこれらのテンプレートのいずれかに貼り付け、変更を保存します。 この点を、「これは面白い！」ボタンを配置するという具体的な例で見てみましょう。 公式ブログ uCoz のエントリーの横にあります。
サイト読者の皆様、こんにちは。
この記事では、ウェブサイトに「いいね！」「クラス」「友達に教える」などのボタンを追加する方法を説明します。
また、サイトの任意のページにコメントを設置する方法についてもヒントを提供します。
上記のボタンを Web サイトにインストールするには、いくつかの方法があります。 それぞれを見てみましょう。
それぞれのサービスを見ていきましょう。
連絡中
注意: ボタンをインストールするには登録が必要です。 このセクションへのリンクはソーシャル ネットワークの一番下にあります。 ネットワーク。
これで、空想飛行を完全に自由に楽しむことができます。 必要なサービスをインストールできます。 「いいね！」ボタンを選択しました。
選択したセクションをクリックすると、セットアップ ウィザードが表示されます。
ここで、セットアップ ウィザードについて少し説明します。 各開発者は独自の apiId を持っています。 生成されたコードを使用して、ウィンドウにその存在が存在することを必ず確認してください。
また、フォームの上部に Web サイトのアドレスを忘れずに記入してください。
全て！ あとは、スクリプトの半分をページの先頭に配置し、残りの半分をボタンを配置する本文の場所に配置するだけです。
私のウェブサイトでそれがどのように機能するかを確認できます。 ページの先頭。
オドノクラスニキと私の世界
ここでボタンの外観をカスタマイズします。 そしてコードをコピーします。 このコードは 2 つの部分に分割されておらず、ボタンを配置する場所にすぐに挿入する必要があります。
実際に試してみてください。
Yandex に行ってみましょう:)
ここでのすべては、前に説明した方法よりもさらに単純です。
必要なサービスとその表示を選択し、結果のコードをサイトに貼り付けるだけです。
それだけです？ とても簡単？
不明な点がある場合はコメントに書き込んでください。
|
親愛なる読者の皆さん、この記事では次のことを取り上げます。
|
毎日 (または毎日ではないかもしれませんが) コンピューターの電源を入れ、ブラウザーを開いて、インターネットを積極的に使用します。 このネットワークがどのように機能するか疑問に思ったことはありますか? いいえ？ それでは、サイトの作成者が状況を説明しましょう。 |
最近では、Web サイト開発の要件において、(最初ではないにしても) 2 人に 1 人の顧客が、必ずソーシャル ネットワークに接続することを求めています。 Web サイト上の「ソーシャル」ボタンは、対象ユーザーを引き付け、コンテンツを配信し、PR するための最も重要なツールです。 しかも完全に無料です！
ソーシャル ネットワークは、サイトに配置するためのボタンとウィジェットのコードを提供し、それらをサイト管理システムにインストールするための手順を提供します。 どの CMS (オペレーティング システム) でもインストールできますが、重要なことは、それらを Web サイトのデザインに調和させることです。
特徴や機能は何ですか?サイトが人気のソーシャル ネットワークでコミュニケーションを行う人々を対象としている場合。 たとえば、Vkontakte、Twitter、Instagram、Facebook、Google+、Pinterest などのネットワークをすべてカバーしたい場合は、サイズやデザインが異なる可能性があるため、それぞれのボタンを別々にインストールしないようにする必要があります。 、アグリゲーターサービスを使用することをお勧めします。 これらは、サイト訪問者が使用するソーシャル ネットワークに関係なく、友人と情報をすぐに共有できるシンプルで便利なツールです。 以下では、最も人気のあるサービスを見ていきます。
ソーシャル メディア ボタン Pluso を共有する
読書時間: 5 分
統合された電子メールとソーシャル メディア マーケティング キャンペーンにより、より多くの視聴者にリーチし、ROI (投資収益率) を向上させます。 Mailigen の統合マーケティング プラットフォームを使用して、電子メールやソーシャル メディアを通じてクライアントにリーチする方法を学びます。
メールに「友達に教える」ソーシャル メディア ボタンを追加するのはなぜですか?デジタル資産管理会社 WebDAM による 2014 年のマーケティング戦略に関する調査によると、これには次の 3 つの理由があります。
- 2013 年には、営業担当者の 43% が LinkedIn を通じて購入者を見つけました。
メールマガジン作成の第4段階になったら、SNS共有用のブロックをボタンを設置したい場所にドラッグします。
ステップ2この後、新しいウィンドウが開き、必要な設定をすべて行うことができます。
- 「メールアーカイブ」を選択すると、メールの受信者はレター全文の内容をソーシャルネットワーク上で共有できるようになります。 ニュースレターのタイトルは紹介文として使用されます。
- 「その他のリンク」を選択すると、共有したいコンテンツへのリンクを入力できます。 たとえば、これはブログの新しい記事である可能性があります。
- 次に、ボタンの横に配置するテキストを入力し、ボタンのサイズとボタン間の距離を選択します。