Beranda
CSS
HTML

Membuat Tombol Social Share Addthis Dengan Counter Valid AMP

Membuat Tombol Social Share Addthis Dengan Counter Valid AMP - Tombol social share sebenarnya dapat kita buat tanpa melalui Addthis. Namun untuk versi amp, tombol share ini harus memasang javascript dari ampproject dengan elemen amp-social-share, namun element ini menurut saya urang efektif untuk membuat tombol social share, karena tampilan dari tombol share ini kurang menarik dan susah untuk diatur.

Ampproject kini menyediaan alternative lain bagi anda bila ingin memasang tombol social share yang lebih kekinian, yaitu dengan menggunakan tombol social share dari Addthis. Memang dulunya addthis ini banyak dipakai para pemilik blog, untuk membuat tombol social share, pasalnya addthis ini mempunyai tampilan tombol yang bermacam macam dan menarik yang dapat kita sesuaikan dengan kemauan kita. Selain itu, kita juga dapat menyertakan counter agar kita dapat melihat berapa kali postingan tersebut sudah dibagikan.

Untuk memasang social share dari addthis ini anda perlu memasang kode diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' custom-element='amp-addthis' src='https://cdn.ampproject.org/v0/amp-addthis-0.1.js'/>
</b:if>

Setelah itu copy kode dibawah ini
<b:includable id='shareAddThis' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
<div class='shareAddThis'>
<amp-addthis data-pub-id='ra-50f568026cf55185' data-widget-id='nzrd' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='90' layout='flex-item'>
</amp-addthis>
  </div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
<div class='shareAddThis'>
<amp-addthis data-pub-id='ra-50f568026cf55185' data-widget-id='h3g6' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='63' layout='flex-item'>
</amp-addthis>
  </div>
</b:if>
</b:includable>

Dan paste diatas kode <b:includable id='shareButtons' var='post'>

Ket :
Anda dapat mengganti kode yang saya block kuning dengan kode data widget anda, atau tetap anda biarkan seperti itu.

Setelah itu masukan kode dibawah ini sesuai dengan tempat yang anda inginkan untuk memasang tombol share ini, sebaiknya dibawah judul atau dibawah postingan.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='shareAddThis'/>
</b:if>

Jika tampilan kurang rapi, anda dapat menambahkan kode css dibawah ini pada bagian css yang mengatur area postingan
.shareAddThis{margin:0;height:53px;overflow:hidden;}
.shareAddThis amp-addthis iframe{margin-top:0;margin-left:-8px;}
@media screen and (max-width:640px){.shareAddThis{height:98px;}}

Itulah tadi sedikit tentang Membuat Tombol Social Share Addthis Dengan Counter Valid AMP, tunggu artikel tentang blog lainya, semoga bermanfaat, dan selamat mencoba...

Posting Komentar