Sharing with Social media (Facebook, Twitter, tumblr, pinterest) while clicking using javascript

I have researched on Sharing with social media like facebook, twitter, tumblr and pinterest.
As I have researched I have found many plugins for this features, but I found many unused social media added in that plugins. So I have made this sharing features researching.

For Facebook Sharing, Using Facebook javascript sdk.
here is the code:

<a title="Share on Facebook" href="javascript:void(0);" onClick="return share();" >Share with Facebook</a>

<script  type="text/javascript">
                function share()
                {
                    FB.ui({ method: 'feed',
                    link: '',//link for facebook user to get back to the site
                    picture: "", //picture to share
                    name: '', //header title of the article
                    caption: "",  //caption for the picture in the article
                    description: ""  // description of the picture or the article
                    },function(response){
                        if (response && response.post_id) {
                                 //code for the callback response
                        }
                    });
                }
</script>

For Twitter Sharing, Using twitter javascript
here is the code.
<a title="Share on Twitter" href="javascript:void(0)" onclick='window.open("https://twitter.com/intent/tweet?url=/* Link to be shared*/&text=/*Text to be shared*/&via=/* site name or the twitter app name*/","share","left=20,top=20,width=500,height=500,resizable=0");return false;' rel="me" data-dnt="true" data-lang="en" data-count="none" data-via="/*site name or twitter app name*/" class="share_twitter" >Twitter</a>

<script>
         !function(d,s,id){
         var js,fjs=d.getElementsByTagName(s)[0];
         if(!d.getElementById(id)){
                 js=d.createElement(s);
                js.id=id;js.src="https://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js,fjs);
                }
         }
         (document,"script","twitter-wjs");
</script>

For Tumblr Sharing , here is the code.

<a href="javascript:void(0)" onclick="window.open('http://www.tumblr.com/share/photo?source=<?php echo  urlencode(/*Link of the site or the app*/); ?>&caption=<?php echo urlencode(/* capiton for the link*/);?>&clickthru=<?php echo urlencode(/*link for the tumblr to return back to the site*/ );?>','share','left=20,top=20,width=500,height=500,resizable=0'); return false;" title="Share on Tumblr">Tumblr</a>

<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js"></script>

Lastly, For Pinterest sharing, Here is the code.

<a   onclick="javascript: window.open(this.href);return false;" href="//www.pinterest.com/pin/create/button/?url=/*Link of the site*/&media=/*Link of the image to share*/&description=/*Description of the image of the page*/" data-pin-do="buttonPin" data-pin-config="none" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

and, place the below javascript inside the <head tag>

<script type="text/javascript">
    (function(d){
      var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
      p.type = 'text/javascript';
      p.async = true;
      p.src = '//assets.pinterest.com/js/pinit.js';
      f.parentNode.insertBefore(p, f);
    }(document));
</script>

I feel grad to share my research on this blog. Please comment.

Comments

Post a Comment

Popular posts from this blog

Google map API using MarkerClusterer and Geocoder

Image
This is the Tutorial or code which helps to make Google map using Marker Clusterer and Geocoder for programmer. Many Website uses Google map with lots of marker with it but it doesn't look nice and perfect. To display nice Google map in your website, you need to add Marker Clusterer. Marker Clusterer merges the collection of marker in one images with number in the marker. This is the code: First of all, We need Style of the body. Copy following code for the style. <style type="text/css"> html{ height: 100%;} body{ height: 100%; margin: 0; padding: 0} #map-canvas{ height: 100%} </style> Secondly, You need to copy the following javascript code to access Google map. Here I have called google map API and also called google map utility library and lastly jQuery. initialize() function only initializes the google map view with center in "LeighLab" <script type="text/javascript"  src="https://maps.google...
Read more...

Line or Graph chart for data in array.

I have research for the line graph or chart by many ways. But the easiest and fast processing tutorial is highchart graph. We can make any type of the chart using highchart. For more information on Highchart go to the highchart site . One of the example on the graph is as follow. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('#container').highcharts({ chart: { zoomType: 'x', spacingRight: 20 }, title: { text: 'USD to EUR exchange rate from 2006 through 2008' }, subtitle: { text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart ...
Read more...