Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow customization of embedded tweets #18

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Sharing tags:
{% tweet_link %} # Tweet with a (no js) link
```

The tweet button and tweet link will open a new page with a composed tweet in the format in your Twitter configuration, `:title by :username - :url :hashtags`.
The tweet button and tweet link will open a new page with a composed tweet in the format in your Twitter configuration, `:title by :username - :url :hashtags`.

Follow tags:

Expand All @@ -120,6 +120,18 @@ This will generate a blockquote, much like this one:

If you include the twitter widget.js in your site, this will automatically be replaced with one of Twitter's fancy embedded tweets.

You can also provide options to customize the appearance of the tweet. The full list of available options can be seen in [Twitter's Developer Documentation](https://dev.twitter.com/web/embedded-tweets/parameters).

For example:

```
{% tweet status_url cards: hidden conversation: none theme: dark %}
Tweet Text
{% endtweet %}
```

This will generate a blockquote as above, but the fancy embedded tweet will not show any embedded media (`cards: hidden`), will not include any of the conversation that the tweet is part of (`conversation: none`), and will display with light text on a dark background (`theme: dark`).

## Facebook

Configure this plugin in your site's `_config.yml`.
Expand Down
34 changes: 25 additions & 9 deletions lib/octopress-social/twitter.rb
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@ def set_url(site, item)
end

def tweet_link(site, item)
%Q{<a
%Q{<a
class="twitter-share-link"
href="https://twitter.com/intent/tweet?&text=#{ERB::Util.url_encode(message(site, item)).strip}"
title="#{config['tweet_link_title']}">#{config['tweet_link_text']}</a>}
end

def tweet_button(site, item)
%Q{
<a href="https://twitter.com/share" class="twitter-share-button"
<a href="https://twitter.com/share" class="twitter-share-button"
#{'data-size="large"' if config['size'] == 'large'}
#{'data-count="none"' if !config['tweet_count']}
data-url="#{url}"
Expand Down Expand Up @@ -91,7 +91,7 @@ def twitter_profile_link(*args)

def twitter_follow_button(*args)
%Q{
<a href="https://twitter.com/#{username.sub('@', '')}" class="twitter-follow-button"
<a href="https://twitter.com/#{username.sub('@', '')}" class="twitter-follow-button"
#{'data-show-count="false"' if !config['follow_count']} data-dnt="true">#{profile_link_text}</a>
}
end
Expand All @@ -100,10 +100,17 @@ def twitter_script_tag(*args)
"<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>"
end

def tweet(site, item, url, content)
def tweet(site, item, url, content, attributes)
default_attributes = {
"link-color" => config['embedded_link_color']
}
data_attributes = default_attributes.merge(attributes).map do |key, value|
%Q{data-#{key}="#{value}"}
end.join(" ")
user = "@#{url.match(/.com\/(.+)?\/status/)[1]}"

%Q{<blockquote class="twitter-tweet"
data-link-color="#{config['embedded_link_color']}"
#{data_attributes}
lang="#{item['lang'] || site['lang']}">
<p>#{content}</p>
<a href="#{url}"> — #{user}</a>
Expand All @@ -112,17 +119,26 @@ def tweet(site, item, url, content)
end

class Tweet < Liquid::Block
def initialize(tag, input, tokens)
Syntax = /(#{Liquid::QuotedFragment})(.*)/

def initialize(tag, markup, options)
super
@tag = tag.strip
@input = input.strip
if markup =~ Syntax
@url = $1
@attributes = {}
$2.scan(Liquid::TagAttributes) do |key, value|
@attributes[key] = value
end
else
raise Liquid::SyntaxError.new
end
end

def render(context)
content = super(context)
site = context['site']
item = context['page']
Octopress::Social::Twitter.tweet(site, item, @input, content).gsub(/(\s{2,}|\n)/, ' ').strip
Octopress::Social::Twitter.tweet(site, item, @url, content, @attributes).gsub(/(\s{2,}|\n)/, ' ').strip
end
end

Expand Down