Whenever I try to use the Twitter and Facebook share functionality, I am presented with the standard default share buttons that resemble:
https://i.sstatic.net/W5ZN8.png https://i.sstatic.net/0MW3U.pngI have reviewed the policies, which indicate:
Do not obscure or cover social plugin elements.Is it permissible to replace the default buttons with a different style? Or would this violate the policies set by Facebook and Twitter?
Creating your own social media sharing buttons is as simple as using HTML and CSS. All you need to do is create HTML links and style them with CSS. Add an icon, and you're good to go. To share on Facebook, use the following URL:
http://www.facebook.com/sharer/sharer.php?u=[URL]
For Twitter, the URL is:
https://twitter.com/intent/tweet?text=[TITLE]&url=[URL]&via=[USER]
Remember to fill in the placeholders (in brackets []) either manually or through PHP/JS. The URL should be straightforward, while the TITLE is the text that will show up in the tweet on Twitter. The USER refers to the name displayed in the tweet, like this »Some page title [URL] via @kaiserkiwi«.
Facebook Etiquette: What to Do and Not to Do:
Things to Avoid
- Avoid altering Facebook brand assets in any way, including design or color changes
Guidelines for Using Twitter
Always ensure that you use the official and unaltered Twitter logo when representing Twitter.
Despite this, it's common to see modified versions of the Facebook and Twitter logos on numerous websites. If your modifications are tasteful, professional, and appealing, you shouldn't encounter any repercussions.
If you do receive a notice from them, it will likely be a cease and desist request. In such cases, removing the altered logos usually resolves the issue with enforcement actions coming to an end.
If you're looking to add social media sharing buttons to your website, there are a few different approaches you can take. One option is to dive into the documentation for platforms like Twitter and Facebook and create your own custom solution. This can be a bit challenging but allows for complete control over the design and functionality.
Alternatively, you could opt for an easier route by utilizing third-party tools such as AddThis. These tools offer pre-built buttons that can be easily customized to match your website's aesthetic. For WordPress users, AddThis provides a convenient plugin that simplifies the integration process.
Another tool to consider is ShareThis, which also offers a WordPress plugin for seamless implementation. With ShareThis, you have the ability to utilize their built-in CSS classes to modify the appearance of the buttons. By targeting specific classes like .st_twitter_custom and .st_facebook_custom, you can achieve a personalized look for your social sharing buttons.
Overall, whether you choose to create a custom solution or leverage third-party tools, adding social media sharing buttons to your site can enhance user engagement and drive more traffic to your content. Hopefully, these tips help guide you in the right direction!
I'm looking to set up a tree view on the left side of my screen, along with a multiview showing content based on the selected tree item on the right. However, I'm having trouble aligning the multiview properly next to the tree view - it seems to ...
Instead of providing code to solve an issue, I am using Bootstrap and encountering problems with the roster section where the heights are inconsistent. My temporary solutions involved adding classes to specific divs or setting fixed column heights, but I&a ...
We recently had a web designer create our html/css, and upon reviewing some code updates, I noticed the following: img elements simply reference the path of the image like this: <img src="/images/pic.png"> However, for css (using the background pr ...
I need help with resizing the checkboxes that are inside a table. When I try using width:###px; height:###px;, it only seems to make them smaller, not bigger. Even when I set the values higher than the default size, the checkboxes stay the same while the d ...
I am currently learning how to use Bootstrap 3 and I am in the process of creating a Carousel for my website. My goal is to design a carousel with a "fade" effect along with four buttons below it that, when clicked, will trigger the transition between imag ...
I'm currently developing a website with a striking layout featuring 'hero' panels that cascade down the home page, showcasing text overlaid on captivating background images. My goal is to utilize inline images with srcset and sizes attribut ...
I'm struggling with a simple html page that has a fixed navbar at the top. Everything looks great when viewed in full-screen mode, with centered links. However, when the page size is reduced, it collapses to a toggle button on the left side. What I re ...
It seems that when a paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (which can cause some interesting results). I've noticed that on my website, about half of the p-tags stick to the ...
After finding a code example online to assist with creating a table in my project, I am faced with the challenge of changing the background color of the white rows to match the dark blue used for others. Additionally, I cannot figure out how to change the ...
My table element is generated dynamically by Angular, with rows that change based on data. The layout of the page is as follows: <table class="myDataGrid"> <thead> <tr> <th>In Service</th> ...
I am in the process of developing a game using native JavaScript, HTML, and a touch of CSS. I have two blocks called Sprites that tend to keep moving off the canvas edges when they reach them. Question: How can I utilize native JS to prevent the sprites fr ...
I am experiencing an issue with my pills that have 4 tabs. Initially, when I reload the page, the content of the first tab does not show up. However, if I navigate to another tab and then back to the first tab, the content appears. Can anyone suggest a fix ...
I recently posted a question on Stack Overflow about displaying an image in a div when a specific link is hovered over, and thanks to the help of user adeneo, I was able to find a solution (jsFiddle): HTML Markup: <div id="imgs"> <img src="h ...
Utilizing this jQuery script, I am able to center a website vertically within the browser window if it exceeds the height of the outer wrapper-div, which has fixed dimensions. $( document ).ready(function() { centerPage(); )}; // center page vertic ...
I need help positioning a div in the bottom right corner of all images, regardless of their width. The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner eve ...
I'm having an issue with click events on several elements. Each element's click event is supposed to reveal a specific div related to it, but the hidden divs are not appearing when I click on the elements. Any help in figuring out what might be g ...
I am currently working on a push menu that shifts the main content container by adding margin-left to it. I am aiming to achieve a background image effect similar to what is seen on . Here is the progress I have made so far in my codepen: https://codepen ...
Hey there, I've got a few questions about my self-hosted Wordpress site... 1) I'm having an issue with the Google Plus button not appearing on AddThis Smart Layers. Even though the code is in my header, only 4 buttons show up on my page - the Go ...
Is it possible to align my button to the top right, at the same height as the title in my design? Here is an example: view image here This is what I have achieved so far: view image here I suspect there may be an issue with my divs. The button doesn&a ...
Can someone help me with a CSS and DIV tags issue? I have a dynamic webpage and need guidance on creating a container DIV. Depending on the scenario, this container DIV will either hold one DIV with 50% width that needs to be centered or two side-by-side D ...