با سلام ، خوانندگان عزیز وبلاگ. به درخواست خوانندگان امروز ، ما یک سیستم اشتراک گذاری با دوستان باحال را در VK ایجاد می کنیم تا یک فایل با استفاده از JQuery و CSS بارگیری شود.
دوستان ، می خواهم بگویم که این سیستم تعداد پیوندها به منابع شما را بارها و بارها افزایش می دهد ، البته ، بسته به این که بستگی به آنچه برای بارگیری و ترافیک شما ارائه می دهید وجود دارد.
من هم می خواهم این را بگویم این سیستم بسیار شبیه سیستم سرد "" است که به نوبه خود تعداد پیوندها را در توییتر افزایش می دهد. در این حالت ، تقریباً همه چیز یکسان است ، اما تعداد زیادی توسط من ویرایش نشده است. و در پایان ، همه چیز فقط خوب شد :-)
خوب ، حالا بیایید به سمت خود سیستم حرکت کنیم.
برای بارگیری یک فایل ، به سیستم Vkontakte به دوستان بگویید
چگونه کار می کند؟
می بینید ، کار چندان سختی نیست :-)
چطور انجام دادن
برای مبتدیان ، یک الگوی صفحه ساده را با یک دکمه ترسیم کردم. شما می توانید آن را در مثال مشاهده کنید و همچنین در سایت خود از آن استفاده کنید ، در منبع موجود است. در این صفحه کاربر را پرتاب خواهد کرد تا بتواند عملیات ارزشمند بارگیری فایل را در آنجا انجام دهد.
سپس من این الگوی را ایجاد کردم و این همان چیزی است که من بدست آورده ام:
همانطور که مشاهده می کنید ، به هیچ وجه یک صفحه بزرگ و پیچیده نیست.
نکته اصلی در ابتدا بین برچسب ها
و اسکریپت های زیر را اضافه کنید:
jquery.min.js - این یک کتابخانه jQuery است ، اگر در حال حاضر ارزش نصب مجدد آن را دارید ، لازم نیست
jquery.vkAction.js - این اسکریپت یک پنجره VKontakte ایجاد می کند.
اسکریپت - اما این اسکریپت دکمه "بارگیری" را فعال می کند.
حال اجازه دهید تعداد زیادی سبک CSS اضافه نکنیم تا صفحه خود را زیاد تزئین نکنیم.
CSS
دوستان ، تمام تصاویری که در استایل نشان داده شده است می توانید در منابع موجود در پوشه img پیدا کنید.
* (حاشیه: 0؛ بالشتک: 0؛) بدن (حاشیه-بالای: -50px ؛ عرض: 100٪ ؛ ارتفاع: 100٪ ؛ رنگ: # 555؛ زمینه: url (img / body.jpg) 100٪ 0 تکرار کنید؛ font-family: "Ubuntu"، sans-serif؛ font-size: 0.85em؛ line-height: 135٪؛) ul (لیست سبک: هیچ؛) a (رنگ: # 538e28؛ متن-دکوراسیون: هیچ؛) a: hover (رنگ: # 69b432) #wrapper (موقعیت: نسبی ؛ مرز: 0px جامد # d6d6d6؛ عرض: 1004px ؛ ارتفاع: 787px؛ زمینه: url (img / bodycont.jpg) 50px 0px بدون تکرار ؛ حاشیه: 0 خودکار؛) # کپی (موقعیت: مطلق؛ سمت چپ: 330px؛ پایین: 0px؛ حاشیه: 0px جامد # d6d6d6؛ اندازه قلم: 11px؛ رنگ: #bbb؛) #text (موقعیت: مطلق ؛ سمت چپ: 0px؛ بالا: 150px؛ مرز: 0px solid # d6d6d6؛ عرض: 1004px؛ ارتفاع: 157px؛ زمینه: url (img / text.png) بدون تکرار ؛ حاشیه: 0 خودکار؛) #vk (موقعیت: مطلق ؛ سمت چپ: 370px؛ بالا: 300px؛ مرز: 0px solid # d6d6d6؛ عرض: 262px؛ ارتفاع: 262px؛ opacity: 0.5؛ -moz-tranzicion: all 0.2s 0.01s سهولت در؛ -o-انتقال: همه 0.2s 0.01s سهولت در؛ - انتقال وب سایت: همه 0.2s 0.01s سهولت در؛ ) #vk: hover (opacity: 1.0؛) # str1 (زمینه: url (img / str1.png) بدون تکرار ؛ موقعیت: مطلق ؛ سمت چپ: 140px؛ top: 290px؛ مرز: 0px solid # d6d6d6؛ عرض: 262px ؛ ارتفاع: 262px؛) # str2 (زمینه: url (img / str2.png) بدون تکرار ؛ موقعیت: مطلق ؛ درست: 100px؛ top: 450px؛ مرز: 0px solid # d6d6d6؛ عرض: 262px؛ ارتفاع: 262px؛ ) .downloadButton (موقعیت: مطلق ؛ سمت چپ: 373px؛ top: 580px؛ عرض: 253px؛ ارتفاع: 98px؛ سرریز: پنهان؛ پس زمینه: url ("img / dbuthov.png") تکرار نشده؛ مکان نما: پیش فرض؛). downloadButton.active (زمینه: url ("img / dbut.png") بدون تکرار ؛ عرض: 253px ؛ ارتفاع: 98px ؛ مکان نما: اشاره گر ؛ -موز-گذار: همه 0.2s 0.01s سهولت در ، -o-انتقال : همه 0.2s 0.01s سهولت در ؛ -webkit انتقال: همه 0.2s 0.01s سهولت در ؛) .downloadButton.active: Hover (کدورت: 0.9 ؛)
امیدوارم همه چیز در اینجا برای شما روشن باشد. برای شروع ، من یک بلوک 1004 در 787 پیکسل در ابعاد ساختم ، که در آنصورت با قرار گیری مطلق ، تمام اشیاء را که می بینید قرار دادم. اینها دکمه های VKontakte و بارگیری و همچنین پیکان ها و کتیبه ها هستند.
اگر چیزی برای شما مشخص نیست ، در نظرات بپرسید.
حالا بیایید مستقیم به اسکریپت ها برویم.
جی اس
(تابع ($) (var win \u003d null؛ $ .fn.tweetAction \u003d تابع (گزینه ها ، پاسخ به تماس)) (// پارامترهای استاندارد برای پنجره بازشو: گزینه ها \u003d $ .extend ((url: windows.location.href) ، گزینه ها)) ؛ این.کلیک کنید (عملکرد (e) (اگر (برنده شوید) (e.preventDefault () ؛ بازگشت ؛) var عرض \u003d 550 ، ارتفاع \u003d 350 ، بالا \u003d (windows.screen.height - ارتفاع) / 2 ، سمت چپ \u003d (windows.screen.width - width) / 2؛ var config \u003d ["scrollbars \u003d بله" ، "resizable \u003d بله" ، "نوار ابزار \u003d نه" ، "مکان \u003d بله" ، "عرض \u003d" + عرض ، "قد \u003d "+ height" ، "left \u003d" + left "، top \u003d" + top] .join ("،")؛ // پنجره پاپ آپ از VK API: win \u003d windows.open ("http://vkontakte.ru/share .php؟ "+ $. param (گزینه ها) ،" TweetWindow "، پیکربندی)؛ (check check windows ()) (سعی کنید (// لازم است که این کد را امتحان کنید / گرفتن: اگر (! برنده || win.closed) (پرتاب "بسته!"؛) دیگری (setTimeout (checkWindow ، 100)؛)) گرفتن (e) (win \u003d null؛ پاسخ به تماس ()؛))) ()؛ e.preventDefault ()؛))))) ) (jQuery)؛
همانطور که می بینید ، در اینجا من فقط این پیوند http://twitter.com/intent/tweet را تغییر داده ام؟ در این یکی http://vkontakte.ru/share.php ؟. به عبارت دیگر ، لینک از توییتر با پیوند VK جایگزین شد. همه چیز ، تغییر دیگری رخ نداد.
حالا بیایید ببینم چه فیلمنامه ای را دریافت کردم.
اسکریپت
$ (سند). از قبل (تابع () (// با استفاده از افزونه tweetAction. برای لیست کاملی با پارامترهای // پشتیبانی شده ، به http://dev.twitter.com/pages/intents#tweet-intent $ مراجعه کنید. " #tweetLink "). tweetAction ((عنوان:" نحوه ساختن سیستم "به دوستان خود بگویید" در VK برای بارگیری از با استفاده از جی کوئری و CSS "، url:" http: // site / "، توضیحات:" در اینجا می توانید سیستم جالب "بگویید به دوستان" را در VKontakte برای بارگیری بارگیری کنید ، و همچنین بدانید که چگونه کار می کند ") ، عملکرد () ((هنگامی که پنجره بسته می شود: $ (". downloadButton") .addClass ("فعال") .attr ("href" ، "پیوند مستقیم پرونده")؛))؛ ))؛
مهم
شما باید این اسکریپت را برای سایت خود ویرایش کنید.
در زمینه عنوان: باید نام پست را وارد کنید ، که باید در مخاطب نمایش داده شود.
در زمینه شرح: شما باید توضیحی از پست را مشخص کنید.
این همه دوست هستند می خواهم از ایده tutorialzine.com برای ایده و اسکریپت ها تشکر کنم. خوب ، به زودی می بینم :-)
سلام به همه خوانندگان سایت سایت اینترنتی
در این مقاله به شما خواهم گفت که چگونه دکمه های Like، Class، Tell Friends و غیره را به وب سایت خود وصل کنید.
من همچنین به نحوه تنظیم نظرات در هر صفحه از سایت خود اشاره خواهم کرد.
روش های مختلفی برای نصب دکمه های فوق در وب سایت شما وجود دارد. بیایید به هریک از آنها نگاه کنیم:
- به سایت منبعی بروید که از آن می خواهید یک دکمه داشته باشید. بعد ، دنباله دستورالعمل های تولید ، این بخش را برای توسعه دهندگان و از قبل در آنجا پیدا کنید کد html برای جاسازی در سایت
- از خدمات فوق العاده شرکت Yandex استفاده کرده و مانند پنل خاصی تولید کنید.
بیایید به هر سرویس نگاه کنیم.
در تماس با
توجه به تنظیم دکمه ای که باید ثبت نام کنید! پیوند این بخش در انتهای اجتماعی است. شبکه.
اکنون شما آزادی کاملی برای تخیل دارید. شما می توانید خودتان هر خدمتی را که می خواهید نصب کنید. دکمه "مانند" را انتخاب کردم.
پس از کلیک روی بخش انتخابی ، جادوگر تنظیم را مشاهده خواهید کرد.
حالا کمی در مورد جادوگر راه اندازی. هر توسعه دهنده apiId مخصوص به خود را دارد. با کد تولید شده حتماً در دسترس بودن آن را در پنجره بررسی کنید.
همچنین فراموش نکنید که آدرس سایت خود را در بالای فرم مشخص کنید.
همه! اکنون باقی مانده است که نیمی از فیلمنامه را در قسمت صفحه خود قرار دهید ، و نیمی دیگر در بدن ، جایی که می خواهید دکمه باشد.
در اینجا می توانید نحوه عملکرد آن در سایت من را بررسی کنید. در بالای صفحه.
همکلاسی ها و دنیای من
و درست در اینجا ما در حال تنظیم هستیم ظاهر دکمه ها. و سپس کد را کپی کنید. این کد به دو قسمت تقسیم نمی شود ، باید بلافاصله در محلی که می خواهید دکمه باشد قرار داده شود.
امتحان کنید عمل.
ما برای بازدید از Yandex می رویم :)
در اینجا این است که هنوز ساده تر از ما به روش هایی است که قبلاً بررسی کردیم.
ما به سادگی خدمات لازم را انتخاب می کنیم ، آنها را نمایش می دهیم و کد نتیجه را در سایت قرار می دهیم.
آیا این همه است؟ خیلی ساده؟
اگر چیزی مشخص نیست در نظرات بنویسید.
|
سلام خواننده عزیز ، در این مقاله به تجزیه و تحلیل خواهیم پرداخت:
|
هر روز (و شاید هر کدام) کامپیوتر را روشن نکنید ، مرورگر را باز کنید و از اینترنت فعال استفاده کنید. آیا تاکنون فکر کرده اید که چگونه این شبکه کار می کند؟ نه؟ سپس ، اجازه دهید نویسنده سایت توضیح دهد که شرایط چگونه است. |
در مورد چگونگی شبکه های اجتماعی می تواند به ارتقاء یک سایت کمک کند و بازدیدکنندگان جدیدی را به آن وارد کند. اما این بار می خواهم از تئوری به تمرین حرکت کنم و بیشتر در مورد چگونگی قرار دادن دکمه های محبوب "مانند" در وب سایت خود صحبت کنید شبکه های اجتماعیمانند: VKontakte ، Facebook ، Twitter ، Odnoklassniki ، MoiMir ، Google+ ، QIP و Yandex.
"لایک" چیست و کاربرد آنها چیست؟
با این حال ، در زبان عامیانه اینترنتی ، "لایک" به معنای کاملاً متفاوت است و اینگونه به نظر می رسد:
اگر میزان ترافیک سایت شما حداقل 20 بازدید در روز است ، پس باید در مورد قرار دادن این دکمه ها در سایت خود فکر کنید ، زیرا:
- "دوست دارد" بازدید کنندگان جدید را جذب کنید از طریق شبکه های اجتماعی: "مانند" این یا آن ورودی را در وبلاگ خود ، کاربر می تواند در مورد آن در صفحه خود در شبکه اجتماعی بگوید؛
- تو می توانی بازدید کنندگان را درک کنید از سایت شما: تجزیه و تحلیل مقالات یا صفحات سایت ، تعداد "لایک" های آنها به طور قابل توجهی از صفحات دیگر سایت شما فراتر می رود ، می فهمید که بازدید کنندگان شما چه چیزی را دوست دارند.
- این هست ترویج وب سایت در موتورهای جستجو: موتورهای جستجو مدت هاست که تعامل با شبکه های اجتماعی را یاد گرفته اید ، به همین دلیل "لایک" نشان خود را در سئو به جای می گذارد.
فکر می کنم تعارفات "لایک" برای درک این سایت چقدر مفید و مهم است. بنابراین ، می توانید با خیال راحت به دستورالعمل های نصب بروید.
پرش سریع به دستورالعمل ها
"مانند" از VKontakte
1. قابل اعتماد و متخصص صفحه ای که ویجت را به سایت شما وصل می کند.
3. ویجت را به سلیقه خود سفارشی کرده و یک کد آماده تهیه کنید:
4. کد ویجت باید در قالب صفحه سایت وارد شود.
فیس بوک "لایک"
1. به صفحه تنظیمات "مانند" بروید.
2. ویجت را پیکربندی کنید و روی دکمه "دریافت کد" کلیک کنید:
3. در پنجره ای که باز می شود ، کد حاصل را کپی کرده و آن را در قالب سایت بچسبانید.
توییت توییت
1. قابل اعتماد و متخصص.
2. نوع دکمه را انتخاب کنید:
3. ظاهر دکمه را سفارشی کنید:
4. کد حاصل را کپی کرده و در قالب ها قرار دهید:
"کلاس!" از همکلاسی ها
و حتی ساده تر - دکمه "کلاس!" به همراه دکمه Like از اجتماعی. شبکه "دنیای من". این دقیقاً همان چیزی است که در ادامه مورد بحث قرار خواهد گرفت.
2 در 1: "مانند" از MoiMir + "کلاس" از Odnoklassniki
1. به صفحه تنظیمات ویجت مانند و کلاس بروید! .
2. ویجت را به سلیقه خود سفارشی کنید:
3. کد حاصل را کپی کرده و در قالب وب سایت قرار دهید:
Google+ 1+
1. قابل اعتماد و متخصص صفحه تنظیم دکمه 1+.
2. ظاهر دکمه را سفارشی کنید:
3. کد حاصل را کپی کرده و در قالب ها قرار دهید:
همه در یک: برای افراد تنبل!
اگر بیش از حد تنبل هستید تا تمام شبکه های اجتماعی را به صورت جداگانه پیکربندی کنید ، می توانید از آن استفاده کنید راه حل های آماده و اسکریپت هایی که امکان ارسال یک دکمه جهانی را با به اشتراک گذاری (عملکرد "به دوستان بگویید") در همه شبکه های اجتماعی محبوب فراهم می کند. لطفا توجه داشته باشید که هیچ صحت محکمی برای سایت وجود ندارد ، و چنین دکمه هایی بیشتر برای راحتی ایجاد می شوند تا برای اثر SEO.
کدهای دکمه را بگیرید و آنها را در سایت قرار دهید.
کدهای دریافت شده را از کجا درج کنیم؟
برای قرار دادن دکمه های "مانند" در یک سایت ، ابتدا باید تصمیم بگیرید که کدام صفحات در سایت شما سودآوری و بهترین مکان را دارند. گزینه های زیر برای قرار دادن دکمه ها در سایت وجود دارد:
- صفحه نخست
- تمام صفحات سایت؛
- صفحه ضبط / مواد.
دیگر نیازی به اختراع دکمه های چرخ و قرار دادن در پیام های انجمن ، در صفحات داده تماس با و غیره نیست: چنین دکمه هایی دوست ندارند. بعد از اینکه تصمیم گرفتید که دکمه ها را در کجا قرار دهید ، وارد صفحه کنترل سایت خود شوید سایت شما.ucoz.ru / مدیر و به:
- ویرایشگر صفحه management مدیریت صفحه سایت → صفحه اصلی را ویرایش کنید (اگر می خواهید کدهای دکمه را فقط روشن کنید) صفحه نخست سایت)؛
- مدیریت طراحی → ماژول (اختیاری) → صفحه مطالب و نظرات در مورد آن (اگر می خواهید دکمه های "مانند" را برای هر ماده قرار دهید)؛
- مدیریت طراحی block بلوک جهانی " قسمت بالا سایت " (اگر می خواهید کد را در تمام صفحات سایت قرار دهید).
کدهای دکمه دریافت شده را در یکی از این قالب ها بچسبانید و تغییرات خود را ذخیره کنید. بیایید با یک مثال خاص به این نکته بپردازیم - قرار دادن دکمه "این جالب است!" نزدیک ورودی در وبلاگ رسمی uCoz ما.
اخیراً ، هر مشتری دوم (اگر نه اولین) مشتری در مورد الزامات توسعه سایت می خواهد که حتماً آن را با شبکه های اجتماعی ارتباط برقرار کند. دکمه های "اجتماعی" در سایت - ابزار شماره یک برای جذب مخاطب هدف ، انتشار مطالب و روابط عمومی به طور کلی. و کاملاً رایگان است
شبکه های اجتماعی کدها را برای دکمه ها و ابزارک های خود برای قرار دادن در سایت فراهم می کنند و دستورالعمل نصب آنها را در سیستم مدیریت سایت ضمیمه می کنند. هر CMS ( سیستم های عامل) ، نکته اصلی این است که آنها را به صورت هماهنگ در طراحی سایت خود قرار دهید.
ویژگی ها و عملکردها چیست؟
اگر سایت شما به سمت افرادی است که با شبکه های اجتماعی محبوب گپ می زنند. به عنوان مثال شبکه های Vkontakte ، Twitter ، Instagramm ، Facebook ، Google+ ، Pinterest و موارد دیگر ، و شما می خواهید همه آنها را بپوشانید ، برای این که دکمه ها را برای هر یک از آنها به صورت جداگانه تنظیم نکنید ، با توجه به اینکه ممکن است در اندازه و طراحی متفاوت باشند ، توصیه می کنیم از خدمات جمع. اینها ابزارهای ساده و راحت هستند که به بازدید کنندگان وب سایت اجازه می دهد تا بدون در نظر گرفتن کدام شبکه اجتماعی از آنها ، به سرعت اطلاعات را با دوستان خود به اشتراک بگذارند. در زیر ما محبوب ترین خدمات را تحلیل خواهیم کرد.
دکمه های رسانه های اجتماعی به اشتراک بگذارید Pluso
5 دقیقه برای خواندن
کمپین های بازاریابی ایمیل و رسانه های اجتماعی یکپارچه به مخاطبان بیشتری می رسند و ROI (بازده سرمایه گذاری) را افزایش می دهند. بیاموزید که چگونه از پلت فرم بازاریابی یکپارچه Mailigen برای همکاری با مشتریان از طریق ایمیل و شبکه های اجتماعی استفاده کنید.
چرا دکمه های رسانه اجتماعی "به دوستان بگویید" را به ایمیل اضافه کنید؟
طبق مطالعه استراتژی های بازاریابی (تحقیق در مورد استراتژی های بازاریابی در سال 2014) ، که در سال 2014 توسط WebDAM ، یک شرکت مدیریت منابع دیجیتالی انجام شده ، سه دلیل خوب وجود دارد:
- در سال 2013 ، 43٪ فروشندگان از طریق LinkedIn خریداران را پیدا کردند
چگونه دکمه های رسانه اجتماعی "به دوستان بگویید" را به پیام ایمیل خود اضافه کنید
مرحله 1
وقتی در مرحله چهارم ایجاد یک خبرنامه ایمیل خواهید بود ، بلوک مربوط به اشتراک گذاری در شبکه های اجتماعی را به محلی که می خواهید این دکمه ها را نصب کنید بکشید.
گام 2
پس از آن ، یک پنجره جدید باز خواهد شد که در آن می توانید تمام تنظیمات لازم را انجام دهید.
- اگر "بایگانی خبرنامه" را انتخاب کنید ، گیرنده خبرنامه می تواند مطالب کل نامه را در شبکه های اجتماعی به اشتراک بگذارد. از عنوان نامه پستی به عنوان متن مقدماتی استفاده می شود.
- اگر "پیوند دیگری" را انتخاب کنید ، می توانید پیوندی به هر ماده ای که می خواهید به اشتراک بگذارید وارد کنید. به عنوان مثال ، این می تواند یک مقاله جدید در وبلاگ شما باشد.
- سپس متنی را که در کنار دکمه ها قرار دارد تایپ کنید ، اندازه دکمه ها و فاصله بین آنها را انتخاب کنید.
