無いものを作る趣味の工作やバイクいじり、お出かけネタなどを取り扱っています。

Facebookの 「いいねボタン」 付けました

| コメント(0)

今日は雨降りで外に出れなかった・・・・・


ヒマなので「いいね!」ボタンとFacebookコメント欄を付けてみました
最初は難解でしたが理解できれば意外と簡単です

以下は


「初心者でもわかる!! Face bookいいねボタン配置方法 Movable type編」(とかいいつつ忘備録)

です




とりあえず最低限アカウントは必要です
取得したら

Facebook開発者のページ(英語)

でリンク用のhtmlコードを入手します
ページ中ほどにあるボックスに各種情報を入力します

fb1.jpg

URL to like

     ボタンを設置するWebページのURLを入力します
       http:// から入力


Sendbutton

     送信ボタンも設置する場合チェックを入れます

LayoutStyle

     表示形式を選択します
       表示形式を変更してコンパクトにしても、
       送信ボタンを押した時表示が切れてしまう可能性があるので

       とりあえずStandardにします

Width

     変更してもあまり意味はないのでとりあえずデフォルトの450で


Font

     日本語表示の場合関係ありません


Color Schme

     ボタンを黒くするか白くするか選択できます


Verb to Display

     ボタン表示を「いいね」と「おすすめ」で選択可能です




全て条件を入力したら、Get codeボタンを押します


fb2.jpg

埋め込み用のコードが表示されたらとりあえず1.の部分を選択してコピーします

<body>のすぐ後にコピーしてくださいと書いてありますが
自分のような趣味でサーバーを運用している素人はMovable Typeの場合どこで何をしたらいいの??
となる訳です

Movable typeはバラバラになったWebページのパーツを
Perlのプログラム上で組み合わせて表示する仕組になっている為
ここでは<body>以下を表示するパーツを探せばいいわけなのですが
それはここにあります

fb3.jpg


「デザインタブ」内の「テンプレート」タブ内にある「テンプレートモジュール」以下の「ヘッダー」部分です

fb4.jpg


クリックすると編集画面になりますから
先ほどコピーしたコードを貼り付けします


fb5.jpg



貼り付けしたら保存ボタンを押して保存します

再びFacebookのページに戻り2.のプラグインコードを選択しコピーします

Movable typeの画面に戻り先ほどのテンプレートモジュールの画面にある「テンプレートモジュールの作成」を押します


編集画面が出ますので
プラグインコードを貼り付けします

fb6.jpg

タイトルはFacebookなどわかりやすい名前を適当につけておきます

画面では大量に<br>が入っていますが
ボタン下のスペースを確保するために入れてあります

もっとスマートな方法があると思いますが調べるの面倒なので・・・・・

入力が完了したら保存してください

保存が完了するとテンプレートモジュール内に「Face book」というモジュールが追加されているはずです

とりあえずメインのページにボタンを追加したいのであれば
同じ画面の一番上にある「インデックステンプレート」内の「メインページ」をクリックします

編集画面が出たら、適当な<$mt:Include module="プラグイン名"$>をコピーして表示したい位置に張り付けた後プラグイン名の部分を「Face book」に書き換えます

自分は記事の最後に表示したかったので、「フッター」の手前に追加しましたが、場所を変えればいろいろな部分に追加することができます

fb7.jpg

Javascriptのコードが<body>以下に記入されていれば
ウィジェットとして登録することもできますが
サイズの関係で切れてしまうためオススメできません


以上の作業が終了したのち再構築すればメインページにボタンが配置されているはずです

コメントする

2020年12月

    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

この記事について

このページは、かいざーが2013年5月20日 22:11に書いた記事です。

ひとつ前の記事は「調整ついでに」です。

次の記事は「FTR250ガソリンタンク増設①」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ブログランキング・にほんブログ村へにほんブログ村 バイクブログ バイク 修理・整備へ
にほんブログ村 バイクブログ ソロツーリング(バイク)へ
にほんブログ村 IT技術ブログ Webサイト構築へ