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=<?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”;
$current_title = “my custom title”;
?>
<a href=”http://www.facebook.com/sharer.php?u=<?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>
Nice. But how to make this work when viewing the page on a mobile phone?
Thank buddy
i am looking for a script where i am able to share default image + title as well.
pls help
To pass custom parameters to a Facebook – Share button.: Not working. Error messages shows that not able to post to the wall.
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.
If you have a long url to share then you can use php “urlencode()” function to avoid the spaces.
Thanks,
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.
i have used this code but image donit share facebook only title and description share
this code dosnot work with me
please help me to complet this code to work
Hi,
Can you please show me your code why its not working for you. I am using this code to share posts on facebook. Let me check your syntax first.
Regards,
Surinder
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. 🙂
Copy html code for the anchor tag using your firebug, modify it and use into your application.
Have a good day and everyday. 🙂
Great Post!!!!
Tahnks a lot:)
Thanks admin . Very Good Post . and Code Work Fine .
it just doesnt work
Hi,
Its so simple you have to inspect the code behind “facebook Share this image,title and Summary” text and update the variables accordingly. hope this will help you.
your code is good but it is not showing images on my side
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
Hello,
You have to just update the image path to your own image, its good if you can put complete path (including http://youwebsite.com/folder/images.jpg etc) to the image not the relative one. I hope this will help you 🙂 🙂
Thanks a lot!!! code really helps me, specially on forum plugins.
there is no code for counting no of share ? how can u do that?
Hi,
In order to count no of shares, you have to use facebook bullent in buttons like “Like Button” etc.
please revert me asap
Hi Punit,
If you want to count the number of shares from your website then you can use the facebook default plugins.
THANKS!!! worked
Thanx great post. Your code is working greatly.
what is the php code for facebook share button ?
how it will connect anser it please..?
Hi,
The given code will help to share on facebook, if you want to use the same in php you can change the urls according to your need.
this given codes on the top is only run to word press , how about others, it works?
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
Thanks Buddy .
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.
Figured it out. Thanks.
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. 🙂
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 🙂 🙂
Can you display the code for displaying the thumbnail in your custom code?
Another thing I used this one -> &p[images][0]=path to image
Can you site a sample what to put after equal sign?
Hi great post but when I echo the summary using php nothing gets displayed.. What could be the problem
Nice. But its not working in mobile phone?
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)
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
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.
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
You have to enter the full path to the image like “http://yourwebsite.com/imageis/xxxxxxx.jpg”
Thanks for the info…similarly how can i share a link to twitter ? (The twitter share is working well in this site).
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!
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
HI,
Please check my above reply named “facebook Share this image,title and Summary”
You can pass text under “summary” parameter.
Surinder
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 🙂
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
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.
Hi Panosg7,
Please check my reply above dated October 15, 2012 at 3:48 pm
You can copy whole anchor tag and can use on your website. That’s working fine.
Thanks