How to make custom icon,url,title of facebook share button

 Simple solution to add Facebook share button would be to visit  http://www.facebook.com/share_partners.php and copy the code and paste it in your  webpage after replacing the text "url" with the actual URL of the page you want to  share. If it is dynamic content, you can use the variable or object name. 

<script>function fbs_click()

{u=location.href;t=document.title;window.open

('http://www.facebook.com/sharer.php?u='+

encodeURIComponent(u)+'&t='+encodeURIComponent(t),

'sharer','toolbar=0,status=0,width=6

26,height=436');return false;}</script>

<a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank"> <img src= "http://b.static.ak.fbcdn.net/images/share/

facebook_share_icon.gif?8:26981" alt="" /></a>

The problem I faced with the above approach is that I wanted to modify a widget to add Facebook share in place of another button, say the button associated with furl. But in this case we are creating a separate share on Facebook button and not modifying the widget. So we will take a look at the alternative technique.

From the above snippet we know that we have to access Facebook Web API to share  the link on it. So what I would do is display a facebook icon and pass the URL I want to save to http://www.facebook.com/share.php?

<a href='http://www.facebook.com/share.php?u=http://www.mindfiresolutions.com'>
<img alt='Facebook'src='http://i591.photobucket.com/albums/ss358

/danishctc/blogres/fbook24.jpg'/></a>

Now let us implement the code given above...Click on the Facebook icon to see how it works;)

Demo of Custom Share Button below: Contact me wasiul99@gmail.com for doing it by me( if you can't)

Another way for WordPress website with plugin solution.
Step 1: Goto Dashboard>>New plugin
Step2: Write in plugin search bar addthis
Step3: Install and active.
Step4: Go to addthis plugin page andset up buttons as post header/footer as your wish.
Step5: Here is main work-- Go to Plugin Edit page and senect addthis plugin
Contact me wasiul99@gmail.com for doing it by me( if you can't)
So i tried to made custom share button which is below the addthis plugin :
Thats : Custom Share on Facebook page! but when i click on it nothing happens also my title and link is shown on website : below is code of my custom Facebook share :

  <?php
    $title = the_title();
    $url= the_permalink();
    $summary=urlencode('Custom message that summarizes what your tab is about,  or just a simple message to tell people to check out your tab.');
    $image= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),  'single-post-thumbnail' );
  ?>
    <a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image[0];?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" target="_parent" href="javascript: void(0)">
        Custom Share on Facebook page!
    </a>

I have also putted OpenGrap tag in my wordpress header.php between head line

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<meta property="og:title" content="<?php the_title(); ?>" /> 
<meta property="og:description" content="" />  
<meta property="og:image" content="<?php echo $image[0]; ?>" /> 
<meta property="og:video" content="" /> 
<meta property="og:video:width" content="560" />  
<meta property="og:video:height" content="340" />  
<meta property="og:video:type" content="application/x-shockwave-flash" />

please let me know what going wrong and where. i need all my post from my website should be share on Facebook and twitter with it title,images( thats resp post image not any other image from website which is happening now ) and its description )


Update: 20.Dec.2014

Posted in: Help, Plugin, WordPress