How CAN i add Share And Copy Button In Wordpress Blockquote

I Want to Add This Type Of Sharing Feature 👇👇 For My WordPress Website :- enter image description here

And This ☝️☝️ Screen Short Taken From blogger Website.

Now I will share the code Which is I Used In Blogger Website for This Sharing And copy feature and It's Work 🔥..

<script type='text/javascript'>
    //<![CDATA[
    $("blockquote").contents().filter(function () { return 1 !== this.nodeType }).wrap("<p class='copy-content'></p>"), $(".copy-content").wrap('<div class="blockquotes"/>'), $("blockquote .blockquotes").append('<div class="AT-share-wrapper"><span class="ats">Share:</span><span class="at-share-w"> <i class="sw" /></span><span class="at-share-f"> <i class="sf" /></span><span class="at-share-tg"> <i class="stg" /></span><span class="at-copy"><i class="cp" /> Copy</span></div>'),$("blockquote .blockquotes").append('<div class="AT-share-wrapper cp2"></div>'),$(function () { $(".at-copy").click(function (t) { t.preventDefault(); var n = $("<input>"); $("body").append(n), $(this).css({ background: "#d50000" }), n.val($(this).parent(".AT-share-wrapper").parent(".blockquotes").find("> .copy-content").text()).select(), document.execCommand("copy"), alert("copied the text"), n.remove() }), $(".at-share-w").click(function () { window.location.origin; var t = $(this).parent(".AT-share-wrapper").parent(".blockquotes").find(" > .copy-content").text(), n = "https://api.whatsapp.com/send?text=" + encodeURIComponent(t) + '%0A' + location.href + ""; window.open(n, "_blank") }), $(".at-share-f").click(function () { window.location.origin; var t = $(this).parent(".AT-share-wrapper").parent(".blockquotes").find(" > .copy-content").text(), n = "https://www.facebook.com/sharer/sharer.php?u=" + location.href + "&quote=" + encodeURIComponent(t); window.open(n, "_blank") }), $(".at-share-tg").click(function () { window.location.origin; var t = $(this).parent(".AT-share-wrapper").parent(".blockquotes").find(" > .copy-content").text(), n = "https://telegram.me/share/url?url=" + encodeURIComponent(t) + '%0A' + ""; window.open(n, "_blank") }) });
    //]]>
    </script>

<style>
    /*AT-Jokebox/Shayaribox*/ .AT-share-wrapper{position: relative; display: flex;margin-top: 8px; justify-content: center; align-content: center; align-items: center;} .AT-share-wrapper span{text-align: center; display: flex;margin: 0 3px; float: left; line-height: 1.4; justify-content: center; align-items: center; cursor: pointer;} .AT-share-wrapper span i.cp{padding-right:7px} .at-share-tg{background: #0088cc; font-size: 15px; border: 1px solid #0088cc; border-radius: 15px; color: #fff; width: auto; padding: 4px 16px;} .at-share-tg i.stg{color:#fff!important;width:20px; height:20px;background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 16 16&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 20px no-repeat} .at-share-w{background: #0f9806; font-size: 15px; border: 1px solid #0f9806; border-radius: 15px; color: #fff; width: auto; padding: 4px 16px;} .at-share-f i.sf{color:#fff!important;width:20px; height:20px;background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 20px no-repeat} .at-share-f{background: #3b5998; font-size: 15px; border: 1px solid #3b5998; border-radius: 15px; color: #fff; width: auto; padding: 4px 16px;}.at-copy:hover{background:black} .at-share-w i.sw{color:#fff!important;width:20px; height:20px;background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 20px no-repeat} .at-copy i.cp{background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 20px no-repeat;color:#fff!important;width:20px; height:20px;} .at-copy{background: linear-gradient( 90deg , rgba(253,29,29,1) 27%, rgba(252,176,69,1) 100%); font-size: 15px; font-style: normal; border: none; border-radius: 15px; color: #fff !important; padding: 4px 16px;}span.ats{font-size:18px!important;}
    </style>

I just want to know, how Can I apply this Code On My Wordpress Website. What I do Changes in this Script or Style and Where I Added on WordPress theme ??

Any Developer please Help Me ..

1 answer

  • answered 2021-06-19 08:16 Navin Poonia

    *You can use word press PLugins I used "Social Icons Widget & Block by WPZOOM" to add social media icons.

    install and activate this plugin*

    I have attached screenshot of how i used it in my demo project in Footer widget(section):

    Go to appearnce--> widget and then you can customize where you want to use these icons, you can also add link to these icons

    enter image description here