UnBlocking My Site With Social Media Buttons

 

For those of you out there with websites I have a very interesting piece of info for you!

Originally I was using Social Media Button Maker to help me create the coding for the social media buttons on my website. That is until I started getting reports from Avast Users that they were getting blocked from my website!

After weeks of googling for a solution, I finally sent an e-mail to Avast to report to them that all other antivirus software (including Kaspersky) were reporting that my site was clean.

Avast sent me back a fast reply telling me that the Social Media Button Maker code (they actually sent me the erroneous piece of code to assist in me finding the problem) was why my website was getting blocked. Back to my backend to figure out why.

I pulled up my code for that widget and found a link INSIDE the code to a shifty hotel site! That was my tip off! I don't remember that being there before! So I deleted the Javascript and sat down to find better buttons and write the html myself. This sent me to a google search where I found ALL of my buttons (including the ones the button maker didn't offer) on WikiCommons! SCORE!

And here's what the buttons look like!:

Buttons in use!

Just regular buttons! YAY!

Once I was finished I reported my fix to Avast and they promptly sent me a confirmation saying that my site would be taken off "blocked" in the next antivirus definition update! YAY!!!

Because I have so many friends that love building their own websites I figured I would offer the code here. They don't have counters, don't lag in loading, or do anything fancy. All you have to do is update the BOLDED links with your own social media links and paste the html where you need it on your site!

HTML Code for social buttons:

<div><a href="http://www.instagram.com/author.vl.jennings" style="font-size: 100%;"><img alt="WikiInstagram button" src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" style="border: 0; height: 42px; width: 42px;" / /></a><a href="www.twitter.com/vljennings" style="font-size: 100%;">  <img alt="Wikitwitter button" src="https://upload.wikimedia.org/wikipedia/commons/7/74/Twitter_Logo_Mini.svg" style="border: 0; height: 42px; width: 42px;" / /> </a><a href="www.facebook.com/vljennings" style="font-size: 100%;"><img alt="Wikifacebook button" src="https://upload.wikimedia.org/wikipedia/commons/8/82/Facebook_icon.jpg" style="border: 0; height: 42px; width: 42px;" / /> </a><a href="https://plus.google.com/+VirginiaLoriJennings" style="font-size: 100%;"><img alt="WikiGplus button" src="https://upload.wikimedia.org/wikipedia/commons/0/04/Google_Plus_logo.png" style="border: 1; height: 42px; width: 42px;" / /></a><a href="https://www.pinterest.com/vljennings/" style="font-size: 100%;"><img alt="Wikipinterest button" src="https://upload.wikimedia.org/wikipedia/commons/0/08/Pinterest-logo.png" style="border: 0; height: 42px; width: 42px;" / /></a><a href="https://www.youtube.com/user/virginialorijennings" style="font-size: 100%;"><img alt="Wikiyoutube button" src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Youtube_logo_stacked-vfl225ZTx.png" style="border: 0; height: 42px; width: 42px;" / /></a><a href="https://www.goodreads.com/VLJennings" style="font-size: 100%;"><img alt="Wikigoodreads button" src="https://upload.wikimedia.org/wikipedia/commons/1/14/Goodreads_%27g%27_logo.jpg" style="border: 0; height: 42px; width: 42px;" / /></a><a href="http://www.amazon.com/Alien-Mind-V-L-Jennings/dp/1940812658" style="font-size: 100%;"><img alt="Wikiamazon button" src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Amazon-mp3-store-source_Faenza.svg" style="border: 0; height: 42px; width: 42px;" / /></a><a href="https://www.linkedin.com/in/vljennings" style="font-size: 100%;"><img alt="Wikilinkedin button" src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Linkedin.svg" style="border: 0; height: 42px; width: 42px;" / /></a><a href="http://www.virginialorijennings.com/feeds/posts/default" style="font-size: 100%;"><img alt="WikiRSS button" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Rss-feed.svg" style="border: 0; height: 42px; width: 42px;" / /></a></div>


<end code>

Once again these codes are completely clean! Once you replace the bolded links with your own there will be no further link back to me at all ;) 

If you'd prefer to take out some of the buttons or perhaps re-order them... here's the breakdown:

Instagram: <div><a href="http://www.instagram.com/author.vl.jennings" style="font-size: 100%;"><img alt="WikiInstagram button" src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" style="border: 0; height: 42px; width: 42px;" / /></a>

Twitter:
<a href="www.twitter.com/vljennings" style="font-size: 100%;">  <img alt="Wikitwitter button" src="https://upload.wikimedia.org/wikipedia/commons/7/74/Twitter_Logo_Mini.svg" style="border: 0; height: 42px; width: 42px;" / /> </a>


Facebook:
<a href="www.facebook.com/vljennings" style="font-size: 100%;"><img alt="Wikifacebook button" src="https://upload.wikimedia.org/wikipedia/commons/8/82/Facebook_icon.jpg" style="border: 0; height: 42px; width: 42px;" / /> </a>

Google+
<a href="https://plus.google.com/+VirginiaLoriJennings" style="font-size: 100%;"><img alt="WikiGplus button" src="https://upload.wikimedia.org/wikipedia/commons/0/04/Google_Plus_logo.png" style="border: 1; height: 42px; width: 42px;" / /></a>

Pinterest:
<a href="https://www.pinterest.com/vljennings/" style="font-size: 100%;"><img alt="Wikipinterest button" src="https://upload.wikimedia.org/wikipedia/commons/0/08/Pinterest-logo.png" style="border: 0; height: 42px; width: 42px;" / /></a>

Youtube Profile:
<a href="https://www.youtube.com/user/virginialorijennings" style="font-size: 100%;"><img alt="Wikiyoutube button" src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Youtube_logo_stacked-vfl225ZTx.png" style="border: 0; height: 42px; width: 42px;" / /></a>

Goodreads:
<a href="https://www.goodreads.com/VLJennings" style="font-size: 100%;"><img alt="Wikigoodreads button" src="https://upload.wikimedia.org/wikipedia/commons/1/14/Goodreads_%27g%27_logo.jpg" style="border: 0; height: 42px; width: 42px;" / /></a>

Amazon Author Page:
<a href="http://www.amazon.com/Alien-Mind-V-L-Jennings/dp/1940812658" style="font-size: 100%;"><img alt="Wikiamazon button" src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Amazon-mp3-store-source_Faenza.svg" style="border: 0; height: 42px; width: 42px;" / /></a>

Linkdin:
<a href="https://www.linkedin.com/in/vljennings" style="font-size: 100%;"><img alt="Wikilinkedin button" src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Linkedin.svg" style="border: 0; height: 42px; width: 42px;" / /></a>

RSS Feed:
<a href="http://www.virginialorijennings.com/feeds/posts/default" style="font-size: 100%;"><img alt="WikiRSS button" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Rss-feed.svg" style="border: 0; height: 42px; width: 42px;" / /></a></div>



I hope this helps someone out there! Thanks for stopping by!

***"Improving, Non-stop"photo credit: Broadway via photopin (license)

Find The Alien Mind on Amazon!

Did you like this post? If so you might enjoy my book!

For adults and teens alike, it is truly a science fiction adventure for the whole family!

If you'd prefer an autographed copy straight from the author you can buy one here as well!
Autographed Copy:$13.00 + Shipping

 

"If you enjoy my writing, would you care to buy me a cup of coffee?"

Tip Options

Tip $1.00 USD Tip $2.00 USD Tip $3.00 USD Tip $4.00 USD Tip $5.00 USD

Meta and Og Tags for Blogger Blogs- Og Image Works!

Ok if you have been with me since the last post I put up on 'How To Share Your Friends Blog Posts To Facebook And Twitter'

I did some research and realized that MAYBE the reason my post wasn't showing properly after going through IFTTT.com was because the facebook og tags were not reading right. Sure enough, I headed over to facebook debugger and found that my description tag wasn't working right and my og:image tag wasn't working right.


***photo credit: Broadway via photopin (license)

This meant... when facebook received the url from IFTTT facebook didn't really know what to post. (now yes... the fact that facebook was showing the entire copy of the blog post was because I had used also used (entry content) and (entry image url) .... better to just use (entry author) with a bit of introduction text...

This blog post will serve as a test to see if these changes fix the way the IFTTT post looks on facebook.


Anyway... that is all neither here nor there.

If you have been searching for the code to use for facebook's og data... here's what worked on my blog. All of facebook's errors and warnings in the debugger vanished! YAHOO! (by the way- this image is NOT hosted by my blog host- it is actually from flickr via photopin! Photo credit below)

Paste this all in your blogger template below <head>

<copy and paste meta code begin>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/></b:if>

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
  <meta property="og:image:width" content="1200"/>
  <meta property="og:image:height" content="630"/>
  </b:if>
 <b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='Insert your number here' property='fb:app_id'/>
<meta content='Insert your number here' property='fb:admins'/>

<copy and paste meta code end>


The Bottom of this post will tell you how to create the Fb App id and FB Admin code
http://www.technohalf.com/2015/01/how-to-add-facebook-open-graph-to-blogger-blog.html


The beginning of that above post is just ONE of the many that I was using to try to find the right og tag for the featured images. On that post they have just ONE thing wrong.

They use 'data:blog.postImageThumbnailUrl' for their og image tag!

Apparently you only need to use 'data:blog.postImageURL' for it to work right! (see line in blue above in the meta code)

I'd like to thank THIS site for helping me figure out the problem! http://unidigadv.blogspot.com/2014/09/adding-open-graph-protocol-ogp-tags-to.html







*Gimme just a moment and I will report back right here to let you know if the IFTTT post works better now!


YESSSSS!!!!! It works!!!  Here's a link to the working IFTTT post example

As you can see... I only used (entry author) in IFTTT for this particular post, simply because I don't plan on using it.

BUT! The right image comes up, and the title/ blog url.  So now... in IFTTT beside (entry author) I will type something like "A post from my friend (entry author)".

Still not too thrilled that I don't get a post description out of it but from what I can see the description is working on the Og code side ;)

Thats all folks! Thanks for bearing with me through the chaos!