ブログ記事下にTwitterフォローボタンを埋め込んでみた【ストークカスタマイズ紹介】

ブログ記事下にTwitterフォローボタンを埋め込んでみた

このブログは「ストーク(STORK)」という有料テーマを使用しています。
ストークの特徴の1つに、記事上と記事下にSNSへのシェアボタンを表示できることが挙げられます。

記事下だと↓こんなのですね。(パソコンから見た場合)

で、今回ここに手を加えまして、この記事下のSNSシェアボタンの真下にTwitterのフォローボタンを置いてみました!
こんな見た目に仕上がっております。

プラグインは使わずに、コードの埋め込みのみで対応しました。
どうやったのか紹介していきましょう!

今回も先人の知恵を…

…と言っても、今回ももちろん偉大な先人の知恵を存分にお借りしております。
今回参考にさせていただいたのは以下の記事。

このブログの運営者・まなしばさんは私と同じ大学の出身みたいです(^^)

2箇所にコードを追記!

で、上のまなしばさんの記事の内容を踏まえて、私がこのブログにどんな変更を加えたのかというと。
2箇所に以下のコードを書き加えました。

parts_sns.php

まず1箇所目は、記事下のSNSボタンの表示を司っているparts_sns.php。(ストークの場合)
最下部にスペースを作って以下のコードを入力します。

スマホ用とPC用、2種類のコードがあります。
7行目と18行目で「ツイッターアカウントページのURL」と「ツイッターのユーザー名」となっている部分はご自身のものに書き換えてください。
ほか、必要な文言などがあれば書き加えて頂ければ。

style.css

その上で、CSSにも以下のコードを追加します。

これで、記事下へのTwitterフォローボタンの埋め込みが完了します!
スマホから見ても↓こんな風にちゃんと表示されてますよ(^^)

Facebookも対応可能です(詳しくは先人の記事を)

最近いろいろとブログを触っているおかげか、作業自体は意外とあっさりと完了してくれました。

こうしたフォローボタンは以前は「この記事が気に入ったらいいね」とか「VA Social Buzz」といったプラグインを使っていたんが、これらのプラグインだとボタンを好きな場所に埋め込むことができない(「VA Social Buzz」は有料版だと可ですが)というのが難点でした。

でも、この方法だと自分が置きたい場所に実装できるし、いいですね!

私はFacebookのいいね!ボタンは使っていないのでその部分はバッサリ削りましたが、
前述のまなしばさんの記事にはFacebookページのいいね!ボタンも含めたボタンの設置方法が紹介されています。

Twitterだけの場合とやり方もほとんど変わらないので、
「Facebookページのいいね!ボタンも一緒に付けたい!」
という方は是非まなしばさんの記事を参考にしてみてください。
(というわけでもう一度その記事を貼っておきます。)

AUTHORこのブログを書いている人

京都市左京区下鴨で開業している税理士です。税理士試験受験予備校の元講師。相続税法が担当科目だったことから、税理士としても相続・贈与を得意分野としています。個人・法人の経理はクラウド会計に特化&Mac対応可(自身もMacユーザー)。【好きなコトモノ】写真・カメラ(Nikon D500) / Apple製品 / 競走馬の写真を撮る / DEEN / イチロー / 地元京都の四季の風景 / Ingress(RES) 【詳しいプロフィールはこちら】
相続税に強く、クラウド会計に特化した京都市左京区の税理士事務所です。
「専門用語をなるべく省いたわかりやすい説明」と「税理士が直接お客様に全てのサービスを提供すること」を大切にしています。