アフィンガー6のSNSツイッター設定&ツイッタータイムラインをサイドバーに表示する

ここでは以下のトピックをお伝えしています。

  • Twitterタイムラインやフォローボタンをサイドバーに表示させる方法
  • アフィンガー6で記事・プロフィールカード・「この記事を書いた人」のエリアにTwitterボタンを表示させる方法

アフィンガー6でのTwitterに関連するカスタマイズは一通り分かるようになっていますので参考にしてください。

この記事の信頼性

  • アフィンガーは2017年から使用・5年超使用
  • 2022年2月15日現在の2022年の累計実績349万円(とあるASP)
  • 専業IT業・「販売を追求し尽くす専業ブロガー」
  • 多くのジャンルでのアフィリエイト経験から、「アフィンガーだけ売ってるブロガー」とは違い、多様なジャンルに対応できる

熊谷からのアフィンター6ご購入15大特典の詳細はこちら

Twitterタイムラインをサイドバーに表示させる方法

Twitterのタイムラインをサイドバーに表示すると、以下のような感じになります。

熊谷ヒカル
この設定方法をお伝えして行きます!

Twitterタイムラインを表示させるコードを生成してくれる以下のサイトに移動しましょう。

step
1
以下「what would you like to embed?」の枠に、TwitterアカウントURLを記入して矢印をクリック

TwitterアカウントURLは、Twitterにログインして「プロフィール」を表示させたときのURL(上部赤枠内)です。

step
2
「Twitterのタイムラインを表示する左下のタイプ(赤枠内の方)」をクリック

step
3
オプションの入力

表示された画面に、以下のように「set customization options(青文字)」と表示されている箇所をクリック

以下の項目を入力して行きます

  • 高さ・横幅=ここでは高さに480と入力します
  • 背景色:ライト OR ダークを選択
  • 言語:日本語を選択


▼背景色ダークのイメージ

オプション項目を入力したら「updateボタン」をクリックします。

step
4
コードのコピー

step
5
コードをウィジェットに貼り付け

①「外観」→「ウィジェット」→「サイドバートップに『カスタムHTML』を投げ込む」

②カスタムHTMLにコードを貼り付けて保存

シロクマ
カスタムHTMLのタイトルに「○○のTwitter」などと文字を入れるといいよ!

step
6
正常に反映されているか確認

以下のように表示されていたOKです。

サイドバーに「フォローするボタン」を表示させる

前述サイドバーにTwitterのタイムラインを表示させた下に、以下のように「フォローする」のボタンを表示させることも可能です。

 

Twitterフォローボタンを表示させるコードを生成してくれる以下のサイトに移動しましょう。

step
1
以下「what would you like to embed?」の枠に、TwitterアカウントURLを記入して矢印をクリック

TwitterアカウントURLは、Twitterにログインして「プロフィール」を表示させたときのURL(上部赤枠内)です。

step
2
「Twitterフォローボタンを表示する右下のタイプ(赤枠内の方)」をクリック

Follow button(左下赤枠内)の方を選択します。

 

step
3
オプションの入力

フォローボタンのオプションには、以下のような項目があります。

  • ユーザー名の非表示
  • ボタンを大きくする
  • 言語:日本語を選択

 

▼デフォルトの状態

 

▼ユーザー名を非表示にした場合

▼ボタンを大きくした場合(左下)

オプションをどうするか決まったら、UPDATEボタンをクリック

step
4
コードをコピー

step
5
コードをウィジェットに貼り付け

①「外観」→「ウィジェット」→「サイドバートップに『カスタムHTML』を投げ込む」

②カスタムHTMLにコードを貼り付けて保存

シロクマ
ここでもカスタムHTMLのタイトルに「○○のTwitter」などと文字を入れてみてね!

step
6
正常に反映されているか確認

以下のように表示されていたらOKです。

 

アフィンガー6のTwitter設定

 

アフィンガー6でTwitterのアカウント設定

アフィンガー6でツイッターアカウントを設定するには以下の場所で行います。

設定場所

「⚙Affinger管理」→「SNS/OGP」→「Twitter設定」

「ハッシュタグ」と書かれた下の枠内に、Twitterアカウントを入力します。

 

Twitter名は、Twitterにログインして「プロフィール」を表示させたときに表示される「twitter.com/ユーザー名」のユーザー名の箇所です。

Twitterボタンを表示させる場所を選定

アフィンガー6では以下のようにTwitterボタンを表示させる場所を選ぶことができます。

Twitter表示場所

  • 投稿ページ上に表示/非表示
  • 固定ページ記事下に表示
  • 固定ページ上に表示(固定ページ記事下に表示している場合に有効)
  • トップページ下で非表示

この設定方法

「⚙Affinger管理」→「SNS/OGP」→「SNS設定」で該当箇所にチェックマークを入れて保存を押す

設定例

投稿ページでツイッターボタンを表示させた場合

Twitterボタンの色や形に関するカスタマイズ

Twitterボタンの色や形に関するカスタマイズは以下3つがあります。

ボタン色・形の変更

  • SNSボタンをシンプルにする
  • SNSボタンを丸くする
  • SNSボタンのカラーを優しくする

この設定方法

「⚙Affinger管理」→「SNS/OGP」→「SNS設定」で該当箇所にチェックマークを入れて保存を押す

設定例

「SNSボタンをシンプルにする」を設定した場合

「SNSボタンを丸くする」を設定した場合

シロクマ
「SNSボタンをシンプルにするを設定して保存を押してから」この「ボタンを丸くする」の設定を行ってみてね

SNSボタンを優しい色にした場合のTwitterボタン

▼優しい色にした場合

▼デフォルト

正直この「SNSボタンのカラーを優しくする」に関しては言われないと気付かないほどの微妙な変化でした。大きな変化はないと思います。

プロフィールカードやこの記事を書いた人にTwitterボタンを表示させる

アフィンガー6では、「プロフィールカード」や「この記事を書いた人」にもTwitterボタンを表示できます。

▼プロフィールカード

▼この記事を書いた人

このTwitterボタンの表示方法は以下の記事で詳しく解説していますので、参考にされてみてください。

【アフィンガー6の正直レビュー】&【アフィンガー6ご購入方法&ご購入特典】

熊谷からのアフィンター6ご購入15大特典の詳細はこちら

当サイトからのご購入者には収益5万円になるまで質問し放題のサポートを含む豪華15大特典を贈呈していますので、どうぞご活用ください。

熊谷ヒカルからのアフィンガーご購入15大特典

特典②~⑦は72000文字超!の超豪華ボリューム

  • 特典①アフィンガー6裏技的使い方①
  • 特典② アフィンガー6裏技的使い方①
  • 【ブログに収益の激流を起こす完全マニュアル】
    特典③ 準備編
    特典④ 作業編
    特典⑤ アクセスアップ編
  • 【ノウハウをコンテンツ化して収益化する完全マニュアル】
    特典⑥ 準備編
    特典⑦ 作業編
    特典⑧ アクセスアップ編
  • 特典⑨⑩ 動画&音声コンテンツ
  • 特典⑪ 動くアニメ付き!画像素材100点
  • 特典⑫ シンプル素材315種
  • 特典⑬ デザイン画像素材セレクション
  • 特典⑭ メルマガ
  • 特典⑮ 無期限メールサポート 収益5万円迄
  • この記事を書いた人

熊谷ヒカル

2017年からインターネットビジネスを始め、いろんなジャンルの特化サイトを構築してきました。


現在はブログ初心者さん向け・同じような志を持つ人に教えながら特化サイト構築を両立しています。


2022年の実績は349万円(「2022年の累計実績」・2月15日現在)、詳細は下記よりどうぞ。