You can see what I am talking about at www.ethoma.com/wd/. Basically, as you can see on the right, I have a bunch of my own icons that I custom formatted to fit my site nicely. Because they are my own icon, all they are right now are little hyperlinks. I was wondering if I could also get a "tweet" button or a twitter button that automatically hit follow for the user, and didn't just simply bring him to my profile. I know I can do this, but when I do, I end up with the very misfitting icon that Twitter gives you.
My question is, is there a way to get these like buttons and social bookmarking buttons without the stock icon facebook gives you?
If you want to make social media buttons available to your users you might want to check out AddThis. They provive a rich API for many different social media sites including facebook twitter google plus etc.
I know you can use your own icons and customize a whole bunch of things (which are all well documented on their website) but I don't know if you can have your own like button. But if they can do it/provide the option you can too, somehow.
http://www.addthis.com/help/custom-buttons#different-image
Related
I'm wondering how to replace my social media icons with my own custom images. For example instead of using the typical Facebook Like button or Twitter follow button I would replace it with my own image, while keeping the same functionality.
Websites like BuzzFeed and SuperCompressor are good examples that it can be done. Each has replaced the Facebook Like button with a custom image but the functionality remains the same.
I'm having a hard time finding any information one the web. Can anyone guide me in the right direction?
As the place you will find this image may depend on the plugins and themes you use, you have to find out where the actual image comes from.
To do so, I would suggest that you install a browser such as Chrome that allows you to inspect an element on your page (will open the portion of code displaying the selected item). Once you see where the image comes from, you can either replace the actual image with a custom one if it's on your website's server, or search your website files for this image's URL and replace it with a link to the image of your choice.
I think something like
this http://www.inboundnow.com/apps/facebook-like-button-generator/
might work but the google search for
custom facebook like button for website
has a lot of results
EDIT: Well if you already know how to make a custom image you can follow
https://stackoverflow.com/questions/9493988/how-to-trigger-facebook-like-button-from-custom-button
to make your custom image into a facebook like button
`http://jsfiddle.net/masondesu/haxvL/`
This site also has some info
I have no images on my blog. The only JPG on the whole page is a tiny little Twitter icon. So what happens when I share that blog post is Facebook uses that little Twitter icon as the featured image for the post. Very awkward.
Any ways to force certain images to be ignored?
You want to use Open Graph Meta Tags to specify an image. Without specifying an image, Facebook will attempt to parse all of your images to get content.
You can check how Facebook parses your page via their debugger.
use css if possible to declare the undesired image (+div)
I was browsing different websites for some images that I'd like to use for links. One, for example, is a Twitter image.
Normally you can hover over an image and press "control + click" to save as.
But on this particular website, the images are icons and don't allow me to grab them.
Here is a screen of select element which the image I want highlighted, and the html and css that goes with it.
How would I grab this icon? The icons are on this website: https://uchaguzi.co.ke/
If you want to convert Font Awesome icons to png, you may use this software:
https://github.com/odyniec/font-awesome-to-png
however... if fontawesome fits your needs (it has a huge collection of really well-designed icons), I warmly suggest you to use the web font as explained here: http://fortawesome.github.io/Font-Awesome/get-started/
The client doesn't want the photo to be downloaded if it is right clicked on. I explained if someone wants the photo they can get it off the site but he wants to make it a bit more difficult for a novice user to download the image. Hence if you right click you will get the blank 'photo' instead of the actual photo underneath.
Use logic:
Put the image you want to protect as a background image in a <div> or other block level element
Put an <img> that is transparent over that image in the <div>. Make sure it covers the entire image/div
A quick google has thrown this up for me, hope it can help you.
4) Prevent Downloads Using Tables: 'Right clicking' images is a fast shortcut to find, copy, and/or download images. For those that have their own website it is possible to prevent this action by placing images as a background to tables. The code is fairly simple in CSS, using the "background-image:url" style:
<table style="background-image:url('image.jpg');width:Wpx;height:Hpx"><tr><td></td></tr></table>
Another method might be,
5) Javascript Right Click Disable: Another measure to prevent right clicks on images is to use Javascript. These short scripts over-ride browser right clicks. Rather than recreate a script that has been widely published in various forms over the internet, I will leave it to the reader to search google for Javascript Disable Right Click. I will however mention that Javascript is client-side, and scripts such as these can not only effect the usability of a website, but can also readily be disabled by turning Javascript off.
I took the info above from this site --- http://www.naturefocused.com/articles/image-protection.html ---
People can just printscreen the image and put it in paint if they really wanted it though im afraid :(
Thanks,
Jack.
I'm using the LinkedIn Profile widget on my site and am using the popup version. Although it's functional, I don't like the little LinkedIn icon that's placed as I'm already using a larger LinkedIn icon. Is it possible to hide the smaller one? (I assume it's built into the class, but there may be an option somewhere?) If not, is it possible to overlap a hyperlink so that I can essentially hide the smaller icon behind the larger icon, but ensure the smaller one gets clicked if the large one is clicked on? (Hope that make sense :) )
try adding a style="background-image:none;" to your link.