Creating Line And BBM Share Button for Blogger Blog

Previously I've posted about how to make the share button Whatsapp and SMS to contact directly admin blog, now I will post how to create a share button for Line and BBM on the blog.

Share button is very useful for mobile users to share their preferred posts to their social messenger account, especially for Line application users and Blackberry messenger.

Well if you are interested to try it on your blog, please use the code below.

The Line and BBM icons on this button use the SVG icon.

Share Button for Line

 <a expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target="_blank" title="Share On Line">
  <svg viewBox="0 0 48 48" class="icon icons8-LINE">
    <path style="fill:#00C300;" d="M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23      C6,39.09,8.91,42,12.5,42z"></path>
    <path style="fill:#FFFFFF;" d="M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637      c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185      c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001      C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687      C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652      c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688      c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035      c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z      M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917      c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603      c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604      c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z"></path>
  </svg>
</a>

To use WordPress greetings replace the following code:

<a expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target="_blank" title="Share On Line">

Replace with the following code:

 <a href="https://timeline.line.me/social-plugin/share?url=<?php the_permalink()?>" target="_blank" title="Share On Line">

Share button for BBM

<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>

To use WordPress greetings replace the following code:

<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">

Replace with the following code:

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

And add the CSS below to set the size of the SVG icon.

.icons8-LINE {
  width: 48px;
  height: 48px;
  margin: -6px 0 0 -6px;
}

.BlackBerry-Icon {
  width: 36px;
  height: 36px;
}

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

Good luck...