俺のアジト。

ここは俺の秘密基地。

今の平凡な人生で終わらせたくない。

ブログにtwitterのフォローボタンを設置してみた。

あまぐりです。

タイトルにあるとおり、フォローボタンを設置してみました。

上のボタンです。

 

僕が見ているブログでも結構つけている人いて、どうやってつけるんだろう?と思ったのがキッカケです。

※僕がやり方忘れないようにするのが目的の記事です。わかりにくかったらごめんなさい。

 

〈目次〉

 

【全体の流れ】

フォローボタンを設置するまでの一連です。

これで理解できたら、これ以降の記事はみなくても大丈夫だと思います。

 1.Twitter PublishでHTMLのコードを作成する。

 2.ボタンを設置したい場所にHTMLコードを貼りつける

 3.公開する。

たったこれだけ。

簡単ですよね?

じゃあ、実際の作業を説明していきます。

 

Twitter PublishでHTMLコードの作成】

まず、Twitter Publishは無料のサイトですので安心してください。

こちらのページです。

f:id:amaguricafe:20180912234237p:plain

 上の赤く囲った場所に、自分のtwitterのURLを張り付けします。

 

f:id:amaguricafe:20180912234819p:plain

今回作成するのは、フォローボタンなので①の赤まるをクリックします。

すると、②のところにHTMLのコードが表示されるのでCopy Codeのボタンをクリックします。

「Copy Code!」って表示が出てきたら成功です。

次の作業に移ります。

 

【ブログにコードを貼りつける】

 まず、ブログの記事を書いているページに戻ります。

自分の記事の、ボタンを設置したい場所が決まったら

f:id:amaguricafe:20180912235613p:plain

HTML編集をクリックします。

すると、HTMLコード満載のページが出てきます。

ボタンを設置したい場所を発見したら、そこに

 

f:id:amaguricafe:20180912235722p:plain

先ほどコピーしたコードを貼りつけます。

赤で囲った2行が、コピーしたコードです。

あとは、ちゃんとできてるかプレビューで確認すると良いでしょう。

 

あとは、公開すれば

このようなボタンが出現します。

twitterをやっている方は、オススメです。

 

それくらい知ってるわい!って感じですかね?

 

【まとめ】

どうでしたでしょうか?わかりやすかったかな?

結構簡単にできるかと思います。

もしわかんないことあったら、気軽にコメントしてください。

僕でわかる範囲でお答えします。

たぶん、ヤホオの知恵袋とかにたくさん情報あると思うのでそっちの方がオススメかも。笑