Обновление FB: как URL динамически с использованием JavaScript - PullRequest
Новая
       19

Обновление FB: как URL динамически с использованием JavaScript

11 голосов
/ 04 мая 2010

Я бы хотел изменить URL-адрес на FB: например, кнопку , динамически используя javascript.

сейчас я могу изменить только атрибут href тега fb:like (я вставил приведенный ниже код). но просто изменение href не работает. возможно, мне придется заново запустить кнопку FB: Like, но пока я не могу понять, как .. 

function update_share(container, url) {
  // update fb:like href value
  var container = container[0] || document.body;
  var button = container.getElementsByTagName('fb:like');
  button[0].setAttribute('href', url);
}

любая помощь будет оценена. ТНХ ..

Ответы [ 5 ]

23 голосов
/ 15 ноября 2010

Это работает для меня и для тега XFBML без использования iframe FB и даже работает с несколькими вызовами типа FB для AJAX

Вам просто нужно обернуть весь код XFBML в JS / jQuery и проанализировать его, как показано ниже: 

$('#like').html('<fb:like href="' + url + '" layout="button_count" show_faces="false" width="65" action="like" font="segoe ui" colorscheme="light" />');
if (typeof FB !== 'undefined') {
    FB.XFBML.parse(document.getElementById('like'));
}

HTML код: 

<span id="like"></span>

Наверное, это будет полезно для большего количества парней:)

8 голосов
/ 25 декабря 2011

Для повторного запуска социальных кнопок я использую этот код: 

//Facebook like
if(typeof(FB) !== 'undefined')
     FB.XFBML.parse(document.getElementById('fblike'));

//Google plus one
if(typeof(gapi) !== 'undefined') {
    gapi.plusone.render(document.getElementById('gplus'),{
        'href':location.href,
        'annotation':'bubble',
        'width': 90,
        'align': 'left',
        'size': 'medium'
    });
}

//Twitter tweet button
if(typeof(twttr) !== 'undefined') {
    $('.twitter-share-button').attr('data-url',location.href);
    twttr.widgets.load();
}

С таким html кодом: 

<div style="float:left;margin-top: 5px;width:80px;">
    <div id="gplus" class="g-plusone" data-size="medium"></div>
</div>
<div style="float:left;margin-top:5px;width:90px;">
    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
</div>
<div style="float:left;margin-top:5px;width:80px;" id="fblike">
    <fb:like send="false" layout="button_count" width="100" show_faces="false"></fb:like>
</div>
8 голосов
/ 27 августа 2010

другие решения:

вместо вашего fb: like объекта, напишите в своем html фрейме FB: 

<iframe id="face" name="face" src="http://www.facebook.com/plugins/like.php?href=http://www.google.fr&layout=button_count&show_faces=false&width=400&action=like&font=arial&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 400px; height: 21px;" frameborder="0"scrolling="no"></iframe>

и теперь вы можете изменить с помощью JavaScript эту функцию: 

function setUrl(url)
{
    sUrl = url;
    url = "http://www.facebook.com/plugins/like.php?href="+sUrl+"&layout=button_count&show_faces=false&width=400&action=like&font=arial&colorscheme=light";
    document.getElementById('face').setAttribute('src', url);
    //alert("url : "+url);
}

когда вы меняете src, iframe FB обновляется.

2 голосов
/ 06 мая 2010

Я думаю, у вас есть несколько вариантов ...

  1. Удалите элемент, создайте и добавьте строку XFBML, а затем проанализируйте родительский объект с помощью вызова XFBML.parse.

  2. Удалите элемент или его контейнер, создайте и добавьте фактический объект XFBML, используя

  3. Построить контейнер iframe, который передается по URL-адресу (с GET) с родительской страницы. Вы можете сделать это даже без использования реального бэкэнда, если сможете получить строку запроса в JS. Затем создайте разметку, прежде чем запускать SDK facebook, и кнопка «Мне нравится» будет отображаться. Facebook в любом случае вставляет все свои элементы, поэтому этот метод не так неуклюж, как кажется. Пробовал это, работает хорошо.

0 голосов
/ 28 января 2013

В последнее время вы также можете использовать версию HTML5, как описано здесь: http://elure.co/43_facebook-like-button-dynamic-url-javascript.htm

...