If you want to add social share like Facebook, Twitter, Linkdin and other social share page in your wordpress site than here is solution. Add below line of code at the end of your theme’s functions.php file of your active child theme (or theme) and Save the file.
function wdo_wordpress_floating_social_shares() { /* Post ID */ global $post; $id = $post->ID; $title = get_the_title($id); $permalink = get_permalink($id); $sitename = get_bloginfo(); $excerpt = get_the_excerpt($id); $telephone = '1300235433'; ?>You can also add below css code in your style.css file of your active child theme (or theme) and Save the file.
.floating-social-wrapper { position: fixed; top: 50%; transform: translateY(-50%); } .wdo_social_share { width: 50px; height: 50px; position: relative; cursor: pointer; transition: all 0.2s linear; } .wdo_social_shared { width: 50px; height: 50px; position: relative; cursor: no-drop; transition: all 0.2s linear; } .wdo_social_share .fa { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 20px; } .wdo_social_shared .fa { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #000; font-size: 20px; } .wdo_social_shared.sharetitle { background: #F0F0F0; color: #000000; } .wdo_social_share.facebook { background:#3b5998; } .wdo_social_share.twitter { background: #55acee; } .wdo_social_share.reddit { background: #ff4500; } .wdo_social_share.google { background: #dd4b39; } .wdo_social_share.linkedin { background: #0098B2; } .wdo_social_share.whatsapp { background: #4dc247; } .wdo_social_share.wdocontact { background: #FFB301; } .wdo_social_share.wdophone { background: #4dc247; } .wdo_social_share.wdocomments { background: #0073AA; } .wdo_social_share:hover { width: 70px; } @media only screen and (max-width : 1000px) { .wdo_social_share { width: 25px; height: 25px; position: relative; cursor: pointer; transition: all 0.2s linear; } .wdo_social_shared { width: 25px; height: 25px; position: relative; cursor: no-drop; transition: all 0.2s linear; } .wdo_social_share .fa { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 13px; } .wdo_social_shared .fa { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #000; font-size: 10px; } } @media only screen and (max-width : 768px) { .floating-social-wrapper { display:none; } }
You must be logged in to post a comment.