Creating a fashionable look for your social sharing buttons

Using Social sharing button APIs from platforms like Facebook, Twitter, and Google Plus, I have created a basic fiddle for sharing a link (e.g. http://www.google.com).

Check out the Fiddle

Although my fiddle is functioning correctly, I am facing an issue with the default styling of the Twitter links.

Originally, I wanted to display plain text social sharing buttons without any styling.

I attempted to adjust the styles or utilize alternative anchor elements for triggering the sharing buttons, but it seems impossible due to the buttons being generated within an IFRAME.

Any suggestions on how to customize the styles of these buttons?

javascriptcssfacebooktwittergoogle-plus

Answer №1

Each of these websites has its own set of rules regarding the use of their branding, especially when it comes to sharing links and buttons with logos.

https://developers.google.com/+/branding-guidelines

The issue seems to be related to using the twitter-share-button class, which transforms the element into a button. Removing this class should display the text only.

Answer №2

Experiment with the data attributes included in the twitter link. For example

http://jsfiddle.net/UL6XB/6/

<a href="https://twitter.com/share" class="" data-url="http://www.example.com" data-via="your_username" data-text="Exploring this article about Social Media" data-count="none">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cease the loading of a script in an HTML file

I have encountered a challenge in preventing a script from loading on my Wordpress website. The HTML file contains two scripts: <script type="0f1a6d7ca503db410c0d10c4-text/javascript" src='https://www.[-----------].se/wp-content/plugins/ ...

javascriptphpwordpress

How can I create a hover effect for multiple divs sharing the same id using CSS or JavaScript in the easiest way possible?

When hovering, I want the opacity to be set at "0.3"; when not hovering, it should be set at "1". Additionally, the color of h2 and h3 in each div should transition from white to red. I have searched extensively online and tried to sol ...

javascripthtmlcsshovermousehover

Simulating npm package with varied outputs

In my testing process, I am attempting to simulate the behavior of an npm package. Specifically, I want to create a scenario where the package returns a Promise that resolves to true in one test and rejects with an error in another. To achieve this, I hav ...

javascriptunit-testingnpmjestjs

Display a loading screen to the user while Vue lazy loads the content

I am currently implementing lazy loading features for my single-page application using Vue.js and Laravel Mix 5. I am looking for a way to display a loading page to prevent the app from appearing unresponsive while new pages are loading. I attempted to ad ...

javascriptvue.jslazy-loading

Hovering over an element will change its background color along with adjusting the background

I encountered a situation with the following code: CSS: <style> div.testy { border:1px solid black; } div.testy:hover { background-color:red; } </style> HTML: <div class="testy" style="height:100px; back ...

htmlcsshoverbackground-color

The nested division remains confined within its parent container without extending into other sibling elements

My table layout is quite complex, and I need to implement a hover menu that appears with its position adjusted based on each row's position. Each row in the table is generated dynamically using React props.map function, which gives me the flexibility ...

htmlcssreactjs

Unexpected jQuery error: Uncaught TypeError - Invocation not allowed

Yesterday, the code was functioning perfectly, but today it suddenly started throwing an error: Uncaught TypeError: Illegal invocation I'm struggling to pinpoint where exactly the issue lies. function createFile() { var selected_retailer_uui ...

javascriptjqueryajax

What is the best way to add color to the bottle's outline using clipPath?

How do I fill the background inside a bottle image with color? I have the coordinates for filling the bottle, but the background inside remains unfilled. .item { width: 150px; height: 150px; } #tubeLiquid { background-color: #74ccf4; clip-path ...

htmlcss

Issue concerning the oj-button element in Oracle JET framework

What causes the oj-button to continually concatenate its label text when clicked repeatedly? For an example of this behavior, refer to the button in the following cookbook: Is it normal for the label text to keep multiplying with each click, resulting in ...

javascriptoracle-jet

managing CSS class names containing spaces

Hey there! I'm currently working on a Django powered project. Here's a snippet of code from my HTML file (template): {% for l in items %} <td style="text-align: center" id=" ...

pythonhtmlcssdjangodjango-templates

Is there a way to emphasize my navigation using a call-to-action (CTA)?

My CTA is set up like this: <div class="heading__link"> <a class="heading__cta" href="#about">View my work</a> </div> Additionally, my navigation bar is structured like this: <nav id=&quo ...

javascripthtmlcss

Is there a way to assign a sessionStorage key by clicking on certain elements in HTML?

I have encountered an issue while attempting to set a value in the sessionStorage. The problem lies in storing the sessionStorage "key" differently based on the item clicked. For instance, if I click on the first view chat, I should store a key of "1", and ...

javascripthtmlcssajaxdom

Browsing across pages seamlessly without the need to refresh the browser

I need help with making my admin panel built using Bootstrap and integrated with Laravel navigate through tabs without refreshing the browser. Can anyone provide guidance on how to modify the code to achieve this functionality? You can check out the admin ...

javascripthtmlcsslaravelbootstrap-4

Disable the time selection feature in the text input field

Despite seeing the same question asked before for this issue, I am looking for a solution that does not involve replacing the textbox with the same ID. When Timepicker is selected in the dropdown menu timepicker, it should activate in the textbox (which i ...

javascriptjqueryhtmlbootstrap-timepicker

When square brackets are utilized in a JSON AJAX request, it may result in the

I'm encountering issues with an AJAX request that involves JSON data enclosed in square brackets, resulting in a return value of undefined. A different JSON file without square brackets is working fine, indicating that the problem lies specifically w ...

javascriptphpjqueryajaxjson

Filtering data with AngularJS upon user clicks

Encountering a perplexing issue at the moment. I have created buttons using ng-repeat and my intention is for them to filter my list when clicked on. However, I am facing an issue where the list fails to filter upon clicking. Here are the buttons: <div ...

javascriptangularjs

Limiting the amount of blogs shown on a single page can be achieved with Yii 1 and PHP

I have successfully implemented a feature to display blogs on one page. However, I now want to modify it so that only 5 blogs are shown per page and the user can click on a "next page" button to view the next set of 5 blogs. Here is the code snippet from ...

javascriptphpjqueryyii

Encountered an issue while executing the next build process

Every time I run npm next build, it throws an error message. Despite my efforts to search for a solution online and installing the "extract-text-webpack-plugin," the issue persists. The error being thrown is as follows: > next build (node:8136) Depre ...

javascriptreactjsnpmnode-modulesnext.js

Experience the sleek and intuitive Material Design Lite navigation drawer, inspired by the likes of Google Android

Currently, I am incorporating Material design lite into my website and have found many templates that work well. However, I am looking to make a slight design modification to the navigation drawer. Here is the dashboard template I am currently utilizing: ...

csshtmlmaterial-designangular2-mdl

Is it possible to incorporate several modules into nodeJS simultaneously?

I'm a beginner when it comes to NodeJS. I was wondering if it's possible for me to call 2 different JavaScript files using NodeJS and ExpressJS. The idea is to split the work, where I can focus on one file while my partner works on another. So, I ...

javascriptnode.jsapirestexpress