May 5, 2016

Add facebook twitter googleplus linkedin social share buttons as a developer point of view

Add facebook twitter googleplus linkedin social share buttons as a developer point of view so that you can implement it without any dependency on third party.

Here I am giving some very quick codes to add these social share buttons on WordPress … fixed on the right side at every page.

Why do we need this custom?

As a developer i tried using a lot of plugins but on basis of optimization i found each unsupported. Some was lacking alt tag, some was lacking height and width attribute and few wasn’t with css stripes . So i needed to code it directly to my blog.

Just keep in mind Its a very simple.

  1. Create a function and put it under function.php
function shaky_social_share(){
global $posts;
$sharetitle = $posts[0]->post_title;
$shareurl = get_permalink($posts[0]->ID);
$flitingSidebarContent = ‘<ul class=”shaky-share-wrap”>’;
$flitingSidebarContent .='<li><a class=”fb” href=”javascript:” onclick=”\’//’.$shareurl.’\’, \’\’, \’menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600\’);return false;” target=”_blank” title=”‘.$sharetitle.'”></a></li>’;

$flitingSidebarContent .='<li><a class=”tw” href=”javascript:” onclick=”\’//’.$shareurl.’&text=’.$sharetitle.’\’,\’_blank\’,\’width=800,height=300\’)” title=”‘.$tImgAlt.'”></a></li>’;

$flitingSidebarContent .='<li><a class=”gp” href=”javascript:” onclick=”\’//’.$shareurl.’\’,\’\’,\’menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=800\’);return false;” title=”‘.$sharetitle.'”></li>’;

$flitingSidebarContent .='<li><a class=”li” href=”javascript:” onclick=”\’//’. $shareurl.’\’,\’\’,\’menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=800\’);return false;” title=”‘.$sharetitle.'” ></a></li>’;
$flitingSidebarContent .='</ul>’;
return $flitingSidebarContent;

It will automatically get your URL and create a share link for all above share mediums.

2. Now call a function anywhere you want to show.

<?php echo shaky_social_share(); ?>

You can also create  a wordPress short-code for it. see how to create shortcodes in wordpress

3. Some Stylesheet.

.shaky-share-wrap li a{width:35px;height:35px;display:block;border-radius:50%;margin-bottom:8px;}
.shaky-share-wrap li a.fb{background-image:url(‘img/banner-share.png’);background-position:-12px -22px;}
.shaky-share-wrap li{background-image:url(‘img/banner-share.png’);background-position:-54px -22px;}
.shaky-share-wrap li{background-image:url(‘img/banner-share.png’);background-position:-95px -22px;}
.shaky-share-wrap li{background-image:url(‘img/banner-share.png’);background-position:-138px -22px;}

You have to add your own image and set background position accordingly. Here i am using below image:



You may also like...

Leave a Reply