کد گوگل پلاس برای وبلاگ و وب سایت

سلام عرض میکنم خدمت یک لرنی های عزیز ، در این پست قرار هست که یاد بگیریم چگونه کد گوگل پلاس رو در سایت یا وبلاگ خودمون درج کنیم .
قبل از ورود به آموزش چند کلمه حرف دارم که امیدوارم بخونید و همچنین پاسخ به بعضی از دوستان که برای من ایمیل میفرستن و به ما محبت زیادی دارن :
مدت زمان زیادی هست که من و سایر دوستان در سایت حضور نداریم و خیلی جسته و گریخته میایم و به کامنت ها جواب میدیم و میریم .
الان که در حال نگارش و تکمیل سازی این مطلب هستم ساعت 3:43 بامداد هست به شدت خسته هستم ولی احساس میکنم این مطلب باید قسمت آخرش هم تکمیل بشه .
اما میخوام بگم که هنوز غیبت من در سایت ادامه داره و طبق وعده قبلی حضور مستقیم در سایت ندارم و با توجه به وقتی که در اختیار دارم در پشت صحنه ! سایت فعلا حضور دارم .
اما حرف اصلی من اینه که ان شالله اگر عمری باقی موند و تونستم در آینده به سایت برگردم برنامه های ویژه من در سایت شروع میشه و به محض ورود من ، وارد ورژن سوم یک لرن با یک پوسته جدید و کلی برنامه و فعالیت جدید میشیم .
نسبت به دوستانی که میخواستن بدونن حدودا کی برمیگردم ، به احتمال خیلی زیاد تابستون 96 در سایت حضور پیدا خواهم کرد !

این آموزش نمونه ای از آموزش هایی هست که در ورژن سوم سایت براتون ارسال خواهیم کرد ، اینو تقدیم میکنم به تمام کسایی که میخوان کامل یاد بگیرن !

کد گوگل پلاس برای وبلاگ و وب سایت

کد گوگل پلاس چیست و چه مزیت هایی دارد ؟

در واقع گوگل پلاس یک ابزار بسیار کاربردی برای نشان دادن محوبیت مردمی سایت یا وبلاگ شما میباشد ، به نسبتی که این عدد بالاتر رود نشانگر محبوبیت بیشتر سایت شما نزد کاربران میباشد .

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

در آخرین اظهارات گوگل این ابزار در نتایج نمایش داده شده در جستجو ها تاثیری ندارد و ممکن است در آینده نتایج این ابزار در نمایش در صفحات برتر گوگل مورد استفاده قرار گیرد البته به گفته برخی منابع معتبر شاید هم این ابزار تاثیر خود را در نتایج جستجو میگذارد اما هنوز به صورت آشکارا در این باره اطلاع رسانی نمیشود .

با این حال استفاده از مستندات گوگل پلاس برای کاربران ایرانی غیر قابل دسترس میباشد و باید برای دسترسی به این مستندات از ابزار هایی برای عبور استفاده کنید.

با این حال مستندات را میتوانید هم اکنون از لینک زیر به صورت کامل دانلود کنید .

دانلود مستندات

محل درج کد گوگل گلاس

اولا باید شما این کد را برای صفحه اصلی سایت خود درج کنید که باید قبل از تگ زیر باشد

</body>

دوما باید برای مطالب خود درج کنید که پیدا کردن محل مناسب برای این بخش بر عهده خود شماست . فقط باید بدانید در وب سایت های وردرپرسی در صفحه single.php یک مکان مناسب برای آن پیدا کنید .

البته درج در هر یک از قسمت ها اختیاری است شما میتوانید فقط در صفحه اصلی قرار دهید یا فقط در مطالب یا هر دو یا هیچ کدام !

کدهای این دو در آدرس دهی تفاوت هایی دارد که در ادامه خدمت شما خواهیم گفت .

تفاوت بین دو چیز !!

معمولا در سطح اینترنت اگر کمی جستجو کرده باشید دو تیپ کد برای درج کلید گوگل پلاس میبینید .

تیپ کد 1 :

<div class="g-plusone"></div>

تیپ کد 2 :

<g:plusone></g:plusone>

جالب است بدانید این دو کد هیچ تفاوتی با هم ندارند ولی کد اول مطابق استاندارد های html5 نوشته شده است ، ما نیز از تیپ کد 1 در این آموزش استفاده میکنیم و آن را گسترش میدهیم .

آموزش کد گوگل پلاس و گسترش آن

تنظیمات اولیه و درج آدرس ها

در ابتدا برای درج این ابزار در وب خود باید خط زیر را در مکان مناسب قرار دهید ( در بخش های بالا درباره مکان گفته شد )

<div class="g-plusone"></div>

پس از درج کد بالا مهم ترین کار تنظیم آدرس صفحه میباشد . که ما از data-href استفاده میکنیم .

حال دو انتخاب دارید :

1- اگر میخواهید این ابزار در صفحه اصلی سایت شما درج شود آدرس وب سایت خود را به جای آدرس وب سایت یک لرن وارد کنید ( مکان کد زیر هم قبل از تگ بسته body طبق راهنمایی های بالا میباشد) ، نمونه :

<div class="g-plusone" data-href="http://1learn.ir"></div>

2- اگر میخواهید این ابزار در تک تک مطالب شما نمایش داده شود باید آدرس مطلب را با استفاده از توابعی دریافت کنید که در سیستم های مختلف متفاوت است . در واقع در این قسمت تابع دریافت آدرس پست را به جای آدرس وب سایت یک لرن قرار میدهیم و دیگر تنظیم خاصی نیاز ندارد .

کد برای وردپرس :

<div class="g-plusone" data-href="<?php the_permalink() ?>"></div>

کد برای رزبلاگ :

<div class="g-plusone" data-href="[Post_Link]"></div>

کد برای میهن بلاگ :

<div class="g-plusone" data-href="[cb:post_href]"></div>

کد برای بلاگ بیان :

<div class="g-plusone" data-href="(*post_link*)"></div>

اگر موفق به یافتن تابع مربوطه در سیستم وبلاگدهی خود نشدید در نظرات مطرح کنید تا برای شما جستجو کنیم .

حالا اگر پیش نمایش کار خود را مشاهده کنید ، میبینید که ابزار اضافه شده است حالا قصد داریم امکانات دیگر این ابزار را ویرایش کنیم .

اجرا نخواهد شد اگر …

همین الان به انتهای آموزش مراجعه و در قسمت ” درج کد جاوا اسکریپت و اتصال به گوگل ” کد مرطوبه را کپی کنید و در خط زیرین کدهایی که نوشتیم قرار دهید تا برای شما اجرا شود مثلا :

<body>

<div class="g-plusone" data-href="http://1learn.ir"></div>

<script>
 (function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/plusone.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
</script>
</body>

اگر هر یک از دو انتخاب را داشته اید از این پس ویرایش ها برای هر دو یکسان است .

تنظیم سایز

کد گوگل پلاس در چهار سایز ارائه میشود که در تصویر زیر میبینید .

برای اینکه هر یک از چهار سایز را انتخاب کنید به کد خود باید ویژگی data-size را اضافه کنید و یکی از چهار مقدار بالا را در آن قرار دهید .

نمونه کد برای سایز استاندارد ( برای سایر سایز ها هم میتوانید مقادیر موجود در شکل را به جای standard قرار دهید )

<div class="g-plusone" data-href="" data-size="standard"></div>

warning در صورت تعریف نکردن data-size به طور پیشفرض مقدار standard نمایش داده خواهد شد .

تنظیم annotation

در annotation شما مشخص میکنید نحوه نمایش تعداد امتیازات به چه صورت باشد . و از data-annotation استفاده میکنیم که میتواند مقادیر زیر را دریافت کند .

1- bubble : نمایش تعداد به صورت یک حباب

2- inline : نمایش تعداد به صورت معمولی

3- none : عدم نمایش تعداد و تنها نمایش کلید گوگل پلاس

هر یک از مقادیر بالا را میتوانید به جای bubble در کد زیر قرار دهید .





<div class="g-plusone" data-href="" data-size="" data-annotation="bubble"></div>





warning در صورت تعریف نکردن data-annotation به طور پیشفرض مقدار bubble خواهد بود .

درج کد جاوا اسکریپت و اتصال به گوگل

و اما قسمت مهم کار اتصال به کتابخانه گوگل پلاس میباشد که از طریق کد زیر امکان پذیر است ، این کد باید دقیقا در خط بعد از کد های بالا که نوشتیم قرار گیرد که به دو صورت میتواند قرار گیرد .

    • اجرای کد جاوا اسکریپت همزمان با لود صفحه : ما توصیه میکنیم از این کد استفاده نکنید چون سرعت لود صفحه شما کمی کند تر خواهد شد .
<script src="https://apis.google.com/js/plusone.js"></script>
    • اجرای کد جاوا اسکریپت پس از لود صفحه : ما توصیه میکنیم از کد زیر استفاده کنید .
<script>
      (function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
</script>

ما سعی کردیم در این مطلب پرکاربرد ترین موارد را خدمت شما عرض کنیم و به زبانی کاملا ساده نحوه درج این کد را آموزش دهیم .

اگر مستندات گوگل را مشاهده کنید میبینید که بسیاری از موارد دیگر نیز قابل تنظیم در این کد هستند و میتوانید این کد را بیش از مقدار فعلی نیز شخصی سازی کنید که ما این موضوع را بنا به نیازی که دارید بر عهده خودتون میگذاریم.

خب بالاخره تموم شد ، نظرتون ؟

فرادرس

برچسب ها : ، ، ، ، ، ،