Social Icons

twitterfacebookgoogle pluslinkedinemail

Wednesday 9 October 2013

how to add facebook likes, google plus, twitter tweet and pinterest button on site

Hello Friends,


If you want to add social button on your site look like image then please use the following code.

following code is used for facebook like button, twitter tweet box, google plus(G+) and pinterest.

how to use it???

just add following code i your site and just set the url, description and image to in this code.




Facebook Like :



                         <iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(page_url)?>;send=false&amp;layout=button_count&amp;width=75&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe>
               


Google Plus(+) :


                       <!-- Place this tag where you want the +1 button to render. -->
                       <div class="g-plusone" data-size="medium" data-href="<?php echo urlencode(page_url);?>"></div>
                       
                       <!-- Place this tag after the last +1 button tag. -->
                       <script type="text/javascript">
                         (function() {
                           var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                           po.src = 'https://apis.google.com/js/plusone.js';
                           var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                         })();
                       </script>
                  
 Twitter : 



 
                     <a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-related="" data-url="<?php echo urlencode(page_url)?>" data-counturl="<?php echo urlencode(page_url)?>">Tweet</a>
       <script type="text/javascript">
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
                           </script>
                 
 
 


Pinterest :                      <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>          <a href="//www.pinterest.com/pin/create/button/?url=<?php echo urlencode(page_url)?>&media=<?php echo urlencode(image_path) ?>&description=<?php echo urlencode(short_description) ?>" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

Full Code for all social button with style...


 <style>

.like_facebook_div { display: block; float: left; margin: 0;  padding: 0;}

.like_facebook_div .gp, .like_facebook_div .tw, .like_facebook_div .fl, .like_facebook_div .pint {   float: left;    width: auto;}

/*.like_facebook_div .tw {  float: right;  width: auto;}

.like_facebook_div .fl {  float: right;   margin-right: 8px;    width: auto;}*/

</style>

<div class="like_facebook_div">

             <div class="fl">

                          <iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(page_url)?>;send=false&amp;layout=button_count&amp;width=75&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe>

                 </div>

                <div class="gp">

                       <!-- Place this tag where you want the +1 button to render. -->

                       <div class="g-plusone" data-size="medium" data-href="<?php echo urlencode(page_url);?>"></div>


                        <!-- Place this tag after the last +1 button tag. -->

                       <script type="text/javascript">
                        (function() {

                           var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

                           po.src = 'https://apis.google.com/js/plusone.js';

                           var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

                         })();

                       </script>

                   </div>

                    <div class="tw" rel="<?php echo urlencode(page_url);?>">

                            <a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-related="" data-url="<?php echo urlencode(page_url)?>" data-counturl="<?php echo urlencode(page_url)?>">Tweet</a>

       <script type="text/javascript">

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

                              </script>
                     </div>
                     <div class="pint">                   <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
    <a href="//www.pinterest.com/pin/create/button/?url=<?php echo urlencode(page_url)?>&media=<?php echo urlencode(image_path) ?>&description=<?php echo urlencode(short_description) ?>" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
                   </div>
           </div>

Thanks,

Enjoy your self


3 comments :

  1. In your code snip it:
    div class="tw" rel="getProductUrl();?>"
    Why are you doing the getProductUrl()? What does this do for you?

    ReplyDelete
    Replies
    1. Its current url of the product i used the magento code that's i add it so now i update it...

      thanks for the comment...

      Delete
  2. You have done a great job. I will definitely dig it and personally recommend to my friends. I am confident they will be benefited from this site.
    Buy Facebook Likes Cheap

    ReplyDelete

 

Free Advertisement

Free Advertisement

Free Advertisement

Free Advertisement