Wednesday, September 26, 2018

Cara Menambahkan Facebook Like Button di Blogger Valid AMP

    Tutorial Cara Menambahkan Facebook Like Button di Blogger Valid AMP tanpa APP ID

    AMP Blogger - Facebook merupakan medial sosial paling populer di Internet. Lebih dari 2 milyar orang sudah memiliki akun Facebook, dan lebih dari 2 juta orang online dan akif menggunakan Facebook setiap harinya..

    Facebook juga banyak digunakan oleh para marketing untuk memasarkan dan mempromosikan jasa atau barang yang mereka jual. Karena pasar Facebook saat ini memang masih ramai dan potensial.

    Begitu juga dengan para pemilik website atau blog yang mempromosikan website miliknya untuk mendatangkan trafik. Salah satu cara yang biasa digunakan para webmaster adalah Facebook Share dan Facebook Like Button.

    Tapi kali ini saya hanya akan menjelaskan cara menambahkan Facebook Like Button pada Blogger valid AMP, karena mengenai Facebook Share sudah saya jelaskan pada artikel Cara memasang Addthis Share.

    Menambahkan Like Button di Blog AMP


    Seperti biasa, untuk menambahkan komponen baru pada halaman AMP, kita membutuhkan komponen javascript dari AMP HTML. Dan untuk memasang Facebook Like Button, AMP HTML sudah menyiapkan amp-facebook-like.

    Masuk ke dashboard Edit HTML template Blogger anda. Copy dan paste komponen ini di dalam tag head ( sebelum </head> )

    <script async='async' custom-element="amp-facebook-like" src="https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js"></script>

    Selanjutnya, copy kode HTML berikut ini dan paste ditempat yang diinginkan. 

    
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <amp-facebook-like width="90"
      height="20"
      layout="fixed"
      data-layout="button_count"
      expr:data-href="data:post.url">
    </amp-facebook-like>
    </b:if>

    Misalkan, untuk menempatkan Facebook Like Button di akhir artikel, anda harus menambahkannyua di atas kode <data:post.body/> yang terakhir. 

    Add Share Button

    Jika anda ingin menambahkan tombol share disebelah Like Button, anda hanya perlu menambahkan kode data-share='true' dan menambahkan atribut width menjadi 180px, sehingga kode menjadi seperti di bawah ini:
    
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <amp-facebook-like width="180"
      height="20"
      layout="fixed"
      data-layout="button_count" data-share='true'M/mark>
      expr:data-href="data:post.url">
    </amp-facebook-like>
    </b:if>

    Selanjutnya simpan perubahan pada template anda.

    Namun perlu diperhatikan, jika seorang pengunjung melakukan klik Like, dia harus mengkonfirmasinya agar like bisa dihitung. 

    Disqus Comments