簡単。WordPressでfacebookページとTwitterをサイドバーに埋め込む方法

WordPressでブログやメディアを運営している人は、

facebookやTwitterでも情報発信している人も多いはず。

そんな時にこういう風にサイドバーにfacebookやtwitterを埋め込む方法を紹介。

%e5%9f%8b%e3%82%81%e8%be%bc%e3%81%bf%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8

私もやりたくて実装したのだが、結構苦戦した割に凄い簡単だったのでメモの意味も込めて。

どちらもdeveloperページから

実はFacebookページもTwitterも、やり方はほとんど同じ。

Web初心者の私は、Wordpress上でわちゃわちゃいじっていたのだが、

実はどちらもfacebookとtwitterの開発者ページから設定を行うのだ。

Facebookページ

まずはFacebookページから。

1.Facebook Developersでコードを取得

検索エンジンで「facebook 開発者ページ」とかで検索すると、出てくる

「Facebook Developers – Facebook for Developers」にアクセスする。

facebook%e9%96%8b%e7%99%ba%e8%80%85%e3%83%9a%e3%83%bc%e3%82%b8

2016年12月時点では

ドキュメント→ソーシャルプラグイン→ページプラグイン

と進んでいくと、設定ページにたどり着く。

logo/fbfordevelopers

多分内部検索で「プラグイン」とかで調べたら、すぐ見つかると思う。

そこで、「埋め込みたいfacebookURL」「高さ」「幅」等を入力し、

「コードを取得」を押すと、Werdpress内に挿入するコードが出てくる。

%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e5%8f%96%e5%be%97

2つ出てくるのだが、どちらも使う。

facebook%e5%9f%8b%e3%82%81%e8%be%bc%e3%81%bf%e3%82%b3%e3%83%bc%e3%83%89

2.Wordpress内のウィジェットで埋め込み

コードを取得したら、WordPressのウィジェットに移動。

テキストを選択し、埋め込みたい場所に置く。

そして、テキスト内にさっきのコード2つを添付。

%e5%9f%8b%e3%82%81%e8%be%bc%e3%81%bf%e6%96%b9%e6%b3%95

これで、表示されるようになる。

twitter

お次はTwitter。

1.twitter側でコードを取得

Twitterにログインした状態でユーザータイムラインページにアクセスする。

もしくは、

検索エンジンで「Twitter 開発者ページ」にアクセス。

twitter%e9%96%8b%e7%99%ba%e8%80%85

メニューよりDocumentation→TwitterDevJP→埋め込みタイムライン

ここに来ると、やり方が書いてある。

Overview

アクセスすると、表示方法の選択があるので、好きな方を選ぶ。

%e8%a8%ad%e5%ae%9a2%e7%a8%ae

あとからすぐ変えられるので、とりあえずどちらか選んで進もう。

すると、「Copy code」ボタンが出てくるので押すとコードをコピーできる。

%e3%82%b3%e3%83%bc%e3%83%89%e5%8f%96%e5%be%97%ef%bc%86%e8%a8%ad%e5%ae%9a
「set customization options.」ボタンを押せば、大きさを変えるなどの設定画面が出てくる。

2.Wordpress内のウィジェットで埋め込み

あとはfacebookページの時と同様に、ウィジェットのテキスト内にコピーしたコードを埋め込むだけだ。

試してみよう

設定自体は非常に簡単でコードを書く必要もない。

是非試してみて欲しい。

すぎもん

東京育ち、秩父在住。
宅急便企業にて、通販企業支援、ふるさと納税サービス立ち上げ。
その後、ギフトEC企業にて事業部長。
やってること
・一棟貸し旅館(準備中)
・通販/物流ライター
・通販業務サポート
・旅×酒メディア「トラべろマガジン」

SNSをフォローする

すぎもんをフォローする
Web制作
シェアする
すぎもんをフォローする
スポンサーリンク
すぎもんのサイト