このサイトは、只今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番目だと’http://www.webcyou.com/?photo=001’に、 画像11番目だと ‘http://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

Flutter - Flameでゲーム作成 (キャラクターの移動)

Flutter

2023.07.23

Flutterで作る ChatGPT Prompt Manager

Flutter

2023.07.12

【M1 Mac】Python ScrapyがImportErrorで大ハマリ。lxmlなど環境作成し対応した件。

Python

2023.05.24

ミニPC Minisforum UM773 SE/ Liteがセールみたいだったので、ポチった件

イベント

2023.04.23

AI(ChatGPT)に聞くDart言語

Dart

2023.03.12

DartパッケージでPub Pointsを満点にする

Dart

2023.03.11

Dartパッケージをサクッと作成する

Dart

2023.03.07

DartでさくっとCLIツール作成。

Dart

2023.02.28

M1Macで行う「RUSTではじめるOpenGL」

Rust

2023.02.25

SolidityとEthereumによる実践スマートコントラクト開発 書評 ~ 再構築

暗号通貨、ブロックチェーン

2023.02.10

【Unity x WebAssembly】UnityコンテンツをBlazorとFlutterでWebアプリとして扱う

Unity

2023.01.30

【nasne】M1 Mac Miniで、「torne® mobile」使用して、テレビ視聴。

mac

2022.12.31

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US