Facebook Share Button Code

Posted: July 1, 2012 in Facebook Knowledge base
Tags: , , , ,

These days social media is one of the main concern to increase website traffic or to popular once website. Facebook provides  sharing and like button  that can be embeded into any website or CMS with ease, It is good to let your visitors share content on your blog using their Facebook profile. It is  easy to use –  copying this snippet of code into your website and enjoy.

1. For WordPress

If you need to share your each blog  post to facebook, then simply copy and past the below code inside the while loop responsible for displaying all your blog posts or if you are displaying posts from one category.
<?php if(have_posts()):
while(have_posts()): the_post();
the_title();
the_content();
?>
<a href=”http://www.facebook.com/sharer.php?u=&lt;?php the_permalink();?>&t=<?php the_title(); ?>” title=”Facebook share button” target=”blank”>Share on Facebook</a>
<?php
endwhile;
endif;
?>

2. To embed into any website.

<?php
$current_url =”http://mywebsite.com&#8221;;
$current_title = “my custom title”;
?>
<a href=”http://www.facebook.com/sharer.php?u=&lt;?php echo $current_url; ?>&t=<?php echo $current_title; ?>” title=”Facebook share button” target=”blank”>Share on Facebook</a>

Note: To  pass custom parameters to a Facebook – Share button.

The default code script for Facebook share buttton,  Most of the time we need to pass our custom link and title. But this code does not work as expected. When share link is clicked the link from “u” parameter is passed but not the title from “t” parameter.
But  facebook actually uses standard content title, description, and images from meta-tags from the page that is going to shared.
The default code with stanadard paramertes “u” and “t”;

<a title=”Share this post/page title”
href=”http://www.facebook.com/sharer.php? u=http://mywebisite.com/mypage.php &t=my custom title”
target=”_blank”>
<img src=”path to image use as a link”
alt=”Share on Facebook” />
</a>
But we need different titles and descriptions for each post/page that is  going to be shared.
Here is a way that tells facebook what url, title and images to description to use for share button.

<a title=”Share this post/page”
href=”http://www.facebook.com/sharer.php?
s=100
&p[url]=url to share post/page
&p[images][0]=path to image
&p[title]=my custom title
&p[summary]=summery content”
target=”_blank”>
<img src=”path to image use as a link”
alt=”Share on Facebook” />
</a>

Advertisements
Comments
  1. Fredag says:

    Nice. But how to make this work when viewing the page on a mobile phone?

  2. Ashok says:

    To pass custom parameters to a Facebook – Share button.: Not working. Error messages shows that not able to post to the wall.

    • surindergiri says:

      Hi Ashok,

      You have to use the same syntax as I have written above, I have tested this script and its working well. If you are using “u” and “t” parameters and if its not working then try once using this syntax.. this will definitly work.
      ”Share

      If you have a long url to share then you can use php “urlencode()” function to avoid the spaces.

      Thanks,

  3. surindergiri says:

    Hi Fredag,
    Actually I have not tested this script for mobile phones. Try once using the same script for mobile then see if it works.

  4. prakash says:

    i have used this code but image donit share facebook only title and description share

  5. samah_elemary says:

    this code dosnot work with me
    please help me to complet this code to work

  6. surindergiri says:

    Hi All,

    If you are facing problems to implement this code. Please have a look to this working example.
    Example:
    facebook Share this image,title and Summary

    This will share image, title and summary to your facebook account.
    Have a good day and everyday. 🙂

  7. Great Post!!!!
    Tahnks a lot:)

  8. TotoSal says:

    Thanks admin . Very Good Post . and Code Work Fine .

  9. Rodo says:

    it just doesnt work

  10. shweta says:

    your code is good but it is not showing images on my side

  11. shweta says:

    Is there anything else that we need to so in it as I tried with your image path and this is showing properly can you please help me to resolve the issue

  12. delta01 says:

    Thanks a lot!!! code really helps me, specially on forum plugins.

  13. there is no code for counting no of share ? how can u do that?

  14. Anonymous says:

    THANKS!!! worked

  15. saisolutioninfotech says:

    Thanx great post. Your code is working greatly.

  16. Vrhen Diaz says:

    what is the php code for facebook share button ?
    how it will connect anser it please..?

  17. Vrhen Diaz says:

    this given codes on the top is only run to word press , how about others, it works?

  18. I think this is one of the most vital information
    for me. And i am glad reading your article.
    But wanna remark on some general things, The website style is perfect, the articles is really nice : D.
    Good job, cheers

  19. Ashish says:

    Thanks Buddy .

  20. Jimmy says:

    Is there a way to have a doubleclick tag placed in the link you want to share with out it breaking? Everything works well but I’d like to track the number of people that share this link.
    Thanks.

  21. mejiwara says:

    Hello I have a code here. Hard Coded for WordPress is what I want..

    Here’s the code:

    <a title="Share this post/page"
    href="http://www.facebook.com/sharer.php?
    s=100
    &p[url]= <- The permalink
    &p[images][0]=ID, $key, true); ?><-Link to image
    &p[title]= <- the php title
    &p[summary]=

    Please help. 🙂

    • surindergiri says:

      Hi Mejiwara,
      Please check my above reply “facebook Share this image,title and Summary”, I think you have fire bug (html inspector in firefox), use that tool to inspact the html, use the same html by editing the image path and your website url.
      Cheers 🙂 🙂

  22. mejiwara says:

    Can you display the code for displaying the thumbnail in your custom code?

  23. mejiwara says:

    Another thing I used this one -> &p[images][0]=path to image
    Can you site a sample what to put after equal sign?

  24. nathasha says:

    Hi great post but when I echo the summary using php nothing gets displayed.. What could be the problem

  25. amalarajini says:

    Nice. But its not working in mobile phone?

  26. amalarajini says:

    Got It!!!!…..
    You can prevent Facebook from going to the mobile site by adding a ?m2w parameter to the URL. Then, sharer.php works like usual.
    e.g::
    https://www.facebook.com/sharer/sharer.php?m2w&s=100…. (etc)

  27. chetan says:

    custom share works for the images which are on the other website but not work for my server published website image url .i need to refresh page multiple time the image will appear in the FB share lin popup .can you tell me what was the issue
    below is the url
    http://www.facebook.com/sharer.php?s=100&p%5Btitle%5D=Title&p%5Bsummary%5D=Desc summary&p[url]=http://apps.kairee.in/mybucket/default.aspx&p[images][0]=http%3a%2f%2f182.72.44.116%2fFBShareLink%2fimages%2fa.png

    • surindergiri says:

      You need to check file permissions on your server. Or you can check just putting the complete image url in your browser, if its displaying image, then it will work on facebook also. try this.

  28. muthu07 says:

    hi surinder,
    how can i put the image path in your code..

    i tried this code:

    function face(){
    var title = ”;
    var summary = ”;
    var url = ‘http://localhost/’;
    var image = ‘admin/clients/admin/’;

    var fb = window.open(‘http://www.facebook.com/sharer.php?s=100&p[title]=’+encodeURIComponent(title)+’&p[url]=’+encodeURIComponent(url)+’&p[summary]=’+encodeURIComponent(summary)+’&p[images][0]=’+encodeURIComponent(image));
    fb.focus();
    }

    but i cant get thumb image so can u help me how can the solve this issue

  29. dskanth says:

    Thanks for the info…similarly how can i share a link to twitter ? (The twitter share is working well in this site).

  30. Hello there! I could have sworn I’ve been to this blog before but after looking at some of the posts I realized it’s new to me.

    Anyhow, I’m definitely delighted I stumbled upon it and I’ll be bookmarking it and checking back regularly!

  31. colossusρ says:

    Hello there … thanks for the code m8 …

    is there a way to pass as “summary content” the name (value) of a div …???
    In that is stored the name of the now playing song (in my webradio) and i want to pass that name to the FB share dialog

  32. Hendra says:

    Hii surendergiri

    Thanks for the codes,
    I used this codes n looks good

    but there’s any problem, I can show image for just 1 article, n for another it’s not working. can u help me please ?

    ==========================================================================
    &p[images][1]=http://www.domain.com/Source/Data/Images/Articles/
    ===========================================================================

    Need ur reply A.S.A.P
    Regards,

    Hendra
    nb. sorry if my english so bad 🙂

    • surindergiri says:

      Hi Hendra,

      if you want to share multiple images then you need to use the same code inside loop, where you using those images, just change image path for every post/content. Then you have different image for every post/content.

      Best of Luck

  33. panosg7 says:

    Hello surindergiri i try your code works perfect !! when i press the share button and redirects me to facebook custom parameters is ok but when i press the share button on facebook loads the default meta tags. Need your help ASAP !! Thanks in advanced !! P.S I try the script local.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s