Social Share Buttons in Blog Posts

Hello I am using Newspaper 6.1 wordpress theme. I want to add “Share on Whatsapp” button in blog posts which will only show in mobile and tablet devices. And also I want to remove the “Share on Pinterest” button in blog posts. Rather I want to add a “Pin it” button in all images in blog posts so that any one can pin the images on Pinterest. Just like this: http://prntscr.com/7mv8yz . I dont know how to do it. Can you please help me to fix all these? Thanks in advance.

Well, you’re not “Fixing” anything, you’re customizing things.

Here’s what you can do. Mind you, these are only steps and locations; you need to know how to use CSS and HTML to actually perform the changes:

Adding WhatsApp & Removing Pinterest: The code for the default sharing blocks are in newspaper/includes/modules/td-module-single.php and there are two sections, one for above and one for below the post. They’re just links added to a variable so remove what you don’t need or change it as needed.

I wanted to add Reddit and remove Pinterest so I deleted the Pinterest blocks from both, created a td-social-reddit class for the background color, and changed the icon in the <i> element to td-icon-reddit and added the styles to the Custom CSS panel in the theme settings (to avoid overwriting on updates).

If the WhatsApp button uses a share URL and not a javascript function, it’s simple enough to copy the Google Plus button code in each location and adjust the URL in it and even add variables to it like I did with Reddit (See example on my site: Single post on my site showing the sharing buttons with Reddit and no Pinterest)

Please note that the default sharing buttons in that file all include some javascript inside of <script></script> tags within the chunk of code. This is primarily for handling the popup behavior of each link. Removing it or using your own JS without such a function will make clicking the share link open in the current full browser window, taking users away from your site.

Adding Pinterest to Images: There are several free and premium plugins that handle this. I suggest you implement one of them after removing the default Pinterest share button as described above.

These aren’t difficult changes to make, though. If you’re familiar with coding then it should be self-explanatory how to complete the steps above. Good luck!

Hi Sir, I am not good in coding so I am messed up all the way. This is my website: http://www.kickscoop.com I removed the pinterest and google+ share button from blog post. Now i want all these things to be customized in Social share buttons:

1) Adding a “Share on Whatsapp” button both in top and bottom of the post. Also customize the buttom to look green and have whatsapp icon (Whatsapp Share URL: whatsapp://send?text=The text to share! [Got it from Stackoverflow] )

2) Remove the Classic Facebook like and Twitter tweet button from bottom sharing buttons and also remove the boxed part. Both the sharing buttons present above and below should look nearly the same. Also after clicking “Tweet on Twitter” the share url should popup, not open it in the same tab.

3) “Share on Whatsapp” button should be visible only on tablet and mobile devices but not in desktop devices.

Sir, Can you please help me to customize? If you can just edit the codes and share it with me or I can mail you my login credentials so that you can make change directly from my admin panel if you wish. Thanks in advance

The share links are opening in the same window because you have altered the code and somehow broken the default behavior. Newspaper comes with share links that open in a popup. Use the original files to revert the remaining links back to their default state.

Free WhatsApp WordPress Plugin
Use that plugin for WhatsApp integration, or search for others.

The classic Facebook and Twitter buttons can be removed from the theme settings panel. Go to Post Settings > Sharing to administrate those options.

Thanks for the help Sir. Sir I dont want to add any plugin for whatsapp. I want to have an inbuilt share on whatsapp button, like this site: http://www.storypick.com/ They are not using any plugin rather they have inbuilt “Share on whatsapp” code. So I wish if you could help me to make some changes in code so there I will have “Share on Whatsapp” button both above and bleow blog posts (It should be visible only in tablet and mobile devices). Thanks in advance

I agree with @alin_vlad. If you don’t want to use a plugin and don’t understand the code to do it, you need to hire a developer for the work because it’s not a support issue.

Good luck.

Hello Bryson T,

Just add this in your css.

.td-social-stumbleupon {
background-color: #ff4e2e;
}
.td-social-stumbleupon .td-icon-stumbleupon {
font-size: 15px;
position: relative;
top: 2px;
left: 1px;
}
.td-social-reddit {
background-color: #7db3ef;
}
.td-social-reddit .td-icon-reddit {
font-size: 15px;
position: relative;
top: 2px;
left: 1px;
}
.td-social-whatsapp {
background-color: #60b82d;
}
.td-social-whatsapp .td-icon-whatsapp {
font-size: 15px;
position: relative;
top: 2px;
left: 1px;
}

And add this to td_module_single.php

<i class=”td-icon-stumbleupon”></i>
<i class=”td-icon-reddit”></i>
<i class=”fa fa-whatsapp fa-lg”></i>

Hope solves your issue 😉

Thanks,
Yasir

Thanks

I think the solution above doesn’t work anymore – it seems obsolete.
Could you please share the new place to put the code?

http://screencast.com/t/gMF05PywvYTv

Just began messing with this and everything seems to be functioning BUT… I Added this to my css as stated above…

.td-social-stumbleupon {
background-color: #ff4e2e;
}
.td-social-stumbleupon .td-icon-stumbleupon {
font-size: 15px;
position: relative;
top: 2px;
left: 1px;
}
.td-social-reddit {
background-color: #7db3ef;
}
.td-social-reddit .td-icon-reddit {
font-size: 15px;
position: relative;
top: 2px;
left: 1px;
}

I added the following to td_module_single.php

<i class=”td-icon-stumbleupon”></i>
<i class=”td-icon-reddit”></i>

I must have missed something becuase I can click on a blank space and the link will share on reddit and stubleupon but the button does not appear on the page. Could someone help me out with this? Do I need to have an actual image for this … kinda lost.

• This reply was modified 10 years by jcarr99.
• This reply was modified 10 years by jcarr99.

Thanks Alin,

Is it possible to add these icons without the font awesome plugin? Could I host the icon locally and then add it to the css?

As always, thank you for the detailed explanation and assistance with this. I’ll begin working on in later today and update the results.

Respectfully,
Jonathon

Hi bros,
I used code of StumbleUp Badge

code here

<su:badge layout=”6″></su:badge>

<script type=”text/javascript”>
(function() {
var li = document.createElement(“script”); li.type = “text/javascript”; li.async = true;
li.src = (“https:” == document.location.protocol ? “https:” : “http:”) + “//platform.stumbleupon.com/1/widgets.js”;
var s = document.getElementsByTagName(“script”)[0]; s.parentNode.insertBefore(li, s);
})();
</script>
, but it not synchronized with others icon, see here:

http://www.screencast.com/users/livingnomads/folders/Default/media/e417eda2-f5a4-46d4-9aee-79e37097fddd

I need css for square of StumbleUpon.?

Can you guide me? Thank you!

Thank you so much Bogdan B.!