it-swarm-tr.com

Web siteme facebook paylaşım butonu nasıl eklenir?

Çalışması gereken ama işe yaramayan bir kodum var. Bu yine de size yardımcı olsaydı harika olurdu.

<script src='http://connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p>
    <p id='msg'></p>

    <script> 
      FB.init({appId: "338334836292077", status: true, cookie: 

true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          redirect_uri:'https://www.facebook.com/cryswashington?fref=ts',
          link:'https://developers.facebook.com/docs/reference/dialogs/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.'
        };

        function callback(response) {

        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

    </script>

Web siteme facebook paylaşım butonu eklemek istiyorum, web sitemin içeriğini duvara göndermem gerekiyor. kim paylaşmak istiyor.

Çok araştırdım ama hiçbir şey alamadım. Bana bu konuda yardımcı ol.

Şimdiden teşekkürler.

84
Sahibjot Singh

Tüm bu koda ihtiyacınız yok. Tek ihtiyacınız olan aşağıdaki satırlar:

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
  Share on Facebook
</a>

Belgeleri https://developers.facebook.com/docs/reference/plugins/share-links/ adresinde bulabilirsiniz.

214
asifrc

Bunu facebook tarafından sağlanan asenkron Javascript SDK kullanarak yapabilirsiniz.

Aşağıdaki koda bir göz atın

FB Javascript SDK başlatma

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Not: APP Kimliğinizi facebook Uygulamanızla değiştirmeyi unutmayın. Eğer facebook uygulamanız yoksa ve nasıl oluşturulacağını bilmiyorsanız lütfen kontrol edin

JQuery Library ekle, Google Library'yi tercih ederim

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Paylaşım iletişim kutusu ekle (Bu iletişim kutusunu parametreleri ayarlayarak özelleştirebilirsiniz

<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
</script>

Şimdi nihayet görüntü düğmesi ekleyin

<img src = "share_button.png" id = "share_button">

Daha detaylı bilgi için. lütfen buraya tıklayın

24
Virat Gaywala

Paylaş düğmesi hakkında daha fazla bilgi edinebilirsiniz burada Facebook geliştiricileri web sitesinde

Çalışma JSFIDDLE

Ayrıca özel Facebook Paylaşma düğmesine de bakın JSFIDDLE

<body> etiketinin açılışından hemen sonra Facebook JavaScript SDK kodunu ekleyin

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Ve Facebook Paylaş düğmesini göstermek istediğiniz yere kodun altına yerleştirin

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>

enter image description here

Çalışmayı kontrol et JSFIDDLE

13
Subodh Ghulaxe

Facebook payı için resimliAPI olmadan ve bir alt-linke derin link vermek için # sayfa, hile resmi picture= olarak paylaşmaktı.

mainUrl değişkeni http://yoururl.com/ olur

var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);

var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);

var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);

var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url=' + shareLink;

// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
  var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
  return false;
});

// Twitter
$(".my-btn .Twitter").off("tap click").on("tap click",function(){
  var twpopup = window.open("http://Twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
  return false;
});
4
t q

İletişim Kutusunu Paylaş Facebook girişi gerektirmeden

Bir bağlantıyı paylaşmak için paylaşım yöntemi parametresiyle FB.ui işlevini kullanarak Paylaşım İletişim Kutusunu Tetikleyebilirsiniz. Bu iletişim kutusu, bir URL’ye tam bir yönlendirme yaparak, JavaScript, iOS ve Android için Facebook SDK'larında kullanılabilir.

Bu aramayı tetikleyebilirsiniz:

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});

Facebook'ta tekrar paylaşılan hikayeyi özelleştirmek için bu URL'deki sayfaya açık grafik meta etiketleri de ekleyebilirsiniz.

Response.error_message uygulamasının yalnızca uygulamanızı kullanan biri uygulamanızı Facebook Girişiyle doğruladığında görüneceğini unutmayın.

Ayrıca Javascript Facebook SDK'ya tıklayarak arama linkini doğrudan paylaşabilirsiniz.

https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}
  • app_id => Uygulamanızın benzersiz tanımlayıcısı. (Gereklidir.)

  • redirect_uri => Bir kişi iletişim kutusundaki bir düğmeye tıkladıktan sonra yönlendirilecek URL. URL yönlendirme kullanılırken gereklidir.

  • display => İletişim kutusunun nasıl işlendiğini belirler.

URL yönlendirme iletişim uygulamasını kullanıyorsanız, bu, Facebook.com'da gösterilen tam sayfa bir ekran olacaktır. Bu ekran tipine sayfa denir. Eğer diyaloğu çağırmak için iOS veya Android SDK'larımızdan birini kullanıyorsanız, bu otomatik olarak belirtilir ve cihaz için uygun bir ekran tipi seçer. Facebook SDK'yı JavaScript için kullanıyorsanız, bu, varsayılan olarak Facebook.com'daki bir oyun içinde kullanırken uygulamanıza giriş yapan veya olmayan kullanıcılar için modal iframe türüne ve herkes için açılan bir pencereye göre olacaktır. Gerekirse, JavaScript için Facebook SDK'yı kullanırken açılır pencereyi veya sayfa türlerini de zorlayabilirsiniz. Mobil web uygulamaları her zaman dokunmatik ekran tipinde varsayılan olacaktır. Parametreleri paylaş

  • href => Bu gönderiye eklenmiş link. Metot paylaşımı kullanılırken gereklidir. Paylaşılan hikayeyi özelleştirmek için sayfaya açık grafik meta etiketlerini bu URL'ye ekleyin.
1
Somnath Muluk

Kendi özel sunucunuz veya farklı sayfalarınız ve resim butonlarınız için bunun gibi bir şey kullanabilirsiniz (sadece PHP)

<a href="http://www.facebook.com/sharer/sharer.php?u=http://'.$_SERVER['SERVER_NAME'].'" target="_blank"><img src="http://i.stack.imgur.com/rffGp.png" /></a>

Snippet'i bununla paylaşamıyorum ama bu fikri anlayacaksın ...

1
DagicCross