New Fiture 2017 BBM Sharing On AMP

Blackberry Messenger adalah platform Massangging dengan pengguna ter banyak di bandingkan dengan massaging lainnya.
Semenjak kemunculan Bbm di Android beberapa tahun kebelakang pengguna bbm juga terus banyak sampai sekarang.

Di kutip dari blog kompi ajaib dengan sedikit modigikasi saya berhasil membuat tombol share Bbm untuk pengguna accelerated mobile page.
Karena accelerated mobile page ini di peruntukan untuk pengguna mobile yang mengakses sebuah halaman dengan kecepatan yang cukup ringan.
Jadi tombal share ini bisa di jadikan media share artikles blog ke pengguna/akun bbm dengan sangat mudah,dengan begitu trapik pembaca blog juga akan naik.

Nah jika tertarik memasangnya di blog anda ini cukup simple.

Anda bisa gunakan tombol share Bbm berikut ini.
<a expr:href='&quot;bbmi://api/share?message=&quot; + data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; + data:post.title' target="_blank" title="Share On BBM">
  <svg viewBox="0 0 5067 5067" class="icon BlackBerry-Icon">
    <rect height="5067" rx="489" ry="489" width="5067" style="fill: black;" />
    <g>
      <path d="M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z"
      style="fill: white; fill-rule: nonzero;" />
      <path d="M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z" style="fill: white;" />
      <path d="M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z" style="fill: white;" />
      <path d="M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z" style="fill: white;" />
      <path d="M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z" style="fill: white;" />
      <path d="M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z" style="fill: white;" />
      <path d="M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z" style="fill: white;" />
      <path d="M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z" style="fill: white;" />
      <path d="M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z" style="fill: white;" />
    </g>
  </svg>
</a>


Jika pengguna wordpess cukup ganti kode berikut ini.
<a expr:href='&quot;bbmi://api/share?message=&quot; + data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; + data:post.title' target="_blank" title="Share On BBM">


Menjadi seperti ini.
<a href="bbmi://api/share?message=<?php the_permalink()?>?ref=bbm&amp;userCustomMessage=<?php the_title(); ?>" target="_blank" title="Share On BBM">


Dan tambahkan CSS ini untuk mengatur letak SVG nya.
.BlackBerry-Icon {
  width: 36px;
  height: 36px;
}

.icon {
  display: inline-block;
  float: left
}


Selesai ...

Jika anda ingin membuat sharing Bbm di Amp dengan efek animation show hide.
Sebenarnya sih cukup salin URL Bbm sharing nya nah ini sama Seperti Membuat Sosial Share Pixel animation yang saya share kemarin. Kita cukup menambahkan kode HTML share nya.

LANGKAH PERTAMA.


Berikut ini kode HTML share yang kemarin saya posting.
<b:includable id='share-tool' var='post'> <amp-accordion class='shares'> <section> <h4 class='show-share'> <div class='show-more rotateIn'><svg viewBox='0 0 24 24'> <path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z' fill='#000000'/> </svg></div> <div class='show-less rotateIn'><svg viewBox='0 0 24 24'> <path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#000000'/> </svg></div> </h4> <div class='share-icon'> <ul class='slideInUp'> <li class='slideInUp1'> <amp-social-share height='50' type='twitter' width='50'/></li> <li class='slideInUp2'> <amp-social-share height='50' type='gplus' width='50'/></li> <li class='slideInUp3'> <amp-social-share data-param-app_id='145634995501895' height='50' type='facebook' width='50'/></li> <li class='slideInUp4'> <amp-social-share height='50' type='pinterest' width='50'/></li> <li class='slideInUp5'> <amp-social-share height='50' type='linkedin' width='50'/></li> <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> <li class='slideInUp5 wa'> <amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Ada yang keren lho, nyesel kalo ga buka.. kunjungi: &quot; + data:blog.url' layout='container' type='whatsapp'> <amp-img alt='Share via Whatsapp' height='35' layout='fixed' src='https://4.bp.blogspot.com/-nuWfSt-GHRc/WBsZe1kXxmI/AAAAAAAAH7c/gGKKNm32SkYqQthHzcptJrqk4GejHdjGgCK4B/s1600/wa.png' width='35'/> </amp-social-share> </li> </b:if> </ul> </div> </section> </amp-accordion> <div class='clear'/> </b:includable>


LANGKAH KE DUA.


cukup tambah kode HTML share Bbm nya hingga menjadi seperti ini.
<b:includable id='share-tool' var='post'>
<amp-accordion class='shares'>
    <section>
<h4 class='show-share'>
<div class='show-more rotateIn'><svg viewBox='0 0 24 24'>
    <path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z' fill='#000000'/>
</svg></div>
<div class='show-less rotateIn'><svg viewBox='0 0 24 24'>
    <path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#000000'/>
</svg></div>
</h4>
<div class='share-icon'>
<ul class='slideInUp'>
   <li class='slideInUp1'> <amp-social-share height='50' type='twitter' width='50'/></li>
   <li class='slideInUp2'> <amp-social-share height='50' type='gplus' width='50'/></li>
   <li class='slideInUp3'> <amp-social-share data-param-app_id='145634995501895' height='50' type='facebook' width='50'/></li>
   <li class='slideInUp4'> <amp-social-share height='50' type='pinterest' width='50'/></li>
   <li class='slideInUp5'> <amp-social-share height='50' type='linkedin' width='50'/></li>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<li class='slideInUp5 wa'> 
<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Ada yang keren lho, nyesel kalo ga buka.. kunjungi: &quot; + data:blog.url' layout='container' type='whatsapp'>
    <amp-img alt='Share via Whatsapp' height='35' layout='fixed' src='https://4.bp.blogspot.com/-nuWfSt-GHRc/WBsZe1kXxmI/AAAAAAAAH7c/gGKKNm32SkYqQthHzcptJrqk4GejHdjGgCK4B/s1600/wa.png' width='35'/>
</amp-social-share>
</li><li class='slideInUp6 blackberry'> <amp-social-share expr:data-share-endpoint='&quot;bbmi://api/share?message=&quot; + data:post.title + &quot; - &quot; + data:blog.url' layout='container' type='blackberry'> <amp-img alt='blackberry' height='35' layout='fixed' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU4vCj20KnnniKSxHBh_Qo7oMABQi3Urota7N45ZQ7RebLafnCBA' width='35'/> </amp-social-share> </li> </b:if> </ul> </div> </section> </amp-accordion> <div class='clear'/> </b:includable>


LANGKAH KE TIGA.


Dan tambahkan CSS berikut ini di bawah <style amp-custom='amp-custom'>.
amp-accordion.shares li.blackberry amp-social-share{background:#000000;overflow:hidden;width:50px;height:50px;line-height:50px;text-align:center} amp-accordion.shares li.blackberry amp-social-share amp-img{vertical-align:middle}

Selesai...

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×