در این مقاله قصد داریم با بارگذاری دکمه ی g+1 سرعت بارگذاری صفحه ی وب را بالا برده و قابلیت ریسپانسیو را افزایش دهیم.

یکی از مشکلات اضافه کردن دکمه های اجتماعی به یک وب سایت،مانند دکمه لایک فیس بوک این است که به طور قابل توجهی سرعت بارگذاری صفحه وب را کاهش می دهد.اگرچه با روش بار گذاری آسنکرون (asynchronous) این مشکل تا حدودی حل شده است اما زمان بارگذاری صفحه و ریسپانسیو بودن صفحه همچنان یک مسئله بزرگی است.مخصوصا زمانی که دکمه های شبکه اجتماعی متعددی را روی یک وب سایت اضافه کنیم.

ایجاد دکمه g+1

دکمه g+1 را در وب سایت خود درج کنید. برای درج این دکمه در وب سایت خود ابتدا آن را از

Google +1 دریافت کنید.کد Voicent's +1 به شکل زیر می باشد.

<g:plusone size="medium" annotation="inline" href="..."></g:plusone>

زمانی که این کد را در صفحه وب خود قرار دهید دکمه g+1 با یک شمارنده در سمت راست آن نشان داده می شود.

 بارگذاری دکمه ی g+1

 برای بارگذاری دکمه Google +1، مرورگر به وب سایت گوگل رجوع می کند.کدهای جاوا اسکریپت تعبیه شده نیاز دارند که بدانند دکمه ی 1+ چند بار توسط کاربران زده شده است و کاربر جاری گوگل چه کسی است و سپس جزئیاتی مانند تعداد کل 1+ها را سمت راست دکمه نشان می دهد.

اگرچه دکمه ی g+1 به صورت آسنکرون(asynchronous) پیاده سازی شده اما در ریسپانسیو بودن صفحه تولید اشکال می کند. با بارگذاری g+1، زمانی که ماوس روی دکمه قرار می گیرد، تا حدودی این مشکل حل می شود.

تگ img که onMouseOver در آن تعریف شده است را داخل تگ g:plusone قرار می دهیم.

همانطور که در کد زیر نشان داده شده است.

<div id="plusone-div">
  <img sec="/images/gplus-button.png" onMouseOver="renderPlusone();">
</div>

متد جاوا اسکریپت ()renderPlusone در کد زیر نشان داده شده است.

مقدار "explicit"که در "parsetags" قرار می گیرد،  plusone.js را صدا می زند تا برای بارگذاری دکمه متد ()render فراخوانی شود.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js</a />">
  {"parsetags": "explicit"}
</script>

آموزش سی شارپ