In this video tutorial I will show you how to add Social Sharing Buttons in GeneratePress Free and Pro theme without using plugins.
Important: In the below PHP Code you will find this line $twitter_account_name = ‘your_twitter_username’; You have to replace ‘your_twitter_username’ with your own twitter account name.
GeneratePress Free: Social Sharing PHP Code
function wpframer_social_share_func() {
if(!is_singular()) return;
$twitter_account_name = 'your_twitter_username';
$wpf_page_url = urlencode(get_the_permalink());
$wpf_page_title = urlencode(get_the_title());
$wpf_page_image = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
$facebook_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M380.001 120.001h99.993V0h-99.993c-77.186 0-139.986 62.8-139.986 139.986v60h-80.009V320h79.985v320h120.013V320h99.994l19.996-120.013h-119.99v-60.001c0-10.843 9.154-19.996 19.996-19.996v.012z"/></svg>';
$whats_app_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M546.704 91.89C486.526 31.584 406.482-1.582 321.229-1.582 145.609-1.583 2.67 141.368 2.67 317.118c0 56.139 14.705 111.05 42.567 159.297L.001 641.595l168.959-44.34c46.595 25.382 99.013 38.835 152.222 38.835h.13C496.944 636.09 640 493.14 640 317.401c0-85.182-33.166-165.179-93.344-225.463l.047-.047zM321.323 582.315c-47.599 0-94.218-12.827-134.895-36.957l-9.697-5.788-100.265 26.257 26.776-97.726-6.272-10.04C70.312 415.965 56.4 367.244 56.4 317.13c0-146.082 118.832-264.96 265.066-264.96 70.713 0 137.328 27.65 187.302 77.622 49.996 50.127 77.493 116.588 77.493 187.42-.118 146.187-118.95 265.066-264.96 265.066l.024.036zM466.541 383.85c-7.913-4.028-47.115-23.233-54.39-25.89-7.276-2.658-12.58-4.028-17.977 4.027-5.268 7.914-20.587 25.89-25.252 31.265-4.666 5.28-9.284 6.035-17.197 2.008-7.914-4.028-33.674-12.426-64.064-39.568-23.634-21.095-39.662-47.221-44.328-55.134-4.665-7.914-.52-12.308 3.532-16.193 3.661-3.544 7.925-9.284 11.941-13.95 4.028-4.665 5.28-7.925 7.925-13.31 2.658-5.28 1.359-9.946-.637-13.95-2.008-4.015-17.977-43.217-24.485-59.185-6.39-15.603-13.063-13.43-17.965-13.701-4.665-.237-9.945-.237-15.2-.237-5.257 0-13.95 1.996-21.225 9.933-7.276 7.914-27.898 27.26-27.898 66.45 0 39.201 28.512 77.009 32.516 82.407 4.027 5.267 56.162 85.784 136.029 120.238 18.98 8.161 33.803 13.063 45.355 16.854 19.098 6.024 36.425 5.15 50.126 3.13 15.32-2.256 47.115-19.229 53.788-37.831 6.662-18.615 6.662-34.536 4.666-37.831-1.89-3.544-7.158-5.504-15.201-9.58l-.06.048z"/></svg>';
$twitter_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 462.799"><path fill-rule="nonzero" d="M403.229 0h78.506L310.219 196.04 512 462.799H354.002L230.261 301.007 88.669 462.799h-78.56l183.455-209.683L0 0h161.999l111.856 147.88L403.229 0zm-27.556 415.805h43.505L138.363 44.527h-46.68l283.99 371.278z"/></svg>';
$pinterest_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 2599 3333" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><path d="M576 3333c185-165 312-400 374-641 25-95 127-484 127-484 66 127 261 234 466 234 614 0 1056-564 1056-1267C2599 502 2050-1 1344-1 465-1-1 589-1 1231c0 298 159 670 413 788 38 19 59 10 68-28 6-29 41-166 57-231 5-20 3-39-14-59-84-102-152-290-152-464 0-449 340-884 919-884 500 0 850 340 850 828 0 551-278 933-640 933-200 0-350-165-301-368 58-242 169-503 169-677 0-156-83-286-258-286-205 0-368 211-368 495 0 180 60 302 60 302s-202 853-239 1012c-41 176-25 423-7 584l18 158z"/></svg>';
$linkedin_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M228.582 205.715h126.462v64.832h1.83c17.611-31.595 60.675-64.832 124.892-64.832C615.303 205.715 640 288.818 640 396.926v220.219H508.116V421.93c0-46.536-.969-106.442-68.576-106.442-68.67 0-79.194 50.658-79.194 103.052v198.605H228.581v-411.43zM137.152 91.43c0 37.855-30.721 68.576-68.576 68.576-37.855 0-68.587-30.721-68.587-68.576 0-37.855 30.732-68.576 68.587-68.576 37.855 0 68.576 30.721 68.576 68.576zM-.011 205.715h137.163v411.43H-.011v-411.43z"/></svg>';
$reddit_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M160.018 360.052c0-22.087 17.918-40.004 40.004-40.004 22.087 0 39.993 17.917 39.993 40.004 0 22.087-17.906 40.004-39.993 40.004-22.086 0-40.004-17.917-40.004-40.004zm239.991 0c0-22.087 17.918-40.004 40.004-40.004 22.087 0 40.005 17.917 40.005 40.004 0 22.087-17.918 40.004-40.005 40.004-22.086 0-40.004-17.917-40.004-40.004zm1.949 85.477c10.323-8.114 25.252-6.366 33.366 3.957 8.115 10.323 6.367 25.252-3.956 33.367-28.678 22.606-72.403 37.205-111.32 37.205-38.906 0-82.631-14.599-111.356-37.205-10.323-8.115-12.071-23.044-3.957-33.367 8.114-10.323 23.044-12.07 33.367-3.957 16.523 13.005 49.193 27 81.945 27 32.765 0 65.446-13.996 81.958-27h-.047zM640 280.055c0-44.209-35.8-80.008-79.997-80.008-30.083 0-56.245 16.606-69.922 41.126-41.115-22.477-91.206-37.04-145.797-40.394L392 93.58l91.347 26.362c8.245 23.327 30.438 40.076 56.611 40.076 33.119 0 60.001-26.883 60.001-60.001 0-33.119-26.882-60-60-60-22.843 0-42.733 12.755-52.844 31.57l-101.8-29.41c-11.398-3.283-23.48 2.316-28.288 13.158l-64.843 145.62c-53.197 3.768-102.037 18.13-142.266 40.158-13.689-24.52-39.839-41.126-69.922-41.126-44.21 0-79.997 35.8-79.997 80.009 0 32.681 19.63 60.804 47.705 73.194-5.031 15-7.724 30.673-7.724 46.807 0 110.434 125.352 199.987 279.996 199.987 154.644 0 279.996-89.552 279.996-199.987 0-16.122-2.681-31.795-7.725-46.807 28.123-12.39 47.706-40.513 47.706-73.194l.047.059zM539.995 77.588c12.449 0 22.536 10.075 22.536 22.524 0 12.438-10.087 22.524-22.536 22.524-12.437 0-22.524-10.086-22.524-22.524 0-12.449 10.087-22.524 22.524-22.524zM40.015 280.055c0-22.04 17.954-40.004 39.993-40.004 15.97 0 29.73 9.354 36.166 22.914-20.93 15.85-38.233 34.17-51.036 54.201-14.728-5.929-25.122-20.315-25.122-37.11zm279.997 272.507c-128.4 0-232.515-68.268-232.515-152.518 0-84.249 104.068-152.529 232.515-152.529 128.387 0 232.503 68.28 232.503 152.53 0 84.248-104.068 152.517-232.503 152.517zm254.86-235.397c-12.802-20.079-30.106-38.35-51.035-54.201 6.437-13.512 20.197-22.914 36.166-22.914 22.04 0 40.004 17.965 40.004 40.005 0 16.795-10.406 31.205-25.134 37.11z"/></svg>';
echo '<div class="wpf-social-share">';
echo '<a class="wpf-share-button wpf-facebook" href="https://www.facebook.com/sharer.php?u='.$wpf_page_url.'" target="_blank" rel="nofollow">'.$facebook_icon.'</a>';
echo '<a class="wpf-share-button wpf-twitter" href="https://twitter.com/share?text='.$wpf_page_title.'&url='.$wpf_page_url.'&via='.$twitter_account_name.'" target="_blank" rel="nofollow">'.$twitter_icon.'</a>';
echo '<a class="wpf-share-button wpf-pinterest" href="https://pinterest.com/pin/create/button/?url='.$wpf_page_url.'&media='.$wpf_page_image.'&description='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$pinterest_icon.'</a>';
echo '<a class="wpf-share-button wpf-linkedin" href="https://www.linkedin.com/shareArticle?url='.$wpf_page_url.'&title='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$linkedin_icon.'</a>';
echo '<a class="wpf-share-button wpf-whatsapp" href="https://api.whatsapp.com/send?text='.$wpf_page_title. ' ' .$wpf_page_url.'" target="_blank" rel="nofollow">'.$whats_app_icon.'</a>';
echo '<a class="wpf-share-button wpf-reddit" href="https://reddit.com/submit?url='.$wpf_page_url.'&title='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$reddit_icon.'</a>';
echo '</div>';
}
add_action( 'generate_after_entry_title','wpframer_social_share_func' );GeneratePress Pro: Social Sharing PHP Code
<?php
function wpframer_social_share_func() {
if(!is_singular()) return;
$twitter_account_name = 'your_twitter_username';
$wpf_page_url = urlencode(get_the_permalink());
$wpf_page_title = urlencode(get_the_title());
$wpf_page_image = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
$facebook_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M380.001 120.001h99.993V0h-99.993c-77.186 0-139.986 62.8-139.986 139.986v60h-80.009V320h79.985v320h120.013V320h99.994l19.996-120.013h-119.99v-60.001c0-10.843 9.154-19.996 19.996-19.996v.012z"/></svg>';
$whats_app_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M546.704 91.89C486.526 31.584 406.482-1.582 321.229-1.582 145.609-1.583 2.67 141.368 2.67 317.118c0 56.139 14.705 111.05 42.567 159.297L.001 641.595l168.959-44.34c46.595 25.382 99.013 38.835 152.222 38.835h.13C496.944 636.09 640 493.14 640 317.401c0-85.182-33.166-165.179-93.344-225.463l.047-.047zM321.323 582.315c-47.599 0-94.218-12.827-134.895-36.957l-9.697-5.788-100.265 26.257 26.776-97.726-6.272-10.04C70.312 415.965 56.4 367.244 56.4 317.13c0-146.082 118.832-264.96 265.066-264.96 70.713 0 137.328 27.65 187.302 77.622 49.996 50.127 77.493 116.588 77.493 187.42-.118 146.187-118.95 265.066-264.96 265.066l.024.036zM466.541 383.85c-7.913-4.028-47.115-23.233-54.39-25.89-7.276-2.658-12.58-4.028-17.977 4.027-5.268 7.914-20.587 25.89-25.252 31.265-4.666 5.28-9.284 6.035-17.197 2.008-7.914-4.028-33.674-12.426-64.064-39.568-23.634-21.095-39.662-47.221-44.328-55.134-4.665-7.914-.52-12.308 3.532-16.193 3.661-3.544 7.925-9.284 11.941-13.95 4.028-4.665 5.28-7.925 7.925-13.31 2.658-5.28 1.359-9.946-.637-13.95-2.008-4.015-17.977-43.217-24.485-59.185-6.39-15.603-13.063-13.43-17.965-13.701-4.665-.237-9.945-.237-15.2-.237-5.257 0-13.95 1.996-21.225 9.933-7.276 7.914-27.898 27.26-27.898 66.45 0 39.201 28.512 77.009 32.516 82.407 4.027 5.267 56.162 85.784 136.029 120.238 18.98 8.161 33.803 13.063 45.355 16.854 19.098 6.024 36.425 5.15 50.126 3.13 15.32-2.256 47.115-19.229 53.788-37.831 6.662-18.615 6.662-34.536 4.666-37.831-1.89-3.544-7.158-5.504-15.201-9.58l-.06.048z"/></svg>';
$twitter_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 462.799"><path fill-rule="nonzero" d="M403.229 0h78.506L310.219 196.04 512 462.799H354.002L230.261 301.007 88.669 462.799h-78.56l183.455-209.683L0 0h161.999l111.856 147.88L403.229 0zm-27.556 415.805h43.505L138.363 44.527h-46.68l283.99 371.278z"/></svg>';
$pinterest_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 2599 3333" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><path d="M576 3333c185-165 312-400 374-641 25-95 127-484 127-484 66 127 261 234 466 234 614 0 1056-564 1056-1267C2599 502 2050-1 1344-1 465-1-1 589-1 1231c0 298 159 670 413 788 38 19 59 10 68-28 6-29 41-166 57-231 5-20 3-39-14-59-84-102-152-290-152-464 0-449 340-884 919-884 500 0 850 340 850 828 0 551-278 933-640 933-200 0-350-165-301-368 58-242 169-503 169-677 0-156-83-286-258-286-205 0-368 211-368 495 0 180 60 302 60 302s-202 853-239 1012c-41 176-25 423-7 584l18 158z"/></svg>';
$linkedin_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M228.582 205.715h126.462v64.832h1.83c17.611-31.595 60.675-64.832 124.892-64.832C615.303 205.715 640 288.818 640 396.926v220.219H508.116V421.93c0-46.536-.969-106.442-68.576-106.442-68.67 0-79.194 50.658-79.194 103.052v198.605H228.581v-411.43zM137.152 91.43c0 37.855-30.721 68.576-68.576 68.576-37.855 0-68.587-30.721-68.587-68.576 0-37.855 30.732-68.576 68.587-68.576 37.855 0 68.576 30.721 68.576 68.576zM-.011 205.715h137.163v411.43H-.011v-411.43z"/></svg>';
$reddit_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M160.018 360.052c0-22.087 17.918-40.004 40.004-40.004 22.087 0 39.993 17.917 39.993 40.004 0 22.087-17.906 40.004-39.993 40.004-22.086 0-40.004-17.917-40.004-40.004zm239.991 0c0-22.087 17.918-40.004 40.004-40.004 22.087 0 40.005 17.917 40.005 40.004 0 22.087-17.918 40.004-40.005 40.004-22.086 0-40.004-17.917-40.004-40.004zm1.949 85.477c10.323-8.114 25.252-6.366 33.366 3.957 8.115 10.323 6.367 25.252-3.956 33.367-28.678 22.606-72.403 37.205-111.32 37.205-38.906 0-82.631-14.599-111.356-37.205-10.323-8.115-12.071-23.044-3.957-33.367 8.114-10.323 23.044-12.07 33.367-3.957 16.523 13.005 49.193 27 81.945 27 32.765 0 65.446-13.996 81.958-27h-.047zM640 280.055c0-44.209-35.8-80.008-79.997-80.008-30.083 0-56.245 16.606-69.922 41.126-41.115-22.477-91.206-37.04-145.797-40.394L392 93.58l91.347 26.362c8.245 23.327 30.438 40.076 56.611 40.076 33.119 0 60.001-26.883 60.001-60.001 0-33.119-26.882-60-60-60-22.843 0-42.733 12.755-52.844 31.57l-101.8-29.41c-11.398-3.283-23.48 2.316-28.288 13.158l-64.843 145.62c-53.197 3.768-102.037 18.13-142.266 40.158-13.689-24.52-39.839-41.126-69.922-41.126-44.21 0-79.997 35.8-79.997 80.009 0 32.681 19.63 60.804 47.705 73.194-5.031 15-7.724 30.673-7.724 46.807 0 110.434 125.352 199.987 279.996 199.987 154.644 0 279.996-89.552 279.996-199.987 0-16.122-2.681-31.795-7.725-46.807 28.123-12.39 47.706-40.513 47.706-73.194l.047.059zM539.995 77.588c12.449 0 22.536 10.075 22.536 22.524 0 12.438-10.087 22.524-22.536 22.524-12.437 0-22.524-10.086-22.524-22.524 0-12.449 10.087-22.524 22.524-22.524zM40.015 280.055c0-22.04 17.954-40.004 39.993-40.004 15.97 0 29.73 9.354 36.166 22.914-20.93 15.85-38.233 34.17-51.036 54.201-14.728-5.929-25.122-20.315-25.122-37.11zm279.997 272.507c-128.4 0-232.515-68.268-232.515-152.518 0-84.249 104.068-152.529 232.515-152.529 128.387 0 232.503 68.28 232.503 152.53 0 84.248-104.068 152.517-232.503 152.517zm254.86-235.397c-12.802-20.079-30.106-38.35-51.035-54.201 6.437-13.512 20.197-22.914 36.166-22.914 22.04 0 40.004 17.965 40.004 40.005 0 16.795-10.406 31.205-25.134 37.11z"/></svg>';
echo '<div class="wpf-social-share">';
echo '<a class="wpf-share-button wpf-facebook" href="https://www.facebook.com/sharer.php?u='.$wpf_page_url.'" target="_blank" rel="nofollow">'.$facebook_icon.'</a>';
echo '<a class="wpf-share-button wpf-twitter" href="https://twitter.com/share?text='.$wpf_page_title.'&url='.$wpf_page_url.'&via='.$twitter_account_name.'" target="_blank" rel="nofollow">'.$twitter_icon.'</a>';
echo '<a class="wpf-share-button wpf-pinterest" href="https://pinterest.com/pin/create/button/?url='.$wpf_page_url.'&media='.$wpf_page_image.'&description='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$pinterest_icon.'</a>';
echo '<a class="wpf-share-button wpf-linkedin" href="https://www.linkedin.com/shareArticle?url='.$wpf_page_url.'&title='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$linkedin_icon.'</a>';
echo '<a class="wpf-share-button wpf-whatsapp" href="https://api.whatsapp.com/send?text='.$wpf_page_title. ' ' .$wpf_page_url.'" target="_blank" rel="nofollow">'.$whats_app_icon.'</a>';
echo '<a class="wpf-share-button wpf-reddit" href="https://reddit.com/submit?url='.$wpf_page_url.'&title='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$reddit_icon.'</a>';
echo '</div>';
}
wpframer_social_share_func();
?>Social Sharing CSS Code
/* Social Share Plugin - Begins */
.wpf-social-share {
margin: 20px auto;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.wpf-share-button {
flex: 1;
padding-top: 10px;
}
.wpf-social-share .wpf-facebook {
background-color: #3b5998;
fill: #ffffff;
border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
}
.wpf-social-share .wpf-facebook:hover {
background-color: #627aad;
}
.wpf-social-share .wpf-twitter {
background-color: #000000;
fill: #ffffff;
}
.wpf-social-share .wpf-twitter:hover {
background-color: #222222;
}
.wpf-social-share .wpf-pinterest {
background-color: #c8232c;
fill: #ffffff;
}
.wpf-social-share .wpf-pinterest:hover {
background-color: #ca3949;
}
.wpf-social-share .wpf-linkedin {
background-color: #0072b1;
fill: #ffffff;
}
.wpf-social-share .wpf-linkedin:hover {
background-color: #627aad;
}
.wpf-social-share .wpf-whatsapp {
background-color: #25D366;
fill: #ffffff;
}
.wpf-social-share .wpf-whatsapp:hover {
background-color: #51dc85;
}
.wpf-social-share .wpf-reddit {
background-color: #ff4500;
fill: #ffffff;
border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
}
.wpf-social-share .wpf-reddit:hover {
background-color: #ff7933;
}
/* Social Share Plugin - Ends */How to Deactivate Some Social Media Buttons
If you want to deactivate some social media buttons –
- First, select the line of code which is used to display the social media (Facebook, WhatsApp etc) button.
- Next, add // in front as shown in the image below.
- Hit Save Button.
kindly make watusp group for more interesting update. i like to watch your vadio
Thank you bro.
bro you are awesome thanks a lot
Thank you bro.
Best tutorial ever! amazing
Thank you bro.
thankyou its works in GeneratePress Free
Yes, it works with GeneratePress free theme.
Do you have the SVG code for X (formerly Twitter)?
It’s Awesome. Thanks! dude.
Thanks, buddy. It also works when I paste this code into the function.php file without any code insert plugins installed.
nice content