{"id":198,"date":"2021-10-04T11:12:37","date_gmt":"2021-10-04T11:12:37","guid":{"rendered":"https:\/\/ethosspace.com\/programmers\/?p=198"},"modified":"2021-12-06T09:07:18","modified_gmt":"2021-12-06T09:07:18","slug":"how-to-add-social-share-icon-in-wordpress-without-plugin","status":"publish","type":"post","link":"https:\/\/ethosspace.com\/programmers\/how-to-add-social-share-icon-in-wordpress-without-plugin\/","title":{"rendered":"How to add social share icon in WordPress without plugin"},"content":{"rendered":"\n

Here is 10 line code that needs to add in the single.php file. This will avoid external calls, maintenance of plugins and improve speed.<\/p>\n\n\n\n

Step 1) Navigate to “Appearance”<\/strong> -> Theme Editor<\/strong><\/p>\n\n\n\n

Step 2) Observe Theme Files section available on Right side of the page (in middle)<\/p>\n\n\n\n

Step 3) Search for single.php<\/strong> file (available in functions.php section)<\/p>\n\n\n\n

Step 4) Click on Single.php File .. .System will open it in write mode.<\/p>\n\n\n\n

Step 5) Add below code before or after content in a single.php file. ( Just above main or primary section or above to sidebar or footer section)<\/p>\n\n\n\n

<?php $url = urlencode(get_the_permalink()); $title = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8'); ?>\n \n<div class='social-share'>\n<a class='fb' target="_blank" href="http:\/\/www.facebook.com\/sharer.php?u=<?php echo $url;?>">Facebook<\/a>\n<a class='tw' target="_blank" href="https:\/\/twitter.com\/intent\/tweet?url=<?php echo $url;?>&text=<?php echo $title; ?>">Twitter<\/a>\n<a class='pi' href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text\/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','\/\/assets.pinterest.com\/js\/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">Pinterest<\/a>\n<a class='go' target="_blank" href="https:\/\/plus.google.com\/share?url=<?php echo $url;?>">Google+<\/a>\n<a class='li' target="_blank" href="http:\/\/www.linkedin.com\/shareArticle?mini=true&url=<?php echo $url;?>">Linkedin <\/a>\n<a class='wh' href="whatsapp:\/\/send?text=<?php echo ($title ." ". $url);?>">WhatsApp<\/a>\n<a class='ma' target="_blank" href="mailto:?subject=<?php echo $title;?>&body=%20<?php echo $url;?>">EMAIL<\/a>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
Source : barattalo<\/a><\/p>\n\n\n\n
Step 6) Add below CSS code to design social text as button. Below code can be added in external CSS plugin or Themes -> Customize->Additional CSS Section.<\/p>\n\n\n\n
.social-share {margin:20px 0;}\n.social-share a {\n    display:inline-block; width:auto; height:30px; \n    background-color:#efefef; text-decoration:none;\n    line-height:30px; padding:0 10px;\n    font-size:10px;color:#fff!important;\n    letter-spacing:0.4;text-transform:uppercase;\n}\n.social-share a.fb {background-color:#3a5795;}\n.social-share a.tw {background-color:#00ccff;}\n.social-share a.go {background-color:#ff6633;}\n.social-share a.pi {background-color:#ff0000;}\n.social-share a.li {background-color:#3366ff;}\n.social-share a.wh {background-color:#009900;display:none;}\n.social-share a.ma {background-color:#999999;}\n@media only screen and (max-width: 480px) {\n    .social-share a.wh {display:inline-block;}\n}<\/code><\/pre>\n\n\n\n
Whats app share icon is visible only on mobile phone. Can change settings by editing css.<\/p>\n\n\n\n
In place of text button we can also use fab class for example =’fab fa-facebook’ to convert them in icon. and css for this is “.social-share a.fab.fa-facebook {background-color:#3a5795;}”
<\/p>\n","protected":false},"excerpt":{"rendered":"
Here is 10 line code that needs to add in the single.php file. This will avoid external calls, maintenance of plugins and improve speed. Step 1) Navigate to “Appearance” -> Theme Editor Step 2) Observe Theme Files section available on Right side of the page (in middle) Step 3) Search for single.php file (available in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[13],"tags":[],"class_list":["post-198","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"aioseo_notices":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"sparkling-featured":false,"sparkling-featured-fullwidth":false,"tab-small":false},"uagb_author_info":{"display_name":"program45_-rt8nb","author_link":"https:\/\/ethosspace.com\/programmers\/author\/program45_-rt8nb\/"},"uagb_comment_info":0,"uagb_excerpt":"Here is 10 line code that needs to add in the single.php file. This will avoid external calls, maintenance of plugins and improve speed. Step 1) Navigate to “Appearance” -> Theme Editor Step 2) Observe Theme Files section available on Right side of the page (in middle) Step 3) Search for single.php file (available in…","_links":{"self":[{"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/posts\/198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/comments?post=198"}],"version-history":[{"count":5,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/posts\/198\/revisions"}],"predecessor-version":[{"id":1067,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/posts\/198\/revisions\/1067"}],"wp:attachment":[{"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/media?parent=198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/categories?post=198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ethosspace.com\/programmers\/wp-json\/wp\/v2\/tags?post=198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}