バズ部

  • icon株式会社ルーシー
  • 東京都港区新橋5-10-5 PMO新橋II 8階
  • 記事を探す
    • まず見て頂きたいページ
      • バズ部式マーケティングの進め方
      • コンテンツマーケティング101
      • SEO初心者向けマニュアル
      • バズ部メンバーの知見集
      • WordPress初心者向けガイド
    • 記事
      • 全ての記事を見る
      • SEO
        • SEOの基礎
        • SEO内部対策
        • コンテンツSEO
        • サーチコンソール
        • 高度なSEO
      • コンテンツマーケティング
        • 1.コンテンツマーケティングとは?
        • 2.コンテンツマーケティングをやるべきなのか
        • 3.あなたのブランドストーリーは何か?
        • 4.コンテンツマーケティング設計が全てだ
        • 5.必ず必要な社内体制と体制づくり
        • 6.まずは、小さな一歩を大切にしよう
        • 7.コンテンツ制作のコツを知ろう
        • 8.多くの人が陥る失敗を知っておこう
        • 9.顧客が「まだ気づいていないこと」に気づけるか
        • 10.素早く着実にコンバージョンにつなげよう
        • 11.正しく効果測定して成果を引き上げよう
        • 12.精度を上げてもっともっと成果を飛躍させよう
      • オウンドメディア
      • WordPress
        • wordpressウィジェット
        • wordpressテーマ
        • wordpressプラグイン
        • wordpressの基本操作
        • wordpressの導入と準備
        • wordpressの設定方法
        • ブログマーケティング
      • ソーシャルメディア
        • Facebook
      • ランディングページ
        • キャッチコピー
        • コピーライティング
      • メルマガ
      • EC
      • インタビュー
      • アーカイブ
    • 監修者/ライター一覧
      • 松澤 大輔
      • 木村 竜児
      • 野口 陽司
  • サービス一覧
    • サービスページ
      • コンテンツマーケティング立ち上げ&運用支援
      • SEO記事制作代行
      • キーワード設計代行
      • WEBサイト制作
      • 研修サービス
      • bazubu-shiki
      • ライティングツール「Pencii」
    • 資料請求
      • コンテンツマーケティング立ち上げ&運用支援サービス資料
      • SEO記事制作代行サービス資料
      • キーワード設計代行サービス資料
      • バズ部紹介資料
  • 支援実績
  • お役立ち資料
    • お役立ち資料一覧
      • 広告費を1/10にして売上を倍増させる全手法
      • バズ部が運営する月間20万PV超サイト11の生データ集
      • 良質なコンテンツを作成するための20のコツ
      • 最高のオウンドメディア支援会社を選ぶために行うべき7つの質問
      • バズ部紹介資料
      • バズ部公式メールマガジン
  • セミナー
  • 運営者情報

ご相談・お問い合わせ

© Copyright 2022 バズ部. All rights reserved.

ユーザーに届ける価値を徹底的に追求する
マーケティングを提供します

© Copyright 2022 バズ部. All rights reserved.

icon icon

icon
  • icon
  • icon
  • icon

05/22木8:00〜9:00

【5/22開催】バズ部の記事制作代行 商品説明会

  • オンライン
    1. バズ部 /
    2. WordPress /
    3. wordpress ウィジェット /
    4. WordPress のサイドバーに Twitter ボタンを設置する方法
  • 最終更新日 2020.09.19

WordPress のサイドバーに Twitter ボタンを設置する方法

コンテンツマーケティングを行うには各種ソーシャルメディアでファンを獲得することが重要だ。

そしてファンを獲得するためには、サイトを見た人が簡単にフォローできるように導線を作っておく必要がある。

ここでは下のサンプルサイトのように Twitter のバナーを WordPress のサイドバーに設置して、サイト訪問者に簡単にフォローしてもらえるようにする方法をご紹介する。

サイドバーにボタンを設置する方法は大きくわけて2つある。

  • Twitterが提供している自動生成ツールでボタンを作成する方法
  • オリジナルのTwitterボタンを作成する方法

Twitterの自動生成ツールで作成できるボタンはサイトのデザインに合わない場合がある。その時はオリジナルのTwitterボタンを用意してサイトのデザインの質を保とう。

それでは、まず前者の方法から解説していこう。

また、私たちバズ部は12年で400社以上のメディア支援を行い、

  • 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア
  • 8ヶ月で月間140万PVを実現したアプリメディア

など大きな成果を挙げ続けている。

各サイトの成功要因をインタビューしているので、
あなたのサイトに役立てて欲しい
⇒25サイトの成功事例インタビューはこちら

ebook
ebook

目次

  • 1.Twitterの自動生成ツールでボタンを作成する方法
  • 2.オリジナルのTwitterボタンを設置する方法
    • 2−1.Twitterボタン画像の用意
    • 2−2.Twitter バナーのコードの取得
    • 2−3.WordPressにTwitter画像を設置
  • 3.まとめ

1.Twitterの自動生成ツールでボタンを作成する方法

Twitterの自動生成ツールで作るボタンは、サイト上でワンクリックするだけでフォローすることができるので利便性が高い。ボタンを作成するには、まず、Twitter のボタン作成ページにアクセスしよう。

tw-follow-1

次に「フォローする」を選択しよう。

tw-follow-2

ここで各種オプションを調整して、ブログに合うようにボタンの見た目を整えよう。右側のコードのプレビューを見るでリアルタイムで変更が反映されるので設定は簡単だ。

「Twitterによるカスタマイズのオプトアウト」とは、Twitter が品質改善のためこのバナーを使ってデータ情報を収集しているのだが、それが気になり情報提供したくない方はここにチェックを入れよう。

調整後にコードのプレビューの下にあるコードをコピーしておこう。尚、このコードの data-show-count=”false” の部分を true に変えると下図のようにバナーにフォロワー数を表示させることができる。

<a href=”https://twitter.com/BAZUBU” class=”twitter-follow-button” data-show-count=”true” data-show-screen-name=”false” data-dnt=”true”>Follow @BAZUBU</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>

後は、このコードをテキストウィジェットに貼付けるだけで設定できる。

wordpress-twitter-03

ウィジェットの操作方法に関しては『 WordPress ウィジェットの追加と編集方法』で確認しておこう。

成功したオウンドメディアの要因を学ぶ

  • Article Image 1Article Image 1

    累計106億円の売上を叩き出した不動産会社のコンテンツマーケティング事例

    1

  • Article Image 2Article Image 2

    わずか8ヶ月で月間140万PVを実現したアプリ企業メディア成功事例

    2

  • Article Image 3Article Image 3

    問い合わせが月4,400件以上!自社メディアで驚異的なCV数を生み出した弁護士事務所

    3


2.オリジナルのTwitterボタンを設置する方法

オリジナルの Twitter ボタンではサイトのデザインにそぐわないこともあるだろう。その時は、別にボタンを用意しよう。

しかしオリジナルボタンを作る場合は、Twitter の公式ボタンと違ってサイト上でワンクリックでフォローしてもらうことはできない。一度、下図のように、あなたのTwitterページにアクセスしてもらう必要があることを覚えておこう。

wordpress-twitter-05

それでは、オリジナルの Twitter ボタンを表示する方法をご紹介していこう。

2−1.Twitterボタン画像の用意

Twitter のボタンで使用する画像はデザイナーに用意して貰ったり、「social icon free」などと検索するとダウンロードできる素材がいくらでもあるので、まずは好みの画像を探してみよう。

その時に気をつけたいのが Twitter ロゴを使用する上でのガイドラインだ。特に次の2点には注意して欲しい。

  • Twitterのロゴカラーは、青色または白色を使う
  • Twitterのロゴマークの鳥を編集・回転したり他の画像といっしょに使用しない

詳しい内容は、Twitter のブランドガイドラインに掲載されているので、念のため一通り目を通しておこう。

2−2.Twitter バナーのコードの取得

使用したいボタン画像が決まったら早速コードを用意していこう。ここでは HTML の知識が全くなくても簡単にコードを取得する方法をご紹介する。

まず、WordPress の管理画面にログインしたら左メニュー「投稿」にカーソルをあて、「新規追加」をクリックし次の画面にアクセスしよう。

「メディアを追加」をクリックして、Twitter ボタンの画像をアップロードしよう。

メディアライブラリ内にボタン画像をドラッグ&ドロップすればアップロードできる。

wordpress-twitter-06

アップロード後、「投稿に挿入」をクリックすると、下図の通り画像が表示される。

この画像をクリックして「リンク挿入/編集」ツールを選択しよう。

wordpress-twitter-07

次のポップアップ画面が表示されるので、自分のTwitter ページのURLを入力しよう。

「リンクを新ウィンドウまたはタブで開く」にはチェックを入れておいた方が良いだろう。設定が完了したら「更新」ボタンをクリックしよう。

次にコードを取得するためエディタの「テキスト」タブをクリックしよう。

コードが表示されるので全て選択してコピーする。

後は、このコードをウィジェットに追加するだけだ。

2−3.WordPressにTwitter画像を設置

まず管理画面の左メニューの「外観 → ウィジェット」とクリックしてウィジェットの設定画面にアクセスしよう。下の画面にアクセスしたら、テキストウィジェットを選んで、先ほどのコードを貼付けよう。

wordpress-twitter-08

これでTwitterボタンがサイドバーに追加されたはずだ。サイトのトップページにアクセスして表示を確認してみよう。


3.まとめ

サンプルサイトで使用している ” Twenty Twelve ” というテーマでは、下の図のようにサイドバーの一番上に各種ソーシャルボタンを表示している。

実際のコードをここに貼付けておくので、あなた自身で設定する際の参考にして欲しい。

<p> <a href=”http://#”><img class=”alignnone size-full wp-image-522″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/facebook-32.png” alt=”facebook-32″ width=”32″ height=”32″ /></a>  <a><img class=”alignnone size-full wp-image-525″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/twitter-32.png” alt=”twitter-32″ width=”32″ height=”32″ /></a>  <a href=”http://#”><img class=”alignnone size-full wp-image-523″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/google-32.png” alt=”google+-32″ width=”32″ height=”32″ /></a>  <a href=”http://#”><img class=”alignnone size-full wp-image-524″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/rss-32.png” alt=”rss-32″ width=”32″ height=”32″ /></a></p>
<div class=”fb-like-box” data-href=”https://www.facebook.com/bazubu” data-width=”238″ data-height=”300″ data-colorscheme=”light” data-show-faces=”true” data-header=”false” data-stream=”false” data-show-border=”false”></div>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=444211749032087&version=v2.0”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

Twitter バナーのサイドバーへの設置方法は以上だ。サイドバーの設定に関してはあわせて以下の3つのページも確認しておこう。

・WordPressのサイドバーにFacebookのLikeboxを設置する方法
・WordPressのサイドバーにRSS購読ボタンを設置する方法

カテゴリー wordpress ウィジェット

記事をシェアする

  • B!

無料eBook:バズ部式マーケティング
広告費を1/10にして売上を倍増させる全手法

広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

ぜひ、貴社のWEBマーケティングにもご活用ください。

eBookをダウンロード

未読

参考にしていただきたい事例

liskulのtopページ

リスティング広告

1年でプッシュ型営業からプル型へ!毎月約200件の問い合わせを獲得するデジタルマーケティングブログ

  • SOLDOUT
  • ソウルドアウト株式会社様

学校 コンテンツマーケティング

学校・教育

1年半で億単位の貢献を果たすまでに成長した学校法人のコンテンツマーケティング事例

  • 神田外語学院
  • 神田外語学院 様
アバター
  • 著者 : バズ部編集部

ユーザーに届ける価値を徹底的に追及するのがバズ部式マーケティング。
バズ部では、ユーザー主義を貫きながら、なおかつ数字にこだわり結果を出してきた手法やノウハウを惜しみなく提供していきます。

  • 会社概要
  • 採用情報
  • セミナー
  • サービス紹介
  • 記事一覧

icon

株式会社ルーシー東京都港区新橋5-10-5 PMO新橋II 8階

ABOUT US

  • 運営者情報
  • セミナー
  • 採用情報
  • お問い合わせ
  • プライバシーポリシー
  • 特定商取引法に基づく表記
  • 紹介メディア

© Copyright 2025 バズ部. All rights reserved.