このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Facebook OGPを動的に切り替え フィード画像切替 その2

Facebook

2012.11.04

この記事は最終更新日から1年以上が経過しています。

前回の

Facebook OGPを動的に切り替え フィード画像切替

の続きとなります。

では以下のページからいいねボタンを生成しましょう。

https://developers.facebook.com/docs/reference/plugins/like/

「いいね」の対象のページとなるURLを「URL to Like」に入力します。

URLを入力し、Send Buttonを外します。(iFrameでの生成が行えないため。)

Show facesを特に外す必要性はないのですが、今回は外します。

iFrame いいねボタン

では、取り敢えず設置。

HTML

<div id="photView" class="showPhoto" style="display: none;">
  <div class="likePhoto">
    <p class="thmb"><img src="img/img_000.jpg" alt="" /></p>
    <div class="likeBox"><iframe style="border: none; overflow: hidden; width: 350px; height: 35px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.webcyou.com%2F&send=false&layout=standard&width=350&show_faces=false&action=like&colorscheme=light&font&height=35&appId=取得したappidを入力" frameborder="0" scrolling="no" width="320" height="240"></iframe></div>
  </div>
</div>

キモとなるところは、以下のソースとなります。

http%3A%2F%2Fwww.webcyou.com%2F&

ここの部分がいいねの対象のurlなのでここを操作します。

写真をクリックすると、その写真に対する「いいね」のurlに変換します。

?photo=001 〜 ?photo=0xxの様に設定することにします。

何番目がクリックされたか、また取得するために

for文で回してた箇所に.numというナンバーのプロパティを与えましょう。

Javascript

for(var i = 0; i < photoItm.length; i++) {    
    photoItm[i].addEventListener('click', photoShow, false);
    photoItm[i].num = i;
}

さらに、00を付与するためのif文を追加。

Javascript

function photoShow(e){
    e.preventDefault();
    var elem = "";
    photoNum = this.num + 1;
    
    if(photoNum < 10){
     photoNum = '00' + photoNum;
    }
    else if(photoNum < 100){
     photoNum = '0' + photoNum;
    }
〜 省略

これでクリックされた画像の連番を取得することが出来ますので、FacebookのいいねボタンのURLをクリックされた画像によって変更します。

Facebookのiframeを取得し、ソースを変更します。

Javascript

ifrm = document.getElementById('facebookGoodBtn');

変更対象になる部分は以下のソースになります。

src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.webcyou.com%2F&send=false&layout=standard&width=350&show_faces=false&action=like&colorscheme=light&font&height=35&appId=取得したappidを入力"

?をエンコードすると%3F、=をエンコードすると%3dなりますので、

「%3F」をwww.webcyou.com%2Fの後に

「%3d」をphotoの後にそれぞれ追加し、フォトナンバーも追加します。 追加するソース以下のとおりです。

Javascript

ifrm.src = '//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.webcyou.com%2F%3F'+ 'photo%3d' + photoNum + '&send=false&layout=standard&width=350&show_faces=false&action=like&colorscheme=light&font&height=35&appId=取得したappidを入力';

これで、クリックされた画像によって、いいねボタンが変更されます。 画像1番目だと’https://www.webcyou.com/?photo=001’に、 画像11番目だと ‘https://www.webcyou.com/?photo=011’がいいねの対象となります。

ここまでのは以下のデモページで参照してください。

デモページ

次回はいよいよOGPを変更して、いいねボタンが押されたとき、

フィードにそのいいねの対象の画像を流すようにします。

Comment

Related Article

Facebook OGPを動的に切り替え フィード画像切替 その3

2012.11.05

Facebook OGPを動的に切り替え フィード画像切替 その2

2012.11.04

Facebook OGPを動的に切り替え フィード画像切替

2012.10.14

Facebookと連携する際よく使うツール、URL等のまとめ

2012.09.23

FacebookなどのSNSサービスで必要となってくる OGPについておさらい その2

2012.09.23

FacebookなどのSNSサービスで必要となってくる OGPについておさらい

2012.09.22

ブログにFacebookコメント設置 wordpressプラグイン Facebook Comment For WordPress編

2012.01.29

今更的ですが、Facebookページ始めました。

2012.01.29

CATEGORY LIST

LATEST NEWS

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

Rust - Actix Web × MongoDB環境をサクッと起動

Rust

2024.01.18

5分で学ぶ RustでWave Function Collapse (波動関数崩壊アルゴリズム)

Rust

2024.01.15

LLaMAモデル GGMLフォーマット(llama.cpp)をRustフレームワーク Leptosを用いて M1MacMiniでサクッと動かす。

Rust

2024.01.11

2024年 狙っているモバイルノートPC

tool

2024.01.07

MacOS XcodeにSDL2を追加

tool

2023.12.26

php 7.4にアップデート

PHP

2023.12.24

5分で覚える Flutter Flameで作る Wave Function Collapse - 波動関数崩壊アルゴリズム

AI・Bot・algorithm

2023.12.20

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US