miMemo(ミメモ)

Web制作 WordPress

[M]チャットワークのシェアボタンを自作(オリジナル)で作る方法!タグコピペでOK

Chatwork sharebutton original sum

こんにちは!みう(@miu0512)です。最近公表されたチャットワークのシェアボタン。ビジネスの記事共有にはもってこいのボタンですが、公式で出しているボタンをジェネレーターで作るという方法しかありませんでした。今回オリジナルでなんとかタイトルとURLを保ちつつポップアップさせることに成功したので、仕事中物凄くテンションが上ったので書きましたが・・・備忘録としてペタっとしておきたいと思います。

チャットワークシェアはクライアントにも情報共有

仕事上や、外注先にイメージURLとして送るのも便利

Chatwork sharebutton original 2

チャットワークのみでやりとりをしている会社も多いと聞きます。そんな時に、Facebookのシェアやツイッターのシェアではすぐに伝達できません。

チャットワーク内でシェアできるようになりました!

チャットワークでシェアができることで、仕事仲間に「この記事いいよ〜」といった共有がすぐにできるし、わからないところを質問された時にもURLよりも素早く技術記事のシェアができるようになるのではないでしょうか。

公式のボタンはタグの生成が簡単!

バルーン型のシェアボタンもあっという間に作れてしまいます

Chatwork sharebutton original 1

公式のボタンは、公式サイトに行けば簡単にタグを発行することが可能です。でも、やっぱり他のボタンと揃えたい!速さを追求したい!というかたもいらっしゃるはず。

自作コードの書き方!同じボタンの大きさにしたくて奮闘!

Chatwork sharebutton original 3

結果・・・なんとかボタンを押して内容を引き継ぎつつ、ポップアップでシェアできるようになりました。

WordPressで記述する場合

<script>!function(e,t){\"use strict\";var r,n=\"script\",s=e.getElementsByTagName(n)[0];e.getElementById(t)||(r=e.createElement(n),r.id=t,r.src=\"https://widgets.chatwork.com/1.0/javascript/sdk.js\",s.parentNode.insertBefore(r,s))}(document,\"chatwork-widget-sdk\");</script>
<a href=\"javascript:window.open(\'https://www.chatwork.com/packages/share/new.php?url=<?php the_permalink(); ?>&title=<?php the_title();?>\',\'windowname\',\'width=350,height=450\');\">チャットワークで共有</a>

一般HTMLで記述する場合

<script>!function(e,t){\"use strict\";var r,n=\"script\",s=e.getElementsByTagName(n)[0];e.getElementById(t)||(r=e.createElement(n),r.id=t,r.src=\"https://widgets.chatwork.com/1.0/javascript/sdk.js\",s.parentNode.insertBefore(r,s))}(document,\"chatwork-widget-sdk\");</script>
<a href=\"javascript:window.open(\'https://www.chatwork.com/packages/share/new.php?url=★ここにURL★&title=★ここにタイトル★\',\'windowname\',\'width=350,height=450\');\">チャットワークで共有</a>

「width=350,height=450」はポップアップの大きさです

Chatwork sharebutton original 4

ボタンを押すとこのくらいの大きさでポップアップが立ち上がるようになります。

サイズは変えてもOK!ただスマホも意識しないと・・・

Chatwork sharebutton original 5

投稿が完了するとこのような表示になります。メールからメッセンジャーへ変化している現在では、これからもっと利用されていくのかもしれませんね。

さいごに・・・

私は、実はチャットワークがリリースされた頃から使用していました。会社では全く相手にされず、一人で使っててもなぁ・・・という感じだったのですが、その当時のメッセンジャーといえばMSNや社内用のIP制限のかかったWinアプリくらいだったので、絶対これから使えそうだなぁと思っていた時期がありました。今はクライアントさんのほとんどの方とチャットワークでやり取りをさせていただいています^^

最後までお付き合いいだだきありがとうございます!

これからも、みう(@miu0512)を応援していただけたら嬉しいです!

この記事が気に入ったら
いいね!しよう

About Me

みう

みう(@miu0512)

フリーランス
Webコーディネーター

フリーランスWeb屋。マンチカン5匹と一緒に仕事をしています。 【 猫 / マンチカン / Webデザイン / ブログ / ミメモ / フリーランス / カメラ / 旅行 / 車 / 水樹奈々 / ライブ / カラオケ / アニソン / マンガ / アニメ / iPhone / Mac / 白猫 / メロディア】

PAGETOP