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

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

2 голосов
/ 19 мая 2011

У меня есть небольшое веб-приложение, которое использует виджет 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 после факта.

EDIT:

Я также пытался использовать пример 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, так что это может быть частью проблемы.

1 Ответ

3 голосов
/ 19 мая 2011

Вам нужно добавить кнопку 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>
...