Facebook・Twitter・Google+をブログに埋め込むならJetpackが超簡単|きにぶろぐ.com
当ブログと運営者について
プラグイン

Facebook・Twitter・Google+をブログに埋め込むならJetpackが超簡単

ブログにSNSを埋め込むならJetpack

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

FacebookページやTwitterのタイムラインを、ワードプレスブログのサイドバーに表示することができますが、各SNSの方で埋め込みコードを生成する必要があり、少し面倒なんですよね。

 

Google+ページに関しては表示する方法がわからなかったので、長らく放置していましたが、この3つのSNSを超簡単にブログに埋め込める方法が見つかりました。

その方法というのが、多機能プラグインの「Jetpack」なんですが、ワードプレスに導入すればSNSの埋め込み用ウィジェットが追加されるので、あとはパパッと設定するだけで表示させることができます。

 

そこで今回はJetpackのウィジェットを使って、3つのSNSをブログに埋め込む方法を解説していきたいと思います。

SNSアカウントの取得がまだの方は

ここでご紹介する方法は、Facebookページ・Twitter・Google+ページのアカウントを、すでに取得・作成されていることが前提となっています。

 

もしもまだ取得されていないという場合は、以下の記事の内容を参考にして取得作業を完了させていきましょう。

Facebook:ビジネス向けFacebookページの作り方や必要になる6つの設定について

Twitter:Twitterのアカウントを複数作成できる!Gmailならメアド1つで超簡単

Google+:google+アカウントの取得からビジネス用ページを作成する方法

 

上記3つのSNSの準備が完了したら、次にJetpackプラグインをワードプレスブログに導入していきます。

 

Jetpackをワードプレスに導入する

Jetpackは通常のプラグインと違って、「WordPress.com」のアカウントが必要になるので、プラグインをインストール&有効化した後は、アカウントを取得する流れになります。

 

作業の手順については、Jetpackプラグインを導入する方法で解説していますので、わからないという方は参考にされてみて下さい。

 

プラグインが導入されると様々な機能が使えるようになりますが、今回はSNSの埋め込み用ウィジェットしか使わないので、基本的にはすべてスルーします。

ワードプレスの管理画面左メニューから、「外観」⇒「ウィジェット」に移動すると、色々とウィジェットが追加されているはずです。

 

SNS用ウィジェットで埋め込み

それではFacebookページ・Twitter・Google+ページを埋め込む設定方法について、順にわかりやすく説明していきます。

 

Facebookページの設定

ウィジェットの一覧に「Facebook ページプラグイン (Jetpack)」があるので、追加したい場所にドラッグ&ドロップまたはクリックで選択します。

 

 

ウィジェットを追加すると入力できる項目が出てきますが、ここで必要になるのは「Facebook ページ URL」だけなので、それ以外は任意で入力・選択して最後に『保存』をクリックします。

 

 

「Facebook ページ URL」は個人ページの方ではなく、Facebookページ画面のブラウザ上に表示されているURLになります。

幅や高さなどは自分のブログに合うものを、お好みで調整されるといいかと思いますが、サイドバーに表示させるなら「幅300px × 高さ400px」くらいがいいでしょう。

 

これでFacebookページの設定は完了です。

 

Twitterのタイムラインの設定

次に「Twitter タイムライン (Jetpack)」のウィジェットを、同じ要領で任意の場所に追加しましょう。

 

 

Facebookの時よりもレイアウトやカラーなどの詳細な設定ができ、ここでの必要な設定は「ウィジェットタイプ」と「Twitter ユーザー名」です。

 

 

タイプは「プロフィール」と「ウィジェット ID」が選択できますが、ここは「プロフィール」にして下さい。

ユーザー名はTwitterアカウントの「@」から始まる名前を入力します。

 

あとはデザインなどを調整して『保存』すれば、Twitterの設定は完了となります。

 

Google+ページの設定

最後に「Google+ バッジ (Jetpack)」のウィジェットを、同じ要領で好きな場所に追加して下さい。

 

 

Google+の入力項目では、「ウィジェットの種類」と「Google+ URL」の設定が必要になります。

 

 

種類は「人ウィジェット」「ページウィジェット」「コミュニティウィジェット」があり、ここではGoogle+ページを表示させたいので、「ページウィジェット」を選択します。

URLはGoogle+ページの左メニューにある、「プロフィール」内のブラウザ上に表示されているURLになります。

 

カスタムURLにしていない場合は、たくさん数字が並んでいるかと思います。

あとは表示幅などを調整して『保存』をクリックすると、Google+ページの設定は完了となります。

 

フッターの方がブログの表示速度が速い

私のブログではサイドバーではなく下部のフッター部分に、3つのSNSの埋め込み用ウィジェットを表示させています。

 

 

今まではサイドバーに表示していたんですが、ワードプレスの表示速度低下の原因になっていたので、とりあえずフッターに移動させることにしました。

速度を計測するツールの「PageSpeed Insights」と「GTmetrix」で確認してみると、フッターで表示させた方が安定して評価が高かったので、今後はこの形でいこうかと思います。

 

フッター部分はカスタマイズして3カラムにしているので、もし気になるという場合はこちらの記事を参考にされてみて下さい。

参考:STINGER8でフッター用ウィジェットを追加して足元をオシャレに演出!

 

SNSの埋め込みまとめ

Jetpackプラグインを使うと、Facebookページ・Twitter・Google+ページを、手軽で簡単に埋め込むことができます。

これならイチから埋め込みコードを生成して、ブログに貼り付けるという作業をしなくても、ウィジェットを追加するだけなので非常に便利ですね。

 

は他にもワードプレスを高速化したり、ブログの統計情報を確認できたりと、機能性に優れているので、活用できる機会もたくさんあります。

まだ利用されたことがないという方は、ぜひJetpackを導入されてみて下さい。

 

合わせて読んでほしい

4方向からブログに集客!SNSと連携して最大限アクセスを高める方法

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール