- NewspaperSocial Sharing
- NewsmagSharing buttons
- NewspaperSharing
- NewspaperDesign your post pages using the Default Templates
- NewspaperFacebook Share
Time to add mine into the mix here. I just updated so I’m using Newspaper v6.1 and the child theme.
I opted to go for sleek design attributes and dug apart the default styles. Features include:
- Transparency on all container backgrounds
- Full size fixed background image representing my site’s primary subject (Dallas Cowboys NFL Team)
- Custom widget title blocks
- Custom link colors on post templates with darker headers
- Custom sharing buttons; removed default Pinterest button and replaced with a Reddit button
- Using Open Sans and Roboto in a few places like menus and widgets, and using Merriweather for content and some titles, but Oswald for all headings and most titles.
I’m pretty pleased with how it came out and, of course, thanks go to tagDiv for revamping the theme in such a way that this was so easy to do. Seriously loving the speed of the theme, even with ads and outside javascript like an audio player loaded.
Comments and feedback welcome.
Go to: newspaper/includes/modules/td-module-single.php
Delete ONLY the highlighted portion of text shown inside of the green box, not all of the code in the green box:
Delete from the <a> to the </a> for the last two links to remove the two networks in question.
*** Note that my buttons show differently than the default buttons. I’ve already updated my buttons to remove Pinterest and include Reddit instead. In either case, the final two links in that block of code are the two you need to delete. Those last two in your code should be for Google Plus and then for Pinterest. My updated links are formated identical to the default links, hence showing you them instead of default code.
***** Also note that there are two parts of this and only one is shown. In that same file, this code is basically repeated. One for the top above the code shown in the screenshot, and one block for the bottom sharing buttons, as shown in the screenshot.
Good luck.
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!
So I have just installed Newspaper 6 and would like to remove the G+ and Pinterest buttons on the social sharing bar that appears above my posts and leave only Facebook and Twitter buttons there. How do I do this?
Hi,
It usually happens when loading the font file (which contains those icons) from another host/url. I have checked your browser’s console and you have an error – http://screencast.com/t/GMbysnjpNl7
The solution would be to load them from the same url as the site or try this solution – http://webmasters.stackexchange.com/questions/71630/font-blocked-from-loading-by-cross-origin-resource-sharing-policy-no-access-co
Thanks!
Also noticing that the Teaser meta box on the post editor isn’t showing up.
It’s very odd. It’s like I don’t have VC installed because it’s not really recognizing that Newspaper is installed and working like it should.
Hosting is fully compatible and I checked all active plugins on my dev site today before making the switch – no issues whatsoever. The dev site was running the same theme before I installed Newspaper 6 that the main site was, so I don’t think my last post was right; that the other theme also using VC is messing it up somehow, because it didn’t have any issues on the dev site. The dev site is running everything identical to the main site, only much more cluttered as it’s been used for quite some time to prepare themes for the live site and do some custom work.
Custom work I’ve done is only to styling and replacing the Pinterest share button with a reddit share button. I used the static sharing url for reddit so no extra JS is loading either. Again, all works fine and as expected on the dev site.
I’m out of ideas for what to check…
Thanks for sharing all your website.
My website: http://www.computerkiezen.nl
After upgrading to Newspaper 6, all of sudden social media sharing icons at the end of post and mega menu icon in main menu navigation are displaying Japanese letters. Along with that search icon in main menu navigation displaying the same letters.
Could you please suggest how to fix this issue?
hi,
maybe someone can help. This solution unfortunately has impact on plugins e.g. social media feather where the icons are treated as any other image and lightbox kicks in so sharing is not possible even so $class_extra .= ' nolightbox'; is part of the plugin code. IS there a possibility to restrict to media formats like jpg but exclude png
thx
@charly_vk tienes un server response de 1 segundo, es decir anda lento el servidor. Veo que tienes zencache, sin embargo no está activado la expiración para algunos tipos de archivo http://gtmetrix.com/reports/www.chicasfitness.com/w07wTjMa (leverage browser caching) . esto es sencillo si tienes apache solo tendrás que agregar unas líneas al htacces, si tienes nginx lo haces en el nginx.conf. Revisa en google como establecer los tiempos de expiración según tengas apache o nginx,
2.- https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.chicasfitness.com%2F&tab=desktop
Your page has 2 blocking scrip
Estos los eliminas con el functions.php que subí ayer.
Solo sustituye este funcions.php https://drive.google.com/file/d/0B-VBkiewxpMAM29uUkI5YWpneEU/view?usp=sharing
Para el css puedes usar cualquier plugin que te permita diferir el css, solo excluye el style.css
Saludos
Generally “best” to fit your images to the layout and then allow FB to bring in and optimize and reformat to fit their ever-changing systems for both desktop and mobile; e.g., 470×246 is the size FB most often actually uses for timeline on desktop; with 140×100 for smaller thumbs and 158×158 for square images taken from smaller items.
This only refers to sharing “articles” or posts with featured images, and not “sharing” photo gallery items as single posts themselves.
For our article sites we standardized on 640xXX and for our daily news sites we just to 500×375 and those sizes both work awesomely with Pinterest pins, Twitter cards, and Facebook.
Just some food for thought, not trying to step on your suggestion on any way/shape/form. 🙂
Hi –
Do you have a place for feature suggestions?
This one is quite important…
I totally love my newspaper 6 theme,
and it’s working fine for me.
ONE FEATURE SUGGESTION
Perfect sharing image size for a link-share to Facebook
is 1200×630 (or 600×315)
That is 1.91:1 aspect ratio
None of your blocks, grids, thumbnails, etc are this exact size!
It would be really great if you made a Big Grid,
and a module or block or two that displayed the featured image
in the 1.91:1 aspect ratio size.
Many of us optimize our featured images
for sharing on facebook via link share.
Thanks for the fine theme… best I’ve ever used in over 10 years blogging
==>Jim Van Wuck
There is a problem when copy from forum to php file and i cant edit the first post i made. Use this funcionts (newspaper 6.1) https://drive.google.com/file/d/0B-VBkiewxpMAM29uUkI5YWpneEU/view?usp=sharing
Hi,
please note that there are two functions in that file: get_social_sharing_bottom() and get_social_sharing_top() . Please verify that you changed the appropriate one.
Hi Radu,
Yes, I’d like to place the Taboola ads below the post sharing buttons ( http://screencast.com/t/MPKPS9hoRs3X ). Below is the code and instructions they sent me, which I have followed, but somehow I cannot make work. I appreciate your support. Thanks! – CB
Hello,
Place this code in the <head> section:
<script type=”text/javascript”>
window._taboola = window._taboola || [];
_taboola.push({article:’auto’});
!function (e, f, u) {
e.async = 1;
e.src = u;
f.parentNode.insertBefore(e, f);
}(document.createElement(‘script’),
document.getElementsByTagName(‘script’)[0],
‘http://cdn.taboola.com/libtrc/tabooyallc-themosttaboyya/loader.js’);
</script>
Place this code where you want the “Below Article Thumbnails” widget to render:
<div id=”taboola-below-article-thumbnails”></div>
<script type=”text/javascript”>
window._taboola = window._taboola || [];
_taboola.push({
mode: ‘thumbnails-a’,
container: ‘taboola-below-article-thumbnails’,
placement: ‘Below Article Thumbnails’,
target_type: ‘mix’
});
</script>
Place this code where you want the “Right Rail Thumbnails” widget to render:
<div id=”taboola-right-rail-thumbnails”></div>
<script type=”text/javascript”>
window._taboola = window._taboola || [];
_taboola.push({
mode: ‘thumbnails-rr’,
container: ‘taboola-right-rail-thumbnails’,
placement: ‘Right Rail Thumbnails’,
target_type: ‘mix’
});
</script>
Place this code at the end of your <body> tag:
<script type=”text/javascript”>
window._taboola = window._taboola || [];
_taboola.push({flush: true});
</script>
Thanks Emil! The number 5 function didn’t work, but I changed it to “article bottom ad” and replaced the taboola script into the loop-single file below the article sharing function and that worked. Now I just need to figure out how to get the article bottom ad above the author box – you don’t happen to have another function that works for that, would you?
And Chris – thanks for the suggestion. I wasn’t minifying the functions.php file, I minified the stylesheet, and didn’t know if I was supposed to do that before or after modifying the functions file – but as you say, they aren’t related, so that rules out that!
Thanks!
I am modifying the like facebook button under the post, to make it a page like button.
I edited td_module_single_base.php on line 137, as follows:
//$buffy .= '<iframe frameBorder="0" src="' . td_global::$http_or_https . '://www.facebook.com/plugins/like.php?href=' . $this->href . '&layout=button_count&show_faces=false&width=105&action=like&colorscheme=light&height=21" style="border:none; overflow:hidden; width:105px; height:21px; background-color:transparent;"></iframe>';
$buffy .= '
<div class="fb-like" data-href="https://www.facebook.com/larepublicadiario"
data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>
';
But the page is still showing the original like button.
Why does it happen?
Caché? – I don’t think so, since it shows even in new posts that are not cached.
Thanks.
1. How do I erase the excess pink space from the top of footer to snap closer to logo and same with bottom of footer to snap closer to social icons?
I think those areas have some padding due to the possibility to include some ads in those spaces. It looks like the height of the footer is hardcoded to be 1164×389. It is element ‘td-footer-wrapper td-footer-template-4’. You could change it in your style sheet.
2. How do I make the social icons in footer menu a bit bigger? And how do I make the hover colour on those icons a solid purple colour instead of the colours constantly changing?
The footer social media icons are designed to be 40×40. You’d have to change the styles too. Look at the following elements in your CSS: td-social-style-2 and td-icon-font. If you’re going to make several edits to the stylesheet, consider making a child theme.
3. Chris’s Pagespeed Custom Code no longer works (the one that you post at the end of the functions.php – will he be coming out with a new one that works with Newspaper 6?)
Have you upgraded to v6.1 of the theme?
4. How do I move the bottom share options (at the end of my posts), above my taboola advertisement so that they appear right at end of article?
Go to your dashboard. Theme Panel>Post Seetings>Sharing. You should see toggles to move the social sharing buttons.
5. Is there a code so that my custom ad 1 will appear underneath (or above) the author box?
I’m not sure if it always inserts it below ads. I think the author box is placed there via the posts template. You can attempt to mess with the posts templates to see if another one places the author box higher. Go to dashboard. Theme Panel>Post Settings>Default Post Template.
Thanks. Is there any way to avoid having to manipulate the code? I assumed when I turned off showing the author in the theme, it would also not show it in the code. The problem is that Facebook sharing picks up the “hidden” author information now, which is not good.
I have 2 questions
1. Is that posible to have comments system in tabs or colapsible accordion (i dont know what is used on this example) like here http://prntscr.com/7ie5em
2. Default share butons are under the title of each post. can i move it to be under the featured image or better at the begining of the post body like here: http://prntscr.com/7ie7dn
i saw this examples on http://njuz.net and i like it very much
Yes, I also need Vk Counter and Vk sharing button!
Thanks!
Hi,
1. The theme supports Font Awesome 4 Menus just install the plugin then take the icon code – http://fortawesome.github.io/Font-Awesome/icons/ and paste it in Navigation Label – http://screencast.com/t/TKqYz6oH5 – http://screencast.com/t/oR2LdrWz
2. Unfortunately the ajax next/prev pagination is positioned at the bottom, you will need custom work to move it, I suggest to get someone to help you as we cannot provide any type of custom work at this time, sorry.
3. The theme doesn’t have other design for sharing buttons you will have to change them via custom css or try to find and use a share plugin to look like you want.
4. Do you mean subscribe box? You have to use a plugin for this like MailChimp and use the shortcode on post template where you want to appear – http://screencast.com/t/cqEjFiNI
Thanks!
Hi,
It usually happens when loading the font file (which contains those icons) from another host/url. Please check your browser’s console, you have this error – http://screencast.com/t/vM7necli1PjO
The solution would be to load them from the same url as the site or try this solution – http://webmasters.stackexchange.com/questions/71630/font-blocked-from-loading-by-cross-origin-resource-sharing-policy-no-access-co
Thanks!
Hi,
Please use Share your translation or correction button from Theme Panel > Translations section – http://screencast.com/t/NxAHqoN7mlg
Thank you very much for sharing and help!
You can turn off all the built-in sharing buttons from the theme admin panel under “post settings.”
For custom sharing buttons, try some of the great plugins out there …
