MAIN

資産形成や水耕栽培について

baserCMS(4系)のヴィジェットにTwitterを埋め込む方法

Tag:baserCMS

ブログのサイドによくある感じでtwitterを埋め込もうとしたら、baserCMS3まではプラグインがあったのですが、baserCMS4以上のバージョンに対応したプラグインは見つかりませんでした。

せっかくなので当サイトで表示している方法を自分のメモがわりに書いておきたいと思います。

①まずは埋め込むためのコードを下記URLから取得します。

https://publish.twitter.com/に移動します。

埋め込みたいtwitterのURLを入力してEnterを押してください。

t1.png

埋め込み時の表示タイプを選択します。

t2.png

表示されたコードをコピーして、メモ帳などに貼り付けておきます。

※「set customization options」から埋め込み時の大きさや色を指定できます。

t3.png

 

②ヴィジェットを作成します。

baserCMSの管理画面にて、twitterを埋め込みたいヴィジェットの「ヴィジェットエリア編集」画面より、「利用できるヴィジェット」の中から「テキスト」を選び、「利用中のヴィジェット」に追加します。

t4.png

「利用中のヴィジェット」に追加した「テキスト」の設定にて、①でコピーしたコードの内、前半の<a></a>で囲まれている部分を貼り付けて保存します。

t5.png

次に、先ほどと同じように「利用できるヴィジェット」の中から今度は「PHPテンプレート」を選び、「利用中のヴィジェット」に追加します。

「利用中のヴィジェット」に追加した「PHPテンプレート」の設定にて、「PHPテンプレート名」を適時、設定してください。

私の場合はtwitter.phpとなるように設定しました。

t6.png

③スクリプトを別でサーバーに保存します。

最後に①で取得したコードのスクリプト部分をサーバーに直接保存します。

「PHPテンプレート」の設定の注意書きにあるように、サーバーの「/theme/{テーマ名}/Elements/widgets/」内に、

先ほど設定した「PHPテンプレート名」のファイルを作成します。

私の場合は月額99円から利用できるロリポップ!のサーバーを使っていて、下の画像のようになりました。

Elementsフォルダ内に、widgetsフォルダがなかったので自分で新規作成しています。

t7.png

作成した「PHPテンプレート名」ファイルを開いて、①で取得したコードの後半の<script></script>で囲まれている部分を張り付けて保存します。

t8.png

 

これでブログのサイドにtwitterが埋め込み表示できるようになったはず!

< Previous Article     To List     Next Article >