Facebook paylaş düğmesi ve özel metin [kapalı]


94

Duvara veya haber akışına özel metin gönderen Facebook paylaş düğmesini yapmanın bir yolu var mı?


Yanıtlar:


94

Bunun gibi bir şey kullanıyoruz [tek satırda kullanın]:

<a title="send to Facebook" 
  href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
  target="_blank">
  <span>
    <img width="14" height="14" src="'icons/fb.gif" alt="Facebook" /> Facebook 
  </span>
</a>

4
Bu bağlantının bir açılır pencerede veya kalıcı bir pencerede nasıl açılacağını biliyor musunuz?
İşe yarayan

1
Üstteki cevaptan daha etkili.
Mateng

29
@tvgemert: Deneyin <a class="facebook" target="_blank" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer/sharer.php?u=YOUR_URL">Facebook</a>vb.
Mateng

Mükemmel, bu aynı zamanda hashbang url'leri için de işe yarar!
dvtoever

74
Bu artık çalışmıyor.
Chuck Le Butt

30

Facebook paylaşımına özel parametreler vermek, sadece bağlantıyı vermek daha iyidir ve facebook , paylaştığınız sayfadan otomatik olarak Başlık + Açıklama + Resmi alır . Facebook API'sinin bu şeyleri bulmasına "yardımcı olmak" için, paylaştığınız sayfanın başlığına aşağıdaki şeyleri koyabilirsiniz:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Burayı kontrol et

Sayfa sizin kontrolünüzde değilse, AllisonC'nin yukarıda paylaştıklarını kullanın .

Açılır pencere modalview türü davranışı için:

Kendi düğmenizi / bağlantınızı / metninizi kullanın ve ardından bu şekilde bir modal görünüm türü açılır pencere kullanabilirsiniz:

<script type= 'text/javascript'>
$('#twitterbtn-link,#facebookbtn-link').click(function(event) {
var width  = 575,
    height = 400,
    left   = ($(window).width()  - width)  / 2,
    top    = ($(window).height() - height) / 2,
    url    = this.href,
    opts   = 'status=1' +
             ',width='  + width  +
             ',height=' + height +
             ',top='    + top    +
             ',left='   + left;

window.open(url, 'twitter', opts);

return false;
});
</script>

twitterbtn-link ve facebookbtn-link'in her ikisi de çapaların kimlikleridir.


URL'ler aynıysa, meta özelliklerin verileri facebook tarafından önbelleğe mi alınıyor? Ya da örneğin her sayfa görünümünde ayrı POST verilerini girebilir miyim?
Mateng

Bununla ne demek istediğini anlamadım.
ShayanK

Az önce bununla karşılaştım. Ana sayfamda, işletmemle ilişkili facebook sayfasını beğenmek / paylaşmak için ayarlanmış bir kod var / paylaş Sayfada sahip olduğum facebook meta etiketlerini görmezden geliyor gibi görünüyor. Bu sorunla karşılaşan var mı?
Chris Hawkins

1
Bu yöntem artık işe yaramıyor gibi görünüyor. Bence özelleştirilmiş bir Facebook paylaşım düğmesi (kendi metniniz, başlığınız ve resminizle) elde etmenin tek yolu Facebook SDK'yı kullanmaktır.
Ryan Coolwebs

Harika bir çözüm, onu if( window.open(.....) ) event.preventDefault();sadece `` yanlış döndürmek; ˙! '' Yerine modern yapmak için ! - bu şekilde, yalnızca pencere açıldığında varsayılan davranışı (bağlantı açık) önler - açılmadığında geri dönüş sağlar ...
jave.web

12

IJas tarafından sağlanan bağlantıdan türetilen bu işlevi kullanın

function openFbPopUp() {
    var fburl = '';
    var fbimgurl = 'http://';
    var fbtitle = 'Your title';
    var fbsummary = "your description";
    var sharerURL = "http://www.facebook.com/sharer/sharer.php?s=100&p[url]=" + encodeURI(fburl) + "&p[images][0]=" + encodeURI(fbimgurl) + "&p[title]=" + encodeURI(fbtitle) + "&p[summary]=" + encodeURI(fbsummary);
    window.open(
      sharerURL,
      'facebook-share-dialog', 
      'width=626,height=436'); 
    return  false;
}

Veya daha kontrollü geri arama işlevi için FB JavaScript SDK kullanıyorsanız en son FB.ui İşlevini de kullanabilirsiniz.

bakın: FB.ui

    function openFbPopUp() {
        FB.ui(
          {
            method: 'feed',
            name: 'Facebook Dialogs',
            link: 'https://developers.facebook.com/docs/dialogs/',
            picture: 'http://fbrell.com/f8.jpg',
            caption: 'Reference Documentation',
            description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
          },
          function(response) {
            if (response && response.post_id) {
              alert('Post was published.');
            } else {
              alert('Post was not published.');
            }
          }
        );
    }

Bu FB.ui belki de en güvenilir yaklaşımdır, ayrıca bu komut dosyasını javascript'inizin geri kalanıyla birlikte sayfanızın alt kısmına yükleyebilir ve jquery değişkenlerini / seçicilerini değer olarak yükleyebilirsiniz. Bunu gönderdiğiniz için teşekkürler.
klewis

@blackhawk ... ama FB.ui ayrıca app_id gerektirir - bu her zaman bir seçenek değildir ... :)
jave.web

@Bravesh B Bağladığınız FB.ui ile ilgili dokümantasyonu araştırırken, FB.ui'ye ilettiğiniz parametreleri resim, başlık, açıklama gibi bulamadım. Onları nerede bulduğunu bana söyleyebilir misin?
Ferex

@Ferex parametreleri burada bulabilirsiniz developer.facebook.com/docs/sharing/reference/feed-dialog
Bhavesh B

1
18 Nisan 2017 itibarıyla, aşağıdaki parametreler Graph API 2.9 ve üzeri sürümlerde artık desteklenmemektedir. 2.8 ve daha düşük sürümler için parametreler 17 Temmuz 2017'ye kadar çalışmaya devam edecek.
Goran Jakovljevic

9

Birkaç seçeneğiniz var:

  1. Standart FB Paylaşım düğmesini kullanın ve sayfanızdaki Open Graph API ve meta etiketler aracılığıyla metni ayarlayın .
  2. Paylaşmak yerine FB.ui'nin stream.publish yöntemini kullanın; bu, çalışma zamanında URL, başlık, resim yazısı, açıklama ve küçük resmi kontrol etmenizi sağlar.
  3. Veya http://www.facebook.com/sharer.php'yi uygun parametrelerle kullanın .

2
İkincisini biraz daha açabilir misin? Bu parametreler nelerdir?
Jeroen Vannevel

6

Facebook tarafından sağlanan eşzamansız JavaScript SDK kullanarak ve parametre değerlerini ayarlayarak Facebook paylaşım iletişim kutusunu özelleştirebilirsiniz.

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

<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: 'URL which you would like to share ',
          picture: ‘URL of the image which is going to appear as thumbnail image in share dialogbox’,
          caption: 'Caption like which appear as title of the dialog box',
          description: 'Small description of the post',
          message: ''
        }
      );
    });
  });
</script>

Aşağıdaki kodu kopyalayıp yapıştırmadan önce, önce SDK'yı başlatmalı ve jQuery kitaplığını kurmalısınız. Aynı bilgileri nasıl ayarlayacağınızı adım adım öğrenmek için lütfen burayı tıklayın .


3

Bu mevcut çözümdür (Aralık 2014) ve oldukça iyi çalışıyor. Özellikleri

  • bir açılır pencere aç
  • kendi kendine yeten snippet, başka hiçbir şey gerektirmez
  • JS ile veya JS olmadan çalışır. JS devre dışı bırakılırsa, paylaşım penceresi küçük bir açılır pencere olarak olmasa da açılır.

<a onclick="return !window.open(this.href, 'Share on Facebook', 'width=640, height=536')" href="https://www.facebook.com/sharer/sharer.php?u=href=$url&display=popup&ref=plugin" target="_window"><img src='/_img/icons/facebook.png' /></a>

$ url var, paylaşılacak URL olarak tanımlanmalıdır.


sayfamın https ile başladığı durumumda çalışmıyor ...?
d4v1dv00

1
Facebook paylaşıcıdaki diğer parametreleri desteklemeyi bıraktığı için bu cevap geçersizdir
Vikrant


-2

AllisonC'nin fikrini window.openişlevle birleştirebilirsiniz : http://www.w3schools.com/jsref/met_win_open.asp

function openWin(url) {
    myWindow = window.open(url, '', 'width=800,height=400');
    myWindow.focus();
}

Ve sonra her bağlantıda doğru sosyal ağ URL'si ile openWin işlevini çağırırsınız.


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.