Facebook Open Graph - кнопка «Мне нравится» - скрытое содержимое отображается после «Мне нравится» - PullRequest
Новая
       12

Facebook Open Graph - кнопка «Мне нравится» - скрытое содержимое отображается после «Мне нравится»

1 голос
/ 25 мая 2010

Мне было интересно, я хотел бы иметь целевую страницу с открытым графиком Facebook (в частности, кнопку «Мне нравится»), и я хотел, чтобы в основном было настроено отображение контента: нет (не могу вспомнить конкретное, пока пользователю не понравилась страница. Примером является div в интернет-магазине, когда пользователю нравится страница, div устанавливается на показ: block, и пользователи могут использовать купонный код для скидки.

Я бы хотел сделать это с помощью дисплеев Div.

Я видел этот небольшой фрагмент кода на форуме разработчиков Facebook:

| (взято из http://fbrell.com/xfbml/fb:like) (Примечание. Событие, которое вызывается при нажатии кнопки «Нравится») 

<script>
  // this will fire when any of the like widgets are "liked" by the user
  FB.Event.subscribe('edge.create', function(href, widget) {
    Log.info('You liked ' + href, widget);
  });
</script>

Можно ли изменить это, чтобы эффективно установить div из display: none to display: block?

Спасибо, ТАК.

Ответы [ 4 ]

2 голосов
/ 03 июля 2010

Если вы хотите обновить div до display:block, используйте ... 

<script>
  // this will fire when any of the like widgets are "liked" by the user
  FB.Event.subscribe('edge.create', function(href, widget) {
    $('#divid').css('display','block');
  });
</script>

Одна оговорка ...

Ваше edge.create событие не будет запущено, если только URL-адрес, который вы используете в качестве части вашего вызова, ТОЧНО совпадает с URL-адресом, с которого вы пытаетесь его запустить.

У меня был сайт, на котором я работал example.DEV (мой локальный ноутбук dev env), который ссылался на ссылку на example.com (действующий сервер) и все что угодно FB.Event.subscribe() блок не будет работать, пока я не загрузил файл и не запустил его с сервера LIVE.

Возможно, именно поэтому у вас возникли проблемы, если до сих пор это не работает!

2 голосов
/ 21 октября 2010

Я нашел следующее решение, но для этого вам понадобится jQuery. (возможно нет, но это то, что я использовал для этого).

Вот код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="facebook.js"></script>
<script src="jquery.min.js" type="text/javascript"></script>

</head>

<body>
<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function() {
 FB.init({appId: '133387220039676', status: true, cookie: true, xfbml: true});
 FB.Event.subscribe('edge.create', function(href, widget) {
 // Do something, e.g. track the click on the "Like" button here
    $('#slidingDiv').show();
 });
};
(function() {
 var e = document.createElement('script');
 e.type = 'text/javascript';
 e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
 e.async = true;
 document.getElementById('fb-root').appendChild(e);
 }());
//-->
</script>
<fb:like href="http://www.facebook.com/TheRightMind" layout="standard" show-faces="false" width="450" action="like" colorscheme="light"></fb:like>

<div id="slidingDiv" style="display:none;">
Fill this space with really interesting content that you can
</div>

</body>
</html>
0 голосов
/ 11 апреля 2013

Убедившись, что на странице будет указан этот код (попробуйте console.log("AOK!")), вы можете отобразить <div>, используя этот код:

Простой старый JavaScript: 

FB.Event.subscribe('edge.create', function(href, widget) {
  document.getElementById("topsecret").style.display = "block";
});

HTML: 

<div id="topsecret" style="display:none;">
  Content Goes Here
</div>

Если вы используете библиотеку jQuery или что-то подобное, вы можете использовать функцию show(), чтобы вместо этого появилось окно: 

FB.Event.subscribe('edge.create', function(href, widget) {
  $("#topsecret").show();
  //$("#topsecret").slideDown("fast");
  //$("#topsecret").fadeIn("fast");
});

Вы могли бы также рассмотреть возможность использования команды загрузки AJAX вместо этого, потому что в противном случае довольно легко заставить окно появиться, когда контент только скрыт. 

FB.Event.subscribe('edge.create', function(href, widget) {
  $("#topsecret").load("mycontent.html");
});
0 голосов
/ 25 мая 2010

Просто замените вызов Log.info() на JavaScript, который отображает div. В jQuery: 

<script>
  // this will fire when any of the like widgets are "liked" by the user
  FB.Event.subscribe('edge.create', function(href, widget) {
    $('#yourdiv').show();
  });
</script>
...