このブログの記事も冒頭部分と最後にTwitterとはてぶのシェアボタンがあります。これはブログのテンプレートに組み込まれているものですが、自分でアップロードしたページに表示させるにはどうすればいいでしょうか？
Contents
シェアボタンの設置方法
実は意外に簡単な方法でできてしまいます。以下のコードを貼り付けるだけです。
|
1 2 3 |
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
カスタマイズ
他に以下のような設定ができます。
|
1 2 3 4 5 6 7 |
data-text = "テキスト" ツイートに表示されるテキストの設定 data-url = "URL" ツイートに表示されるURL data-via = "Twitterユーザー名" ツイートに表示されるTwitterユーザー名 data-hashtags = "ハッシュタグ名" ツイートに表示されるハッシュタグの設定 data-related = "Twitterユーザー名" ツイート送信後に表示されるおすすめTwitterユーザー名 data-size = "large" ボタンサイズを大きくする data-lang = "言語" ボタンで使用される言語 |
応用例
このようなファイルを作れば簡単にカスタマイズ可能なシェアボタンを設置できるので便利かもしれません。
tweet-buttons.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
class Tweet { constructor(){ this.data_text = ''; // ツイートに表示されるテキストの設定 this.data_url = ''; // ツイートに表示されるURL this.data_via = ''; // ツイートに表示されるTwitterユーザー名 this.data_hashtags = ''; // ツイートに表示されるハッシュタグの設定 this.data_related = ''; // ツイート送信後に表示されるおすすめTwitterユーザー名 this.is_large = false; // ボタンサイズを大きくする } GetOption(){ let option = ''; if(this.data_text != '') option += `data-text="${this.data_text}" `; if(this.data_url != '') option += `data-url="${this.data_url}" `; if(this.data_via != '') option += `data-via="${this.data_via}" `; if(this.data_hashtags != '') option += `data-hashtags="${this.data_hashtags}" `; if(this.data_related != '') option += `data-related="${this.data_related}" `; if(this.is_large == true) option += `data-size = "large" `; option += `data-lang = "ja" `; return option; } CreateButtons(){ let link = `<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false" ${this.GetOption()}>Tweet</a>`; let elms = document.getElementsByClassName('tweet'); for(let i=0; i<elms.length; i++) elms[i].innerHTML = link; } } |
HTMLに <div class = “tweet”></div> と書いた部分にボタンが表示されます。複数設置可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>共有テスト</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <!-- 先に2行書く --> <script async src="https://platform.twitter.com/widgets.js"></script> <script src="./tweet-buttons.js"></script> <div class = "tweet"></div> <p>記事</p> <div class = "tweet"></div> <script> let tweet = new Tweet(); tweet.data_text = '記事のタイトルを変更できる'; // ボタンをはりつけたページのタイトルでなくてもOK tweet.data_url = 'https://lets-csharp.com/'; // ボタンをはりつけたページ以外のurlも指定できる tweet.data_via = 'THE_RANRAN'; // @ユーザー名さんから が追加される tweet.data_hashtags = 'ハッシュタグ'; // ハッシュタグ tweet.data_related = 'user1,user2'; // ツイートを投稿したあとにおすすめのユーザーを表示 tweet.is_large = true; // ボタンを大きくする tweet.CreateButtons(); </script> </body> </html> |
