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.