Блог

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

 <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286amp;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=186609524720286amp;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 во втором примере заканчивается на with ?y =119, а в первом — нет. Моя проблема в том, что я не буду знать, какое значение поместить в качестве строки запроса для виджета, пока не увижу, какая строка запроса передается на html-страницу. Кто-нибудь может объяснить, как я мог бы вставить динамическое значение в href? Сначала я попытался установить href постфактум следующим образом:

 <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286amp;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=186609524720286amp;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>
  

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

Вам нужно будет добавить кнопку 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=186609524720286amp;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>