【ブログ】記事中にTwitterへのシェアボタンを貼る方法【はてなブログ】

ブログ・ブロガー
スポンサーリンク

記事をツイート

こんち。キリンノックスとやらです。

 

はてなブログには記事の最後にシェアボタンがありますよね。

コレを記事の最中に貼りたくはないですか?

 

貼りたくないですか・・・?

 

 

Twitterでシェアするボタン

どのようなものかというと

 

記事をツイート

 

こんな感じ

 

f:id:kirinnox:20200120170538j:plain

 

こんな感じです。

 

実際に押すとこの記事をシェアできるようにできています。

試しに押してみてください(ゲス顔)

 

大丈夫です。押しただけではシェアされませんw

ではやり方です。

 

やり方

htmlにこのように書きます。

 

<a href=”http://twitter.com/share?url=●●●●” target=”_blank”>記事をツイート</a>

 

●●●●の部分に、ご自身のシェアしたい記事のurlをぶち込んでください。

コレでとりあえずのシェアボタンは完成します。

 

ツイート内容

f:id:kirinnox:20200120180104j:plain

ツイートの文字部分も、こちらで指定したい場合

urlの直後

 

&amp;text=■■■■

 

追加します。

 

<a href=”http://twitter.com/share?url=●●●●&text=■■■■” target=”_blank”>記事をツイート</a>

 

こんな感じです。

もちろん、■■■■にツイートして欲しい内容を書きます。

 

ツイート内に表示するユーザー

f:id:kirinnox:20200120180217j:plain

同じように

 

&via=★★★★

 

と追加するとツイートの中に「@★★★★さんから」とTwitterのユーザー名を表示することができます。

 

おすすめユーザー

f:id:kirinnox:20200120175053p:plain

 

&related=▶▶▶▶

 

を追加するとシェアした直後におすすめユーザーとして▶▶▶▶が表示されます。

 

ハッシュタグ

f:id:kirinnox:20200120180913j:plain

&hashtags=▲▲▲▲

 

と追加するとハッシュタグをつけることができます(「#▲▲▲▲」と追加される)

2つ以上ハッシュタグをつけたいときはカンマで区切ります。

 

&hashtags=▲▲▲▲,▼▼▼▼,△△△△

 

という感じです。

 

ボタン風にする

f:id:kirinnox:20200120170538j:plain

 

ボタンは画像でやっています。

まず、ボタンに使いたい画像をはてなブログの記事編集画面に貼り付けます。

 

f:id:kirinnox:20200120170538j:plain

 

っで、htmlを見ると、画像のhtml

 

 <img src=”https://cdn-ak.f.st-hatena.com/images/fotolife/なんちゃらかんちゃら />

 

という感じになっていると思うので、コレを切り取って

先程の

 

<a href=”http://twitter.com/share?url=●●●●&text=■■■■&via=★★★★&related=▶▶▶▶&hashtags=▲▲▲▲,▼▼▼▼,△△△△” target=”_blank”>記事をツイート</a>

 

これの、記事をツイート部分に貼り付けます。

 

<a href=”http://twitter.com/share?url=●●●●&text=■■■■&via=★★★★&related=▶▶▶▶&hashtags=▲▲▲▲,▼▼▼▼,△△△△” target=”_blank”> <img src=”https://cdn-ak.f.st-hatena.com/images/fotolife/なんちゃらかんちゃら /></a>

 

完成。

 

ちなみに最初のボタンのコードはこのようになっております。

 

<a href=”http://twitter.com/share?url=https://www.kirinnox.com/entry/tweet-bottun&text=この記事わかりやすい&via=kirinnoxcom&related=kirinnoxcom&hashtags=シェアボタン,キリンノックスのブログ,はてなブログ” target=”_blank”>記事をツイート</a>

 

ボタンの方

<a href=”http://twitter.com/share?url=https://www.kirinnox.com/entry/tweet-bottun&text=この記事わかりやすい&via=kirinnoxcom&related=kirinnoxcom&hashtags=シェアボタン,キリンノックスのブログ,はてなブログ” target=”_blank”><img src=”https://cdn-ak.f.st-hatena.com/images/fotolife/~~~~~~></a>

 

あ、この画像好きに使ってくださいw(30秒で作ったw)

 

f:id:kirinnox:20200120170538j:plain

 

そして、シェアしろください。

 

f:id:kirinnox:20200120170538j:plain

 

いえ、すみませんでした。

 

シェアしなくて大丈夫です。

 

またね。

 

関連記事

www.kirinnox.com

www.kirinnox.com

www.kirinnox.com

www.kirinnox.com

www.kirinnox.com

www.kirinnox.com

 

コメント

タイトルとURLをコピーしました