Динамическая настройка href виджета Facebook

Question

У меня есть небольшое веб-приложение, которое использует виджет Facebook. На этой странице также используются строки запроса для динамической загрузки содержимого. Мне нужно, чтобы href, назначенный виджету Facebook, определялся динамически на основе строки запроса. Вот пример того, как я определяю виджет:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="http://apps.facebook.com/inflatableicons/image_preview.html" send="true" width="450" show_faces="true" font="">
</fb:like>

Но что мне действительно нужно, это что-то вроде этого:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="http://apps.facebook.com/inflatableicons/image_preview.html?y=119" send="true" width="450" show_faces="true" font="">
</fb:like>

Обратите внимание, что href во втором примере заканчивается на? Y =119, а первый - нет. Моя проблема в том, что я не буду знать, какое значение поместить в качестве строки запроса для виджета, пока не увижу, какая строка запроса передается на HTML-страницу. Может кто-нибудь объяснить, как я мог бы вставить динамическое значение в HREF? Сначала я попытался установить href после такого факта:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="#" send="true" width="450" show_faces="true" font="">
</fb:like>
<script>
  var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
  document.getElementById('fbLike').setAttribute('href', url);
  console.log(document.getElementById('fbLike'));
</script>

но когда я делаю это, виджет жалуется, что href не установлен, странно, когда я печатаю значение getElementById, он показывает href, который я установил с помощью setAttrbibute, даже если виджет не считает, что он был установлен правильно и выдает ошибку. Я считаю, что по какой-то причине виджет не позволит мне установить href после факта.

РЕДАКТИРОВАТЬ:

Я также попытался использовать пример jQuery, который Ферни описал в своем ответе, но это не сработало:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="#" send="true" width="450" show_faces="true" font="">
</fb:like> 
<script>
    var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
    jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
    FB.XFBML.parse(document.getElementById('fblikeblock'));
    console.log(document.getElementById('fblikeblock'));
  </script>

Я добавил console.log в конец скрипта, чтобы вывести значение fblikeblock, и он вернул значение null, так что это может быть частью проблемы.

Answer 1

Вам нужно добавить кнопку fb:like на страницу, а затем вызвать на ней процессор XFBML. Итак, что-то вроде этого (я предполагаю, что jQuery - используемая библиотека: вам придется изменить ее, если вы используете что-то еще):

var url = "http://apps.facebook.com/inflatableicons/image_preview.html?y=119";
jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
FB.XFBML.parse(document.getElementById('fblikeblock'));

РЕДАКТИРОВАТЬ: потенциальная реализация этого решения будет следующим.

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<div id="fblikeblock"></div>
<script>
    var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
    jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
    FB.XFBML.parse(document.getElementById('fblikeblock'));
    console.log(document.getElementById('fblikeblock'));
  </script>