{"id":3438,"date":"2025-03-06T01:53:31","date_gmt":"2025-03-06T01:53:31","guid":{"rendered":"https:\/\/jrdingwall.ca\/blogwall\/?p=3438"},"modified":"2025-03-06T21:46:12","modified_gmt":"2025-03-06T21:46:12","slug":"get-that-bird-off-your-book-a-how-to","status":"publish","type":"post","link":"https:\/\/jrdingwall.ca\/blogwall\/get-that-bird-off-your-book-a-how-to\/","title":{"rendered":"Get That Bird Off Your Book (a how-to)"},"content":{"rendered":"

I had a question come in recently about how to deal with social media icons, and share buttons, on a Pressbook. There is one social media platform in particular that was at the root of the question. So I’m cataloging here for authors, editors, network admins, etc. a few different approaches you could take.<\/p>\n

Option 1: Use the Theme Options Button<\/h2>\n

If you have a certain level of permissions on your Pressbook, you should be able to see\u00a0appearance > theme options<\/em> when you enter the admin view of your book (i.e. logged in). From there find the\u00a0Web Options<\/em> tab. Finally, you can uncheck the box that says\u00a0Enable Social Media.<\/em><\/p>\n

\"a<\/p>\n

This setting removes all the share buttons from this location<\/strong> on the front page. Some networks have just one social icon, others will have multiples. This checkbox gets rid of them all.<\/p>\n

\"the<\/p>\n

That part is easy. The next is a bit more difficult, requiring us to use a little CSS. Don’t worry though it’s not too bad.<\/p>\n

Option 2: Using CSS to remove the social icon in the footer<\/h2>\n

The network your book is on may have it’s own social links. As an author, I believe you should have some control over what links appear next to your work, and you’re in luck. Even though the network manager manages the footer, you can make some basic changes to the footer for your own work. An example of the social media links I’m talking about are in the lower right if you’re viewing on a computer (rather than mobile).<\/p>\n

\"a<\/p>\n

Unlike the\u00a0Enable Social Media<\/em> checkbox, we can be more deliberate about the links we remove in the footer in case you want to be specific about which one(s) you remove. Head back to your book’s dashboard, and if you have the permissions you need, you’ll see\u00a0appearance > custom styles<\/em> and check that you’re editing styles for\u00a0web<\/em>. If you go down on the page you’ll find a section called\u00a0Your Web Styles<\/em>. This is where you can customize a lot in Pressbooks. For this example I’ll remove the Twitter icon using CSS. We call out the element and set the display to “none” to make it disappear.<\/p>\n

\n\t\t\t
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n <\/div>\n
\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n 
\n
.twitter {\r\ndisplay:none\r\n}<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n
\"a<\/p>\n
The CSS I have above the example calls our “sharer” which is the CSS element for what that checkbox in option 1 controls. If you want to hide all the footer social media without having to figure out all of their classes (the way we point to the item) you could get rid of all sharing in the footer.<\/p>\n
\n\t\t\t
\n                
\n                    
\n                        
<\/div>\n                        
<\/div>\n                        
<\/div>\n                    <\/div>\n                    
\n                        \n                        Copy Code<\/span>\n                        Copied<\/span>\n                        Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                
\n
.footer__pressbooks__social {\r\ndisplay:none\r\n}<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n
Update<\/h3>\n
I mentioned that I played with hiding the top of page share buttons using CSS and that if you have multiple (i.e. many Pressbooks networks include Twitter, LinkedIn, and eMail) this approach would remove all three. You may be able to target them by including an additional identifier in square brackets.<\/p>\n
\n\t\t\t
\n                
\n                    
\n                        
<\/div>\n                        
<\/div>\n                        
<\/div>\n                    <\/div>\n                    
\n                        \n                        Copy Code<\/span>\n                        Copied<\/span>\n                        Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                
\n
.sharer[data-sharer=\"twitter\"] {\r\n    display: none;\r\n}<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n
This may maintain the LinkedIn and eMail buttons while getting that bird off your book.<\/p>\n
Ok, but maybe I do want to share on SOME social media<\/h2>\n
One example I can show for this case is to place it in your book’s short description. You don’t get the social media icon, because we’ve turned off the Enable Social Media<\/em> option. Some networks have multiple things here, such as Twitter, LinkedIn, and even email. If we turn off the\u00a0Enable Social Media<\/em> we lose all three. And in that part of the homepage for your book, even the CSS option is all or nothing. So what we can do is make our own link. The short description of your book is what appears at the top of the homepage. To find it, go back into the dashboard for your book and look at the menu for\u00a0Book info.\u00a0<\/em>Then scroll down the page until you find\u00a0About the Book > Short Description<\/em>. This textbox is not a rich text editor like when you’re writing chapters. However it does allow us to use HTML that will display to your readers.<\/p>\n
\"screenshot<\/p>\n
You can drop in your short description as plain text. For the links you have a few options. The approach I used was to make a link that would drop a basic post similarly to the old share buttons we removed. We’ll use LinkedIn as an example.<\/p>\n
\n\t\t\t
\n                
\n                    
\n                        
<\/div>\n                        
<\/div>\n                        
<\/div>\n                    <\/div>\n                    
\n                        \n                        Copy Code<\/span>\n                        Copied<\/span>\n                        Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                
\n
<a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=true&url=[YOUR-URL-HERE]&title=Check out this great book on Pressbooks&summary=Great book on Pressbooks\" target=\"_blank\">Share on LinkedIn &#10150;<\/a><\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n
What does this HTML do?<\/p>\n
    \n
  1. First we have the main link that shares the ‘article’ |\u00a0https:\/\/www.linkedin.com\/shareArticle?mini=true<\/strong><\/li>\n
  2. We follow that with your book’s URL |\u00a0&url=[YOUR-URL-HERE]<\/strong> | replace the everything there up to and including the square brackets with your book’s URL<\/li>\n
  3. The next is the post stub |\u00a0&title=Check out this great book on Pressbooks&summary=Great book on Pressbooks”<\/strong><\/li>\n
  4. We have it open in a new tab |\u00a0target=”_blank”<\/strong><\/li>\n
  5. We have the text your readers see |\u00a0Share on LinkedIn<\/strong><\/li>\n
  6. Finally, a little icon can be included, in this case a right curved arrow |\u00a0&#10150;<\/strong><\/li>\n<\/ol>\n
    \"\"<\/p>\n
    A few options I played with included a chain link, a little arrow, and the outbox icon. You could use any of those too.<\/p>\n