Facebook share button and custom text [closed]

Asked 26/5, 2011 at 12:53 Answered 22/12, 2014 at 11:54

Is there any way to make facebook share button which post custom text on the wall or news feed?

Infertile answered 26/5, 2011 at 12:53 Comment(1)

possible duplicate of Customize message field on Facebook Share – Idyll 6/11, 2013 at 23:37

We use something like this [use in one line]:

<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>

Intramolecular answered 26/5, 2011 at 13:0 Comment(9)

Do you know how to make this link open in a popup or modal window? Just can't find a method that works, it's not as simple as using some generic popup window code... – Diophantus 1/6, 2011 at 15:44

More effective then the answer on top. – Northnortheast 5/9, 2012 at 17:32

@tvgemert: Try

<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>

etc. – Northnortheast 6/9, 2012 at 9:39

Perfect, this also works for hashbang urls! – Dialogist 13/9, 2012 at 10:16

@Mateng, is there a way to do open it in a lightbox/colorbox instead of a "new window" with code similar to yours? – Mafala 18/2, 2014 at 18:21

@Mafala Use a lightbox that supports iframes and put the URL into the iframe. – Northnortheast 19/2, 2014 at 11:53

Whaaat? How has this not been selected as the answer? This worked perfectly and the little addition by @Northnortheast worked like a charm too! +1 for each of you – Poppyhead 21/2, 2014 at 17:42

This no longer works. – Barytone 11/5, 2014 at 11:52

change the '_blank' to '_window' – Parachute 15/5, 2014 at 9:19

To give custom parameters to facebook share its better to give only the link and facebook gets its Title + Description + Picture automatically from the page that you are sharing. In order to "help" facebook API find those things you can put the following things in the header of the page that you are sharing:

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

Check here

If the page is not under your control use what AllisonC has shared above.

For popup modalview type behavior:

Use your own button/link/text and then you can use a modal view type of popup this way:

<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>

where twitterbtn-link and facebookbtn-link are both ids of anchors.

Flock answered 21/2, 2012 at 12:58 Comment(5)

If URLs are identical, is the data from meta properties being cached by facebook? Or can I put in, e.g., individual POST data with every page view? – Northnortheast 6/9, 2012 at 9:14

I didnt get what you mean by that. – Flock 18/9, 2012 at 12:5

I just came across this. I have like/share code on my homepage that is set to like/share the facebook page associated with my business. It seems to be ignoring the facebook meta tags I have on the page. Anyone run into this issue? – Schober 13/8, 2014 at 23:25

This method does not seem to work anymore. I think the only way to achive a customised Facebook share button (with your own text, title and image) is to use the Facebook SDK. – Cristinecristiona 17/7, 2015 at 1:6

Great solution, to make it also modern do if( window.open(.....) ) event.preventDefault(); instead of just `return false;˙ ! - that way it only prevents default behaviour (link open) when window was opened - provides fallback when it was not... – Deodand 3/5, 2016 at 0:15

Youtube Uses this function for sharing

https://www.facebook.com/dialog/share?app_id=87741124305&href=https://youtube.com/watch?v=3hxE7Af98AI&feature=share&display=popup

The following one is a dated solution where you can use this function derived from link provided by IJas

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;
}

Or you can also use the latest FB.ui Function if using FB JavaScript SDK for more controlled callback function.

refer: 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.');
            }
          }
        );
    }

Cambodia answered 4/11, 2013 at 17:28 Comment(6)

this FB.ui is perhaps the most reliable approach, plus you can load this script at the bottom of your page with the rest of your javascript, and load in jquery variables / selectors as values. Thanks for posting this. – Expressionism 13/5, 2015 at 17:46

@blackhawk ...but FB.ui also requires app_id - that is not always an option... :) – Deodand 3/5, 2016 at 0:18

@Bravesh B Searching the documentation related to FB.ui you linked I couldn't find the params you pass to FB.ui like picture, caption, description. Could you tell me where did you find them? – Pastime 9/5, 2017 at 23:0

@Pastime you can find the params here developers.facebook.com/docs/sharing/reference/feed-dialog – Cambodia 17/5, 2017 at 9:44

As of April 18, 2017, the following parameters are no longer supported by Graph API versions 2.9 and higher. For versions 2.8 and lower, the parameters will continue working until July 17, 2017. – Camera 9/10, 2017 at 6:46

@BhaveshB i have use your code and i want to share only description but not working please check it here https://mcmap.net/q/206107/-php-form-textarea-text-on-facebook-share-when-click-on-button/10748606 – Athanasian 1/9, 2019 at 5:54

You have several options:

Use the standard FB Share button and set text via Open Graph API and meta tags on your page.
Instead of Share, use FB.ui's stream.publish method, which let's you control the URL, title, caption, description and thumbnail at run-time.
Or use http://www.facebook.com/sharer.php with appropriate parameters.

Hertz answered 26/5, 2011 at 13:2 Comment(1)

Can you elaborate on the latter? What are these parameters? – Killough 1/7, 2016 at 11:25

You can customize Facebook share dialog box by using asynchronous JavaScript SDK provided by Facebook and setting up its parameter values

Have a look at the following code:

<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>

Before copying and pasting the below code you must first initialize the SDK and set up jQuery library. Please click here to know a step by step how to set information on the same.

Kristynkrock answered 23/5, 2014 at 9:26 Comment(0)

This is the current solution (Dec 2014) and works quite well. It features

open a popup window
self-contained snippet, doesn't require anything else
works with or without JS. If JS is disabled, the share window still opens, albeit not as a small popup.

<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 should be defined as the URL to share.

Verona answered 22/12, 2014 at 11:54 Comment(2)

it doesn't work on my case where my page starts with https...? – Slipper 29/4, 2015 at 14:12

This answer is invalid now, as Facebook has stopped supporting any other parameters in sharer – Prove 16/10, 2019 at 7:17

This is a simple dialog feed that Facebook offer's. Read here for more detail link

Reprove answered 5/1, 2013 at 16:10 Comment(0)

-1

you could combine AllisonC's idea with window.open function: http://www.w3schools.com/jsref/met_win_open.asp

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

And then on each link you call the openWin function with the right social net url.

Boson answered 30/8, 2011 at 15:9 Comment(0)

-3

Try this site http://www.sharelinkgenerator.com/. Hope this helps.

Dematerialize answered 25/9, 2013 at 15:36 Comment(2)

This doesn't resolve the issue where people are looking for custom title/descriptions – Diversified 7/7, 2014 at 20:10

with your solution there is not possible to put custom text with facebook please give another solution – Havana 7/1, 2016 at 13:32

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

For popup modalview type behavior:

Recommended topics

Hot tags