How to set social media buttons on Tumblr theme? - button

Despite not really having much knowledge on html I've somewhat managed to arrange a Tumblr theme for a blog the way I want it thanks to tutorials online etc.
Only thing missing is I would like my posts to have a couple of social sharing buttons.
But following the tutorials I find online doesn't work, I believe it's because this theme is different and already has some buttons set (Tumblr reblog/like/etc)?
I have this code I created following a tutorial and grabbing some custom icons from deviantart.
{block:PermalinkPage}{block:PermalinkPagination}
<a target="_new" href="https://twitter.com/intent/tweet?text={URLEncodedTweetSummary}"><img style="border: 0pt none;" src="http://orig00.deviantart.net/8cf5/f/2016/316/5/8/twitter_icon_by_aquasparkles-dao40yu.png" width="20" height="20" /></a>
<a target="_new" href="https://www.facebook.com/sharer.php?u={Permalink}{block:Title}&t={Title}{/block:Title}"><img style="border: 0pt none;" src="http://orig10.deviantart.net/5fb3/f/2017/103/f/f/facebook_icon_by_aquasparkles-db5mtq8.png" width="20" height="20" /></a>
<a target="_new" href="http://pinterest.com/pin/create/button/?url={Permalink}&media={PhotoURL-500}"><img style="border: 0pt none;" src="http://orig03.deviantart.net/49e0/f/2016/181/3/4/pinterest_icon_by_aquasparkles-da86kds.png"> width="20" height="20" /></a>
{/block:PermalinkPagination}{/block:PermalinkPage}
But putting it before or at the end of {block:Posts} like the site suggests doesn't seem to work.
So I don't know what to do. Ideally it would be great if they could appear behind or after the other buttons already in the theme for every post, but I don't know where they are in the code. If that is too complicated to do, even just appearing under each post will be enough.
The theme I'm using is here. The Tumblr page is here.

Tumblr - Creating informative shares from the index page.
Tumblr lacks the relevant template tags when a share request is made from the index page.
Currently there are variables {PostTitle} and {PostSummary}, but these only rendered on the Permalink page.
The Goal
The goal is to replicate the information Tumblr creates for the Facebook OG meta tags (which is rendered on the permalink page). Although it is possible to generate the correct OG tags on the index page, this only provides support for Facebook, so other networks still need padding out.
Breakdown
For each post type we should generate and include, if possible, the following {Post} information:
Title
URL
Description
Image
It is presumed your share urls will be inside the corresponding post type block. For sanity utilise: {Plaintext} and {URLEncoded} for creating strings.
Afaik this covers all post types. That being said, this is not a complete solution. Some things will be missing due to the nature of embeds (Videos / Audio I am looking at you here!).
If you find any problems fork / comment and I will do my best to assist.
Text Post Breakdown:
{block:Title}{PlaintextTitle}{/block:Title}
{URLEncodedPermalink}
{PlaintextBody}
http://assets.tumblr.com/images/og/text_200.png
Facebook
{block:Text}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={block:Title}{PlaintextTitle}{/block:Title}&p[url]={URLEncodedPermalink}&p[images][0]=http://assets.tumblr.com/images/og/text_200.png&p[summary]={PlaintextBody}{/block:Text}
Twitter
{block:Text}https://twitter.com/intent/tweet?text={block:Title}{PlaintextTitle}%20-%20{/block:Title}&url={URLEncodedPermalink}{/block:Text}
Google Plus
{block:Text}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Text}
Pinterest
{block:Text}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:Title}{PlaintextTitle}{/block:Title}&media=http://assets.tumblr.com/images/og/text_200.png{/block:Text}
Reddit
{block:Text}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Title}{PlaintextTitle}{/block:Title}{/block:Text}
Photo Post Breakdown:
{PlaintextTitle}
{URLEncodedPermalink}
{block:Caption}{PlaintextCaption}{/block:Caption}
{URLEncodedPhotoURL-250}
Facebook
{block:Photo}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={PlaintextTitle}&p[url]={URLEncodedPermalink}&p[images][0]={URLEncodedPhotoURL-250}&p[summary]={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Photo}
Twitter
{block:Photo}https://twitter.com/intent/tweet?text={block:Caption}{PlaintextCaption}{/block:Caption}%20-%20&url={URLEncodedPermalink}{/block:Photo}
Google Plus
{block:Photo}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Photo}
Pinterest
{block:Photo}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:Caption}{PlaintextCaption}{/block:Caption}&media={URLEncodedPhotoURL-250}{/block:Photo}
Reddit
{block:Photo}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Photo}
Photoset Post Breakdown:
{PlaintextTitle}
{URLEncodedPermalink}
{block:Caption}{PlaintextCaption}{/block:Caption}
{block:Photos}{URLEncodedPhotoURL-250}{/block:Photos} (* The last image in the set will be used)
Facebook
{block:Photoset}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={PlaintextTitle}&p[url]={URLEncodedPermalink}{block:Photos}&p[images][0]={URLEncodedPhotoURL-250}{/block:Photos}&p[summary]={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Photoset}
Twitter
{block:Photoset}https://twitter.com/intent/tweet?text={block:Caption}{PlaintextCaption}{/block:Caption}%20-%20&url={URLEncodedPermalink}{/block:Photoset}
Google Plus
{block:Photoset}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Photoset}
Pinterest
{block:Photoset}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:Caption}{PlaintextCaption}{/block:Caption}{block:Photos}&media={URLEncodedPhotoURL-250}{/block:Photos}{/block:Photoset}
Reddit
{block:Photoset}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Photoset}
Quote Post Breakdown:
{PlaintextQuote}
{URLEncodedPermalink}
http://assets.tumblr.com/images/og/quote_200.png
Facebook
{block:Quote}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={PlaintextQuote}&p[url]={URLEncodedPermalink}&p[images][0]=http://assets.tumblr.com/images/og/quote_200.png{/block:Quote}
Twitter
{block:Quote}https://twitter.com/intent/tweet?text={PlaintextQuote}%20-%20&url={URLEncodedPermalink}{/block:Quote}
Google Plus
{block:Quote}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Quote}
Pinterest
{block:Quote}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={PlaintextQuote}&media=http://assets.tumblr.com/images/og/quote_200.png{/block:Quote}
Reddit
{block:Quote}http://reddit.com/submit?url={URLEncodedPermalink}&title={PlaintextQuote}{/block:Quote}
Link Post Breakdown:
{PlaintextName}
{URLEncodedPermalink}
{block:Description}{PlaintextDescription}{/block:Description}
http://assets.tumblr.com/images/og/link_200.png
Facebook
{block:Link}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={PlaintextName}&p[url]={URLEncodedPermalink}&p[images][0]=http://assets.tumblr.com/images/og/link_200.png&p[summary]={block:Description}{PlaintextDescription}{/block:Description}{/block:Link}
Twitter
{block:Link}https://twitter.com/intent/tweet?text={PlaintextName}%20-%20&url={URLEncodedPermalink}{/block:Link}
Google Plus
{block:Link}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Link}
Pinterest
{block:Link}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={PlaintextName}&media=http://assets.tumblr.com/images/og/link_200.png{/block:Link}
Reddit
{block:Link}http://reddit.com/submit?url={URLEncodedPermalink}&title={PlaintextName}{/block:Link}
Chat Post Breakdown:
{block:Title}{PlaintextTitle}{/block:Title}
{URLEncodedPermalink}
{block:Lines}{block:Label}{PlaintextLabel}{/block:Label}{PlaintextLine}%0A{/block:Lines}
http://assets.tumblr.com/images/og/link_200.png
Facebook
{block:Chat}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={block:Title}{PlaintextTitle}{/block:Title}&p[url]={URLEncodedPermalink}&p[images][0]=http://assets.tumblr.com/images/og/chat_200.png&p[summary]={block:Lines}{block:Label}{PlaintextLabel}{/block:Label}{PlaintextLine}%0A{/block:Lines}{/block:Chat}
Twitter
{block:Chat}https://twitter.com/intent/tweet?text={block:Title}{PlaintextTitle}{/block:Title}%20-%20&url={URLEncodedPermalink}{/block:Chat}
Google Plus
{block:Chat}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Chat}
Pinterest
{block:Chat}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:Title}{PlaintextTitle}{/block:Title}&media=http://assets.tumblr.com/images/og/chat_200.png{/block:Chat}
Reddit
{block:Chat}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Title}{PlaintextTitle}{/block:Title}{/block:Chat}
Audio Post Breakdown:
{block:TrackName}{PlaintextTrackname}{/block:TrackName}{block:Artist}%20-%20{PlaintextArtist}{/block:Artist}
{URLEncodedPermalink}
{block:Caption}{PlaintextCaption}{/block:Caption}
{block:AlbumArt}{URLEncodedAlbumArtURL}{/block:AlbumArt}
Facebook
{block:Audio}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={block:TrackName}{PlaintextTrackname}{/block:TrackName}{block:Artist}%20-%20{PlaintextArtist}{/block:Artist}&p[url]={URLEncodedPermalink}&p[images][0]={block:AlbumArt}{URLEncodedAlbumArtURL}{/block:AlbumArt}&p[summary]={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Audio}
Twitter
{block:Audio}https://twitter.com/intent/tweet?text={block:TrackName}{PlaintextTrackname}{/block:TrackName}{block:Artist}%20-%20{PlaintextArtist}{/block:Artist}%20%3A%20&url={URLEncodedPermalink}{/block:Audio}
Google Plus
{block:Audio}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Audio}
Pinterest
{block:Audio}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:TrackName}{PlaintextTrackname}{/block:TrackName}{block:Artist}%20-%20{PlaintextArtist}{/block:Artist}&media={block:AlbumArt}{URLEncodedAlbumArtURL}{/block:AlbumArt}{/block:Audio}
Reddit
{block:Audio}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:TrackName}{PlaintextTrackname}{/block:TrackName}{block:Artist}%20-%20{PlaintextArtist}{/block:Artist}{/block:Audio}
Video Post Breakdown:
{PlaintextName}
{URLEncodedPermalink}
{block:Caption}{PlaintextCaption}{/block:Caption}
{block:VideoThumbnail}{VideoThumbnailURL}{/block:VideoThumbnail}
Facebook
{block:Video}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={PlaintextName}&p[url]={URLEncodedPermalink}&p[images][0]={block:VideoThumbnail}{VideoThumbnailURL}{/block:VideoThumbnail}&p[summary]={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Video}
Twitter
{block:Video}https://twitter.com/intent/tweet?text={block:Caption}{PlaintextCaption}{/block:Caption}%20-%20&url={URLEncodedPermalink}{/block:Video}
Google Plus
{block:Video}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Video}
Pinterest
{block:Video}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={block:Caption}{PlaintextCaption}{/block:Caption}&media={block:VideoThumbnail}{VideoThumbnailURL}{/block:VideoThumbnail}{/block:Video}
Reddit
{block:Video}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Video}
Answer Post Breakdown:
{lang:Asker asked}%3A%0A{PlaintextQuestion}
{URLEncodedPermalink}
{PlaintextAnswer}
http://assets.tumblr.com/images/og/chat_200.png
Facebook
{block:Answer}http://www.facebook.com/sharer/sharer.php?s=100&p[title]={lang:Asker asked}:{PlaintextQuestion}&p[url]={URLEncodedPermalink}&p[images][0]=http://assets.tumblr.com/images/og/chat_200.png&p[summary]={PlaintextAnswer}{/block:Answer}
Twitter
{block:Answer}https://twitter.com/intent/tweet?text={lang:Asker asked}%3A%0A{PlaintextQuestion}%20-%20&url={URLEncodedPermalink}{/block:Answer}
Google Plus
{block:Answer}https://plus.google.com/share?url={URLEncodedPermalink}{/block:Answer}
Pinterest
{block:Answer}http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&description={lang:Asker asked}%3A%0A{PlaintextQuestion}&media=http://assets.tumblr.com/images/og/chat_200.png{/block:Answer}
Reddit
{block:Answer}http://reddit.com/submit?url={URLEncodedPermalink}&title={block:Caption}{PlaintextCaption}{/block:Caption}{/block:Answer}

Related

Creating new oEmbed video provider / oEmbed displays in Wordpress posts but not in the editor

We are creating a service which hosts videos. Users upload videos to our website, and we provide embed codes for playback on their websites.
We have a number of users currently using Wordpress, so we figured we would create an oEmbed service to let users easily copy/paste links into their posts.
We followed a tutorial, and and registered the following provider in wordpress via wp_oembed_add_provider in functions.php
wp_oembed_add_provider('https://vectorly.io/*', 'https://vectorly.io/wordpress/embed');
We set up an oEmbed service endpoint (https://vectorly.io/wordpress/embed?url=....), which returns the following json
{
"version":"1.0",
"type":"video",
"provider_name":"Vectorly",
"provider_url":"https://vectorly.io/",
"width":"600",
"height":"340",
"thumbnail_width":"600",
"thumbnail_height":"340",
"thumbnail_url":"https://s3-us-west-2.amazonaws.com/m.cdpn.io/screenshot-coming-soon-small.png",
"title":"NVP DemoDay - Vectorly",
"html":"<iframe src=\"https://api.vectorly.io/embed/demo/ba37b243-46c4-4f60-9a12-f6885b95c661\" width=\"600\" height=\"340\" frameborder=\"0\" allowfullscreen />"
}
Embedly seems to validate the output
Copying and pasting one of our links (https://vectorly.io/watch/ba37b243-46c4-4f60-9a12-f6885b95c661) into the Wordpress post editor does seem to successfully grab the oembed details
But the embed content editor block doesn't show a preview of the video
The actual published post looks fine though
It seems that the preview block is loading the iframe properly, but is just setting the width and height as 0 during the preview.
Looking at other non-whitelisted oembed providers, this issue doesn't seem to come up, so I think I'm doing something wrong, but I can't figure out for the life of me what it is.
Mucking around in various Wordpress files, I think that other oEmbed links (even from non-whitelisted 3rd parties) are doing something to trigger sizing of the preview Iframe in Javascript.
Any insight on this would be appreciated. Otherwise, we'll just forego oEmbed and stick with vanilla html embed codes
In case anyone else stumbles on this issue in the future:
You need to provide iframe close tags when you send oembed responses to wordpress
I.E. The following does not work
<iframe src="..." />
The following does work
<iframe src="..." ></iframe>
Adding a figure tag improves the result. See the fixed oEmbed output from our server
{
"version":"1.0",
"type":"video",
"provider_name":"Vectorly",
"provider_url":"https://vectorly.io/",
"width":"600",
"height":"338",
"thumbnail_width":"600",
"thumbnail_height":"338",
"thumbnail_url":"https://s3-us-west-2.amazonaws.com/vv-raw-videos/ba37b243-46c4-4f60-9a12-f6885b95c661.png",
"title":"NVP DemoDay - Vectorly",
"html":"<figure><iframe src=\"https://api.vectorly.io/embed/demo/ba37b243-46c4-4f60-9a12-f6885b95c661\" width=\"600\" height=\"338\" frameborder=\"0\" allowfullscreen ></iframe></figure>"
}

<media:content> missing in RSS feed

I am setting up a Newsletter and it requires < media:content> from my RSS feed to pull images. My Wordpress Blog RSS dos not contain any at all and I am wondering how I can change my Feed? https://www.chrisontour84.de/feed
Instead I am getting some kind of encoded content:
<content:encoded><![CDATA[<p><img data-attachment-id="10784" data-permalink="https://www.chrisontour84.de/news/ice-caves-in-iceland-german-trip-report/attachment/guest_ice_cave/" data-orig-file="https://i0.wp.com/www.chrisontour84.de/wp-content/uploads/2018/01/guest_ice_cave.jpg?fit=782%2C163&ssl=1" data-orig-size="782,163" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="#guest_ice_cave" data-image-description="" data-medium-file="https://i0.wp.com/www.chrisontour84.de/wp-content/uploads/2018/01/guest_ice_cave.jpg?fit=300%2C63&ssl=1" data-large-file="https://i0.wp.com/www.chrisontour84.de/wp-content/uploads/2018/01/guest_ice_cave.jpg?fit=645%2C134&ssl=1" class="alignleft wp-image-10784 size-full" style="border: 1px solid #000000;" src="https://i0.wp.com/www.chrisontour84.de/wp-content/uploads/2018/01/guest_ice_cave.jpg?resize=645%2C134" alt="" width="645" height="134" srcset="https://i0.wp.com/www.chrisontour84.de/wp-content/uploads/2018/01/guest_ice_cave.jpg?w=782&ssl=1 782w, https://i0.wp.com/www.chrisontour84.de/wp-content/uploads/2018/01/guest_ice_cave.jpg?resize=300%2C63&ssl=1 300w, https://i0.wp.com/www.chrisontour84.de/wp-content/uploads/2018/01/guest_ice_cave.jpg?resize=600%2C125&ssl=1 600w" sizes="(max-width: 645px) 100vw, 645px" data-recalc-dims="1" /></p>
Things I have checked are:
disabling all Wordpress PlugIns
resetting to Standard Theme
resetting plugins folder via FTP
All of which did not bring the media:content back. Any other ideas?
Hopefully someone can help me and I can grab my Images into the Newsletter.
Thanks!
Chris
EDIT: No one at all is able to help here? :(
The media:content element is part of the MediaRSS specification, which enhances the support for multimedia elements in RSS items.
The first thing I'd try to add media:content to your blog is the Hetjens MediaRSS plugin. This requires that you can add plugins to your blog, of course.
If you identify the newsletter software or site that requires media:content I can check to see whether this solution suits your purpose.

IFTTT to WordPress issue

I'm using IFTTT to post new YouTube videos automatically to WordPress. Every time I upload new video, a new WP post should be generated with this HTML code:
[vc_row row_height_percent="0" overlay_color="color-396201"
overlay_alpha="100" gutter_size="3" column_width_percent="100"
shift_y="0" z_index="0"][vc_column width="1/1"][vc_column_text]
<div class="responsive-video">
https://youtu.be/"videoID"
</div>
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"]
[uncode_block id="67020"][/vc_column][/vc_row]
When IFTTT posts this on WordPress, it works! BUT: IFTTT does not post the correct code - instead it posts this:
[vc_row row_height_percent="0" overlay_color="color-396201"
overlay_alpha="100" gutter_size="3" column_width_percent="100"
shift_y="0" z_index="0"][vc_column width="1/1"][vc_column_text]
<div class="responsive-video">https://youtu.be/"videoID"</div>
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"]
[uncode_block id="67020"][/vc_column][/vc_row]
So IFTTT posts the code without those "spaces" before/after the video URL. And because of that WordPress doesn't automatically embed the video. (It doesn't recognize the URL as a video without those spaces... So on the post the video URL is displayed just as a normal text.
Any idea how to tell IFTTT to keep those "spaces" in the code, so WordPress embeds the video?
if you can put <br> for in between spaces
[vc_row row_height_percent="0" overlay_color="color-396201"
overlay_alpha="100" gutter_size="3" column_width_percent="100"
shift_y="0" z_index="0"][vc_column width="1/1"][vc_column_text]
<div class="responsive-video">
https://youtu.be/"videoID"
</div>
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"]
[uncode_block id="67020"][/vc_column][/vc_row]

iframes in Wordpress

I am trying to generate some embeddable iframe code so a user can include the code on a blog to display content I'm planning to deliver. Right now the content I'm trying to deliver is just a website. I am trying to use the following code on a Wordpress blog:
<iframe width="420" height="315" src="http://www.cnn.com" frameborder="0"></iframe>
However when the page is viewed Wordpress simply outputs a link for "http://www.cnn.com" based on the following html.
http://www.cnn.com
That said, if I use Youtube generated iframe code, the iframe loads fine. For example:
<iframe width="420" height="315" src="http://www.youtube.com/embed/_OBlgSz8sSM" frameborder="0" allowfullscreen></iframe>
results in:
<iframe class='youtube-player' type='text/html' width='420' height='315' src='http://www.youtube.com/embed/_OBlgSz8sSM?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' frameborder='0'></iframe>
Any idea what Youtube is doing to enable this functionality or more generally how to get my simply iframe to work.
I don't know why you get an anchor instead of the iframe, but I know that google don't want their homepage in iframes. If you would have an iframe with the src http://www.google.com, you would see an empty iframe. Also see this example.
=== UPDATE ===
Wordpress prohibits iframes with few exceptions. Probably you can handle it with shortcodes. Try adding following untested code into the functions.php in your theme.
// [iframe src="www.cnn.com"]
function iframe_func($atts) {
extract(shortcode_atts(array(
'src' => 'default'
), $atts));
return '<iframe src="{$src}"></iframe>';
}
add_shortcode('iframe', 'iframe_func');
Now you can add [iframe src="www.cnn.com"] in the article editor in the wordpress admin.
Creating a shortcode is the way I get around this problem. It bypasses the WYSIWYG editor and puts the html in the page.
I would approach it like this.
Add this to your functions.php file:
function add_iframe($atts) {
extract(shortcode_atts(array(
'src' => '/'
), $atts));
$theframe = '<iframe src="'.$src.'" width="420" height="315" frameborder="0"></iframe>';
return $theframe;
}
add_shortcode('iframe', 'add_iframe');
Useage:
Add [iframe src=http://thesiteyouwanttoshow.com] to the content where you want the iframe to show.
If you are loading your own web page within the iframe remember that most hosted solutions will have xFrame options set to SAMEORIGIN, so no matter what you change in Wordpress, the page will still not render as it is being blocked by the target website.
I spent hours with this problem so hopefully if you are having this issue you will the target website as well. If you are hosting a solution on rails the answer I found is here and a website that will definitely load in Wordpress can be found here, so feel free to use that endpoint as a test.
Google uses the X-Frame-Options header (set to SAMEORIGIN) to prevent you from placing it in an iframe. Getting around this would require the user to use a browser that doesn't support X-Frame-Options.
Unfortunately the major search engine sites such as google and yahoo (bing excluded) don't allow for iframe embedding since they offer a plethora of APIs and integration options. So there is really no real way for you to do this. If you are not planning on embedding google as your iframe source then you should be in the clear with the current code that you have in place. Try it out and just change the source to something else - google will not show up in its place. If you want a search engine there unfortunately it is with horror that I say that bing is the only one that works.
Hope this helps!
So in recap - Google does not embed in iframe, but other content that you produce should based on your coding:
example:
<iframe width="420" height="315" src="http://www.uncrate.com" frameborder="0"></iframe>
http://jsfiddle.net/pKby8/
The Anchor that you get is a result of the xFrame option. When it connects to the google servers the servers kick back a cute response hinting that you should link to them instead of iframe.
I would create a WordPress short_code that would insert your iFrame in the output. I think by adding the iFrame code directly in the post box wordpress is changing it.
http://codex.wordpress.org/Shortcode_API

Make Google+ button ignore and div of images on a blog page

I have an blog with related posts image in the top of it. I was waiting for something to fix it since they launch it, but didn't find anything yet so I'm asking for help with it.
The question is. When someone share an post with +1 button, it get the first image of the URL, which usually is one of the featured posts thumbnail.
In Facebook Share I got an plugin that get the 'featured image', but as far I researched, didn't find anyway to make it possible with G+.
So, one of the solutions I considered is making the "Featured post thumbnails" div 'hidden' to G+ button. Is it possible? Or make something similar?
You need to specify the +Snippet values. In the case where a post has no image make sure you keep the image definition but use the blog logo instead.
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="image-url"></img>
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
In addition to Abraham's way, you can specify the og: meta data tags in the <head> section of your blog posts. See http://ogp.me for more information about the og: meta tags. The one you need is <og:image />.
IIRC, Wordpress has plugins that allow you to specify og tags.

Resources