2012-09-13 21 views
5

すべての画像が動的に読み込まれる単一のHTMLページで画像ポートフォリオを構築するだけです。 facebook META OG:IMAGEを除いて、すべてこれまで素晴らしいです。jQueryでOG:IMAGEの値を変更する

OG:IMAGE URLを一度割り当てることができます... しかし、これは写真アルバムであるため、実際には各自のOG:IMAGEで写真を撮りたいと思います。

写真は、--li class = "open-pic"タグをクリックすると読み込まれます。 私は、-li class = "open-pic"タグをクリックするたびに、OG:IMAGEの値を変更したいと思います。

可能ですか? 私はこのようなものを見つけました:

$('meta[name=og\\:image]').attr('content', newImageUrl); 

しかし、私はli.open-PICのonclickイベントにこれをリンクする方法がわかりません。 ありがとうございました!

G.

答えて

3
$('li.open-pic').click(function(){ 
$('meta[name=og\\:image]').attr('content', newImageUrl); 
}); 
+1

おっと...とてもシンプルです。私は自分自身を恥じている。本当にありがとう。 – Cospefogo

+1

感謝の必要はありません:) ..もしこれが助けられるならば、答えとしてアップマークをマークするのを忘れないでください。これは他の人にも役立つかもしれない –

+0

私はこれがうまくいかないと信じています...はい、それはメタタグの価値を変えるでしょう...しかし、フェイスブックはメタタグに登録されていた元の画像を表示するので無駄です。 CBroeの答え... – dsdsdsdsd

14

ページのロードが一度だけ、私はOGを割り当てることができますので:一度画像のURLを...しかし、私は本当に独自のOGで、各画像を持っていると思います:IMAGE、これはフォトアルバムなので

変更OG METAタグのクライアント側ではありません、実際の使用である - それは彼らがあなたのURLに対してHTTPリクエストを行い、HTMLコードに何があるかが表示されます意味スクレーパー、だを通じてFacebookはこれらのタグを読み込みますので。スクレーパーはJavaScriptを実行しません。

解決方法:各写真のURLを独自のメタ情報で指定します。同じボタン/共有機能/どのFB機能がその写真のURLを指しているかを指定します。

(あなたはクライアント側は重要ではありません事を扱う方法 - 、あなたはまだ1ページ内のすべての写真を表示することができますあなたが好きなAJAXを介して新しいコンテンツをロードする - しかし、あなたはあなたの写真用に別のURLが必要になります個々のOpen Graphオブジェクトとして認識されるようにします)。

+1

ありがとう、CBroe!私は本当にあなたの明確化に感謝します。私はワードプレス環境に取り組んでいます。結局のところ、それぞれの写真ごとに1ページを作成します。そのページからの脱出はありません。 – Cospefogo

3

これはコロンです。一重引用符&を次のように二重引用符で試してみてください。

var imgSrc = $(this).find('img').attr('src'); // image stored as variable 
$('meta[property="og:image"]').attr('content', imgSrc); // assigns meta property 
関連する問題